Разработка простых таблиц стилей является довольно простым занятием. Разработчик должен иметь базовые знания по HTML и по полиграфической терминологии. Например для определения цвета элементов 'H1' как синий, достаточно сказать:
H1 { color: blue }
Приведенный пример является простым правилом CSS. Правило состоит из двух основных частей: селектора ('H1') и определения ('color: blue'). Определение в свою очередь тоже состоит из двух частей: свойства ('color') и значения ('blue'). В то время, как приведенный пример пытается повлиять только на одно из свойств, необходимых для построения HTML документа, он уже является таблицей стилей. Скомбинированный с другими таблицами стилей (одним из фундаментальных свойств CSS является комбинирование таблиц стилей) он будет определять конечный вид всего документа.
Селектор является связью между HTML документом и таблицей стилей, полный набор типов элементов содержит все возможные селекторы. Типы элементов определены в спецификации HTML [2].
Cвойство 'color' является одним из порядка 50 свойств, которые определяют вид HTML документа. Список свойств и их возможных значений определяется в данной спецификации.
Авторам HTML необходимо определять свою таблицу стилей только в том случае, если они хотят предложить специфический стиль для своих документов. Каждый UA должен иметь таблицу стилей по умолчанию, которая представляет документы в приемлемом, но может быть достаточно простом виде. П приложении А приведена примерная таблица стилей для представления HTML документов так, как это предлагается в спецификации HTML 2.0 [3].
Формальная грамматика языка CSS1 определена в приложении B.
Для того, чтобы таблица стилей влияла на вид документа, UA должен знать о ее существовании. Спецификация HTML [2] определяет способы включения таблиц стилей в 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 [2], интерпретаторы SGML не будут считать таблицу стилей комментарием, который надо удалить.
Для уменьшения размера таблицы стилей можно группировать селекторы в разделенные запятыми списки:
H1, H2, H3 { font-family: helvetica }
Точно также можно группировать определения:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
В дополнение к этому некоторые свойства имеют собственный синтаксис группировки:
H1 { font: bold 12pt/14pt helvetica }
что эквивалентно предыдущему примеру.
В первом примере цвет элементов 'H1' был установлен в синий. Представьте, что есть элемент 'H1' с элементом <EM> внутри:
<H1>The headline <EM>is</EM> important!</H1>
Если для элемента 'EM' не было определено никакого цвета, то Emированный "is" унаследует цвет родительского элемента, т.е. он также будет отображен синим цветом. Другие свойства стиля также наследуются, например 'font-family' и 'font-size'.
Для определения свойства стиля по умолчанию для документа, можно задать это свойство у элемента, от которого наследуются все остальные видимые элементы. В HTML документах элемент 'BODY' выполняет эту функцию:
BODY {
color: black;
background: url(texture.gif) white;
}
Этот пример сработает даже если автор опустил тэг 'BODY' (что является допустимым) благодаря тому, что браузер вставит пропущенный тэг. Предыдущий пример устанавливает цвет текста в черный, а фон - содержащий картинку. Фон будет белым в том случае, если картинка будет недоступна. (См. подробности в главе 5.3)
Некоторые свойства стилей не наследуются от родительских элементов дочерними элементами. В большинстве случаев интуитивно понятно в каких случаях возникает такая ситуация. Например свойство 'background' не наследуется, но фон родительского элемента по умолчанию будет просвечивать сквозь.
Часто значение свойства указывается в процентах от другого свойства:
P { font-size: 10pt }
P { line-height: 120% }
/* relative to 'font-size', i.e. 12pt */
Для любого свойства, значения которого могут указываться в процентах, определено свойство на которое оно ссылается. Дочерние элементы 'P' унаследуют вычисленное а не процентное значение 'line-height' (12pt).
Для увеличения гибкости контроля над элементами, в HTML добавлен новый атрибут [2] 'CLASS'. Все элементы внутри элемента 'BODY' могут быть классифицированы, а на класс можно сослаться через таблицу стилей:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Way too green</H1>
</BODY>
</HTML>
К классифицированным элементам применяются нормальные правила наследования, они наследуют значения своих родителей в структуре документа.
Можно адресовать все элементы одного класса опустив имя тэга в селекторе:
.pastoral { color: green }
/* all элементы with CLASS pastoral */
Для каждого селектора можно определить только один класс. 'P.pastoral.marine' таким образом является неправильным селектором в CSS1. (Контекстные селекторы, описанные ниже, могут определять один класс для одного простого селектора).
CSS предоставляет настолько большие возможности для использования атрибута CLASS, что во многих случаях не важно у какого элемента HTML устанавливается класс - можно заставить любой элемент эмулировать любой другой элемент. Но не рекомендуется полагаться на такую возможность, т.к. это лишает документ структуры, которая имеет универсальное значение (элементы HTML). Структура основанная на классах имеет узкое применение только в тех случаях, когда значения классов оговорены с обеих сторон.
HTML [2] также теперь определяет атрибут 'ID', который гарантированно имеет уникальное значение в документе. Таким образом он имеет особое значение, как селектор таблицы стилей, и может адресоваться с помощью '#':
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Wide text</P>
В приведенном примере первый селектор соответствует элементу 'P' благодаря 'ID' атрибута. Второй селектор определяет как тип элемента ('H1'), так и значение ID, и, поэтому, не соответствует элементу 'P'.
Используя ID в качестве селектора, можно устанавливать свойства поэлементно. В то время как таблицы стилей были разработаны для визуализации структуры документа, это свойство позволяет авторам создавать документы, которые корректно отображаются на холсте без использования структурных элементов HTML. Такое использование таблиц стилей не приветствуется.
Наследование значительно уменьшает количество напечатанного текста CSS дизайнерами. Вместо того, чтобы указывать все свойства стилей, можно установить значения по умолчанию, а затем указать исключения. Для того, чтобы элементы 'EM' внутри 'H1' имели другой текст, можно было бы указать:
H1 { color: blue }
EM { color: red }
Когда данная таблица стилей будет использована, весь текст внутри 'EM', как внутри, так и вне 'H1' станет красным. Очевидно, хотелось, чтобы только те элементы 'EM', которые заключены в 'H1' стали красными. Этого можно достигнуть, указав:
H1 EM { color: red }
В этом случае селектор является маской поиска в стеке открытых элементов, а такой селектор называется контекстным селектором. Контекстные селекторы состоят из простых селекторов, разделенных пробелом (все описываемые до этого селекторы являлись простыми селекторами). Описанные правила применяются только к элементу, который соответствует последнему простому селектору (в данном случае элемент 'EM'), и только в том случае, если результат поиска является положительным. Контекстные селекторы в CSS1 описывают только наследственные взаимосвязи, в то время как последующие версии могут описывать м другие виды связи.
UL LI { font-size: small } UL UL LI { font-size: x-small }В этом случае первый селектор соответствует элементам 'LI' в как минимум одним предком 'UL'. Второй селектор соответствует подмножеству первого, т.е. элементы 'LI' с как минимум двумя предками 'UL'. Конфликт разрешается тем, что второй селектор является более специфичным в связи с более длинной маской поиска. См. подробнее о порядке каскадирования (раздел 3.2).
Контекстные селекторы могут содержать тип элемента, атрибуты CLASS, атрибуты ID или их комбинацию:
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
Первый селектор соответствует элементам 'P', которые среди предков имеют 'DIV'. Второй селектор соответствует всем элементам 'H1' которые имеют предка класса 'reddish'. Третий селектор соответствует всем элементам 'CODE', которые являются наследниками элемента с 'ID=x78y'. Четвертый селектор соответствует всем элементам 'H1', которые имеют предка 'DIV' с классом 'sidenote'.
Можно группировать несколько контекстных селекторов:
H1 B, H2 B, H1 EM, H2 EM { color: red }
что эквивалентно:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Текстовые комментарии в таблицах стилей оформляются так же как и в языке Си [7]:
EM { color: red } /* red, really red!! */
Комментарии не могут вкладываться друг в друга. Для обработчика CSS1 комментарий эквивалентен пробелу.