Разработка простых таблиц стилей является довольно простым занятием. Разработчик должен иметь базовые знания по HTML и по полиграфической терминологии. Например для определения цвета элементов "H1" как синий, достаточно сказать:
H1 { color: blue }
Приведенный пример является простым правилом CSS. Правило состоит из двух основных частей: селектора ("H1") и определения ("color: blue"). Определение в свою очередь тоже состоит из двух частей: свойства ("color") и значения ("blue"). В то время, как приведенный пример пытается повлиять только на одно из свойств, необходимых для построения HTML документа, он уже является таблицей стилей. Скомбинированный с другими таблицами стилей (одним из фундаментальных свойств CSS является комбинирование таблиц стилей) он будет определять конечный вид всего документа.
Селектор является связью между HTML документом и таблицей стилей, полный набор типов элементов содержит все возможные селекторы. Типы элементов определены в спецификации HTML.
Cвойство "color" является одним из порядка 50 свойств, которые определяют вид HTML документа. Список свойств и их возможных значений определяется в данной спецификации.
Авторам HTML необходимо определять свою таблицу стилей только в том случае, если они хотят предложить специфический стиль для своих документов. Каждый UA должен иметь таблицу стилей по умолчанию, которая представляет документы в приемлемом, но может быть достаточно простом виде. П приложении А приведена примерная таблица стилей для представления HTML документов так, как это предлагается в спецификации HTML 2.0.
Включение в HTML Назад
Для того, чтобы таблица стилей влияла на вид документа, UA должен знать о ее существовании. Спецификация HTML определяет способы включения таблиц стилей в HTML. Поэтому данный раздел является информативным, а не нормативным:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>
Данный пример демонстрирует четыре способа объединения стиля с HTML:
используя элемент "LINK" для связи с внешней таблицей стилей,
используя элемент "STYLE" внутри элемента "HEAD",
импортируя таблицу стилей с помощью нотации CSS "@import"
используя атрибут "STYLE" в элементе внутри секции "BODY".
Последний способ смешивает стиль с содержимым и поэтому теряет соответствующие достоинства традиционных таблиц стилей.
Элемент "LINK" ссылается на альтернативную таблицу стилей, которую может выбрать читатель, в то время как импортируемые таблицы стилей автоматически объединяются с остальной частью таблицы стилей.
Традиционно UA игнорировали неизвестные теги. Как результат старые UA будут игнорировать элемент "STYLE", но его содержимое будет считаться, как часть тела документа и будет отображаться в документе. В течение переходного периода содержимое элемента "STYLE" можно "прятать", используя комментарии SGML:
<STYLE TYPE="text/css"><!-- H1 { color: green }--></STYLE>
В связи с тем, что элемент "STYLE" определен, как "CDATA" в DTD, интерпретаторы SGML не будут считать таблицу стилей комментарием, который надо удалить.
1 2 3 4
8 8 8
| |
*
Обратная связь