Таблицы стилей - Создание сайта на языке HTML
Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии, поэтому правила составления стилевых шаблонов были весьма разрозненными.
С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые. Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки).
В завершение разговора об уровнях CSS следует добавить, что переход от одного уровня к другому, в основном, сопровождался некоторыми видоизменениями в структуре и в правилах стилевого оформления, технологическими дополнениями, а также попытками систематизировать применение CSS.
Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей.
Способы определения таблиц стилей
Как уже было сказано, любая таблица стилей CSS должна быть интерпретирована браузером для того, чтобы правила CSS, обозначенные для конкретных элементов электронного документа, вступили в силу.
Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами:
Ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега <link> из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например:
<LINK REL="stylesheet" TYPE="text/css" HREF="style. css">
Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в соответствии с определенными правилами CSS.
Следует помнить, что конструкция указания пути к внешнему CSS-файлу должна находиться в пределах раздела head HTML-документа;
Внедрение в документ. Под внедрением в документ подразумевается задание стилевой конструкции внутри самой HTML-страницы, например:
<STYLE TYPE="text/CS3">
<! --
BODY { font-family: Arial, Helvetica; }
INPUT { background-color: ICECECE; }
-- >
</STYLE>
Данная конструкция также должна присутствовать в разделе head. Для браузеров, не поддерживающих CSS вообще или поддерживающих лишь отдельные правила стилевого оформления, описание шаблонов заключается между символами комментариев (при отсутствии поддержки CSS браузер пропустит содержание стилевых шаблонов, если же поддержка есть, то браузер интерпретирует правила CSS);
Включение в теговые конструкции. Любой отдельный HTML-элемент может быть подвергнут форматированию средствами CSS. Для этого необходимо задать определенное правило реализации того или иного тега, например:
<Р ALIGN="justify" STYLE="color: 1000000; font-family: Verdana;"> Текст параграфа...
В этом случае задано отдельное правило для конкретного параграфа. Также можно присваивать отдельному HTML-элементу определенный класс стилевого шаблона:
<TABLE>
<TR>
<TD CLASS="header"X/TD>
<TD CLASS="text"X/TD>
</TR>
</TABLE>
Описание классов должно строиться следующим способом (на примере внедрения стилевого шаблона в документ):
<STYLE TYPE="text/css">
<! --
.header { font-weight: bold; color: gray; }
.text { color: black; font-size: llpx; }
->
</STYLE>
В данном случае текст табличной ячейки класса. header будет отображаться жирным начертанием и серым цветом, а ячейки класса. text - обычным начертанием, черным цветом и размером шрифта 11 пикселов;
Импортирование. Импортирование стилевого шаблона CSS, по сути, аналогично указанию ссылки на внешний файл:
<STYLE TYPE-"text/css">
<! --
@import: url(style. ess);
->
</STYLE>
Все четыре способа определения стилевого шаблона CSS можно использовать одновременно в пределах одного HTML-документа (листинг 9.1). Такая возможность позволяет задавать основное правило CSS, к примеру, в виде внешнего файла шаблонов, а для исключительных или редких HTML-элементов -- отдельные конструкции либо в теге <style>, либо в кодовых конструкциях самих тегов.
Листинг. Совмещение различных способов определения стилевого шаблона CSS
<HTML> <HEAD>
<Т1ТLЕ>Совмещение различных способов определения CSS</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style. css"> <STYLE TYPE="text/css"> <! --
P { text-align: justify; color: green; }
.title { color: blue; font-weight: bold; font-size: 16px; } -- >
</STYLE> </HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="|OOFFOO" ALINK="IOOFFOO" VLINK="blue">
<FONT CLASS="title">Cnocoбы определения шаблонов CSS</FONT>
Ниже перечислены существующие способы определения стилевых шаблонов CSS, даны характеристики каждого способа, приведены примеры их использования.
<UL>
<LI>Ссылка на внешний файл
< LI >Внедрение в документ
< LI >Включение в теговые конструкции
< LI >Импортирование
</UL>
</BODY>
</HTML>
Также следует сказать, что использование каждого способа определения стилевых шаблонов CSS может быть связано с некоторыми минусами.
В случае ошибки интерпретации HTML-кода браузером, плохой связи с сервером и пр. внешний файл CSS может не загрузиться, вследствие чего стиль для нужных элементов HTML не будет переопределен.
Если внешний файл CSS включает слишком большое количество стилевых шаблонов (что отражается на конечном размере файла), то существует вероятность того, что браузер не сумеет полностью интерпретировать файл CSS или вообще исчерпает лимит времени по загрузке данных. В первом случае стили для части элементов не будут переопределены (браузер успеет "обнаружить" только те правила, которые размещены в верхней части CSS-файла). Во втором случае все элементы страницы останутся без изменения, загрузившись по умолчанию.
При использовании способа включения стиля в сам документ наличие слишком большого количества шаблонов CSS заметно увеличит конечный размер HTML-страницы, что скажется на времени загрузки документа в браузере.
При сочетании различных способов определения стилевых шаблонов следует учитывать особенности браузеров. К примеру, Netscape "плохо относится" к использованию символа нижнего подчеркивания ( _ ) в указании классов для элементов HTML (.news_titie, ._about и т. д.). Также ряд браузеров (и Netscape в том числе) не подключает стилевой шаблон класса, присвоенного ячейке таблицы <то>/<тн>: конструкция <то CLASS="text">TeKCT</TD> выведет текст по умолчанию, a <tdxfont CLASS="text">TeKCT</FONT></TD> отобразит текст заданным стилем.
Похожие статьи
-
На сегодняшний момент HTML5 все еще разрабатывается. Все еще ведутся обсуждения по поводу следующих нерешенных проблем: - Доработка некоторых элементов...
-
Для создания отдельного нового стиля в оформляемой таблице сначала необходимо вызвать команду /Вид /Определить Стиль. Процессор QUATTRO PRO откроет...
-
За структуру HTML-документа отвечают следующие теги: <HTML> - в данном контейнере находится все содержимое HTML-документа. <HEAD> - содержит...
-
Принцип работы языка. Синтаксис Как и было сказано ранее основой для HTML-были приняты текстовые документы, содержащие в себе HTML5. Рассмотрим следующий...
-
Для создания нового сайта используем пункт меню "ФайлСоздатьСтраница или веб-узел". При этом появляется окно для выбора типа сайта (см. рис.). Кроме...
-
Проектирование и разработка сайта Средства разработки Язык гипертекстовой разметки HTML В Интернете сосредотачивается и передается достаточно большое...
-
Структура WEB-страницы - Создание сайта на языке HTML
Заготовка типичной WEB-страницы: <HTML> <HEAD> <TITLE> Структура WEB-страницы </title> <STYLE> H2 {font-family: Arbat;}CODE { font-family:...
-
Гипертекст - Создание сайта на языке HTML
Уже достаточно много времени затрачено на то, чтобы научиться при помощи HTML и браузера выводить на экран тексты. Но это просто Тексты . Используя...
-
История создания и развития языка HTML - Язык HTML как средство создания информационных ресурсов
В 1989 году Тим Бернерс-Ли, сотрудник центра высоких технологий (CERN), предложил проект распределенной гипертекстовой системы под названием WWW (World...
-
Теоритическая часть, История и версии HTML - Создание сайта на языке HTML
История и версии HTML Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для...
-
Оформление сайта, Язык HTML - Создание сайта
Оформление или дизайн - это внешний вид сайта. Эта та оболочка, которую вам придется надевать на ваш сайт, как этикетку на коробку с товаром. От этой...
-
Каскадные таблицы стилей находятся в отдельном файле, подключение к странице сайта осуществляется посредством размещения в <head> ... </head>...
-
HTML таблицы. - Создание электронного учебника (по HTML) в редакторе Microsoft Front Page
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры,...
-
Введение - Создание сайта на языке HTML
В век цифровых технологий и массовой компьютеризации, интернет стал неотъемлемой частью нашей жизни, а web-программирование и дизайн престижной и...
-
Что такое HTML. Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB....
-
Создание упражнений, Содержание начального уровня владения японским языком - Создание приложения
Японский упражнение лингвистический приложение В этой главе будет рассмотрено содержание начального уровня изучения японского языка; описан проведенный...
-
Редакторы HTML - Компьютерные сети
- Adobe Dream Weaver; - Microsoft Expression Web; - SharePoint Designer (бесплатный); - Web Development Studio (бесплатная); - Word; - Microsoft Front...
-
Заключение, Список литературы - Язык HTML как средство создания информационных ресурсов
На сегодняшний момент перспективы развития языка представляются четче, чем раньше, но все еще не совсем просто. Над языком трудятся две организации,...
-
Каскадные таблицы стилей CSS - Компьютерная лингвистика в образовательной среде
Язык CSS отвечает за стиль в том или ином документе. Он используется для того, чтобы придать страницам на HTML -- фундаментальном языке WWW --...
-
Назначение системы Сайт "вопрос-ответ" предназначен для поиска ответов на интересующие пользователей вопросы, с рейтингом пользователей, возможностью...
-
Применение полученных знаний на практике. Создание приложения - Программирование на языке C++
Я применил полученные знания при разработке простого приложения TodoList. Я соблюдал все принципы SOLID. Придерживаясь принципа инверсии зависимости я...
-
Шаблоны сайта Bootstrap3 Веб-дизайн является одним из основных элементов в процессе создания сайта. Именно от него зависит, насколько удобно и комфортно...
-
Введение - Создание таблиц в Microsoft Excel
Электронный таблица еxcel интерфейс Цель данной контрольной работы: получение начальных навыков работы c электронными таблицами Microsoft Excel 2010,...
-
Создание заголовков - Создание сайта
Заголовки - отличный инструмент структурной организации содержимого Веб-страницы. Стандарт HTML предусматривает возможность использования заголовков...
-
Бесшовный фон - Создание сайта
Фон web-страниц в значительной мере определяет стиль и привлекательность всего сайта. В программе PhotoShop создайте документ размером 100х100 пикселов с...
-
Создание Web-страниц в прикладной программе FrontPage - Создание сайта
Создание новой пустой Web-страницы Если при открытии окна программы FrontPage в нем отображается пустая страница, то разработку веб - страницы можно...
-
Center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Left...
-
Проектный программный динамический Для проектирования создания сайта компании "АПТЕКА" используется система управления проектами Microsoft Office Project...
-
Структура web-документа - Создание сайта
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE...>, которая обычно...
-
Начинать следует с определения структуры таблицы, соответствующей предметной области, т. е. с определения полей, которые надо включить в таблицу, типов...
-
Классификация команд языка. - Технология создания и управления баз данных
Команды SQL Команда Назначение Описание данных CREATE TABLE Создает структуру таблицы Манипулирование данными INSERT Добавляет новые записи в таблицу...
-
Выводы - Создание таблиц в Microsoft Excel
Итак, в ходе работы мною были изучены необходимые учебные материалы, а также были отработаны навыки работы с табличным процессором MS Excel 2010. Я...
-
Ответы на вопросы - Создание таблиц в Microsoft Excel
1. Как изменить ширину столбца (высоту строки) в таблице MS Excel?. Для того, чтобы изменить ширину столбца можно: - Навести курсор на линию,...
-
Разрезаем изображения - Создание сайта
В последнее время весьма актуальной задачей, стоящей перед Web-дизайнерами является разработка интерактивной графики. Одной из разновидностей такой...
-
Создание заголовка страницы - Создание сайта
Создайте в программе Adobe PhotoShop новый документ с размерами, соответствующими размерам заголовочной части страницы (посмотреть размер с помощью...
-
Создание таблиц базы данных в Database Desktop Database Desktop - это утилита, во многом похожая на Paradox, которая поставляется вместе с Delphi для...
-
Для использования в нашей презентации электронной таблицы нам понадобится помощь широко известных программ Excel и Word, так как таблицу мы можем создать...
-
В созданной рабочей книге Лабораторная работа 1 переходим на Лист 2, переименовываем его в Расчет зарплаты. Далее создадим таблицу представленную в...
-
Анализ целевой аудитории. - Создание сайта
Пользовательская аудитория - преимущественно мужчины (80%), а так же женщины (20%) в возрасте от 18 до 50 лет. Можно разделить на четыре (4) основные...
-
Создание баннера - Создание сайта
Баннер представляет собой рекламный рисунок для рекламы в Интернете созданного сайта. Как правило, баннер - это графическое изображение прямоугольной...
Таблицы стилей - Создание сайта на языке HTML