HTML / 8. Каскадные таблицы стилей

Синтаксис стилей

Синтаксис стилей, как можно было заметить из предыдущих примеров, очень прямолинеен.

Основы
Стилевое правило состоит, по меньшей мере, из двух основных частей: селектора, так называется элемент разметки, который подчиняется этому правилу, следующих за ним двух фигурных скобок ({}) и заключенного в этих скобках списка пар вида свойство:значение (property: value), элементы которого разделяются точками с запятой:selector {property1:value1; property2:value1; ...}

В частности, мы могли определить цвет содержимого всех заголовков уровня 1 в нашем документе, написав:

h1 {color:green}

В этом примере h1 – это селектор и в то же время название элемента «заголовок уровня 1», color – свойство стиля, а green – значение. Просто и ясно.

Свойства требуют указания хотя бы одного значения, но могут иметь и несколько. Значения, разделенные запятыми, обычно свидетельствуют о том, что свойство принимает ряд значений, из которых берется первое допустимое. Если значения разделены пробелами, то к свойству применяется каждое. Последнее допустимое значение переопределяет предыдущее:

selector {property3:value1 value2 value3}
selector {property4:value1, value2, value3}

Например, в следующем случае фон будет черным, а не белым или серым, даже если вы укажете белый и черный цвета в стилевом правиле:

body {background: white black}

Современные поддерживающие стили броузеры игнорируют регистр букв в любом элементе стилевого правила. Так что H1 и h1 – это один и тот же селектор, а COLOR, color, CoLOR и cOLor – эквивалентные свойства. Когда-то требовалось, чтобы HTML-авторы записывали имена селекторов заглавными буквами, например H1, P и STRONG. Это и сейчас
принято делать и так пишется в принадлежащем W3C CSS2-документе.

Однако действующие стандарты настаивают, особенно для документов, соответствующих XML, чтобы названия элементов записывались с применением тех же регистров, что использовались в их DTD. Например, в XHTML названия элементов (скажем, h1, strong) вводятся строчными буквами, так что их CSS2-селекторы тоже должны записываться строчными буквами. Мы придерживаемся этого последнего соглашения.
Любое допустимое название элемента (имя тега за вычетом атрибутов и заключающих скобок < и >) может быть селектором. В список селекторов можно включать более чем одно имя тега, как будет показано в следующих разделах.

Множественные селекторы
Ко всем перечисленным через запятую в селекторном списке элементам применяются значения свойств, определенных в стилевом правиле. Это облегчает авторам жизнь. К примеру:

h1, h2, h3, h4, h5, h6 {text-align: center}делает в точности то же, что и:
h1 {text-align: center}
h2 {text-align: center}
h3 {text-align: center}
h4 {text-align: center}
h5 {text-align: center}
h6 {text-align: center}

Оба стилевых определения предлагают броузеру центрировать содержимое заголовков уровней 1–6. Для большинства авторов первый вариант легче набрать, понять и изменить. И он требует меньше времени и затрат других ресурсов при передаче по сети, хотя результат тривиален. Определяйте стили так, как вам удобнее. Вы не обязаны использовать множественные селекторы.

Контекстные селекторы
Обычно поддерживающие стили броузеры применяют определенные на уровне документа или встроенные стили к тегам везде, где они обнаруживаются в тексте документа, безотносительно к контексту. Однако стандарт CSS2 определяет способ применения стиля только к тегам, находящимся в определенном контексте, например содержащимся внутри другого тега.

Чтобы создать контекстный селектор, перечислите теги в том порядке, в котором они должны вкладываться в документ, начиная с самого внешнего. Когда броузер встретит такой порядок вложения, стилевое правило будет применено к последнему тегу списка.
Вот, например, как можно использовать контекстные стили для определения классической последовательности нумерации в упорядоченных списках: заглавные латинские буквы для самого внешнего уровня, римские цифры в верхнем регистре для следующего, затем арабские цифры и строчные латинские буквы для самого внутреннего уровня:

ol li {list-style: upper-roman}
ol ol li {list-style: upper-alpha}
ol ol ol li {list-style: decimal}
ol ol ol ol li {list-style: lower-alpha}

Следуя приведенной таблице стилей, поддерживающий стили броузер, встречая тег <li>, вложенный в один тег <ol>, применяет значение upper-roman для свойства list-style тега <li>. Когда тот же броузер видит тег <li>, вложенный в два тега <ol>, он использует значение upper-alpha свойства list-style. Вложите тег <li> в три и четыре тега <ol>, и вы увидите соответственно decimal- и lower-alpha-стили нумерации.

Подобным образом можно устанавливать некий стиль только для тегов, находящихся в определенном контексте. Следующее определение стиля, например, наделит красным цветом содержимое только тех те-гов логического подчеркивания (<em>), которые встречаются внутри заголовков первого уровня (в тегах <h1>), и никаких других:

h1 em {color: red}

Если существует противоречие между двумя контекстными стилями, более специфический контекст побеждает.

В селекторный список могут входить как селекторы, являющиеся именами тегов, так и контекстные селекторы, при этом все они должны отделяться друг от друга запятыми. Все элементы селекторного списка подчиняются общему для них стилевому правилу. Пример:

h1 em, p strong, address {color: red}

означает, что вы увидите красный цвет всюду, где тег <em> содержится в теге <h1> или тег (strong) появляется внутри тега <p>, а также в содержимом тега .

Для того чтобы было применено контекстное правило, последовательность вложений не обязана точно совпадать с контекстным селектором.

К примеру, если тег (strong) вложен в тег <ul>, входящий, в свою очередь, в тег <p>, он все еще подчиняется контекстному правилу p strong, определенному выше. Если некоторое вложение тегов подходит для применения нескольких стилевых правил, употребляется более специфичное. В частности, если вы определили два контекстных селектора:

p strong {color: red}
p ul strong {color: blue}

и использовали в документе последовательность <p><ul>(strong), будет применено второе, более специфическое, правило, и содержимое тега (strong) будет синим.

Универсальные, дочерние и смежные селекторы
Стандарт CSS2 определяет дополнительные конструкции селекторов, кроме уже известных, составляемых при помощи запятых и пробелов. Следующие примеры допустимых селекторов иллюстрируют это утверждение:

* {color: purple; font: ZapfDingBats}
ol > li {font-size: 200%; font-style: italic}
h1 + h2 {margin-top: +4mm}

В первом примере звездочка, универсальный селектор, указывает, что стилевое правило должно быть применено ко всем элементам документа, так что любой текст в нем должен быть представлен символами набора ZapfDingBats. Во втором примере устанавливаются отношения типа дочерний/родительский, в данном случае между элементами
упорядоченного списка.

Третий пример иллюстрирует тип смежного селектора, который относится к тегу, непосредственно следующему за другим тегом в документе. В этом случае всякий раз, когда за заголовком уровня 1 непосредственно стоит заголовок уровня 2, между ними увеличивается вертикальный интервал.

Селекторы атрибутов
Существует возможность присоединить стиль только к тем элементам HTML/XHTML, которые обладают специфическими атрибутами. Для этого следует перечислить нужные атрибуты в квадратных скобках рядом с именем элемента до определения стиля:

div[align] { font-style: italic }
div[align=left] {font-style: italic }
div[title~="bibliography"] { font-size: smaller }
div[lang|="en"] {color: green }

Первый пример – самый простой. Он выделяет курсивом текстовое содержимое только тех тегов <div>, которые имеют атрибут align, независимо от значения этого атрибута. Второй пример чуть сложнее. Он затрагивает только те теги <div>, у которых атрибут align имеет значение left.

Третья строчка относится к тегам <div>, чей атрибут title содержит слово bibliography, отделенное одним или несколькими пробелами.

Частичное совпадение снова не считается. Если бы вы указали div[title~="a"], стиль относился бы только к тем тегам <div>, у которых атрибут title содержит букву «а», отделенную пробелами или стоящую в начале или конце названия.Последний пример определяет теги <div>, у которых атрибуту lang присвоен список слов, разделенных дефисами и начинающихся на «en». Под это условие подходят такие атрибуты как

lang=en, lang=en-us
и lang=en-uk.

Вы можете сочетать универсальный селектор с селекторами атрибутов, чтобы вашему определению соответствовал любой элемент с указанным атрибутом. Например:

*[class=comment] { display: none }

Этот селектор спрячет все элементы документа, у которых атрибут class имеет значение comment.

Netscape, Firefox, Opera и другие современные броузеры поддерживают селекторы атрибутов. По неизвестным причинам Internet Explorer этого не делает.

Псевдоэлементы
В документах встречаются отношения между элементами, которые невозможно или неудобно выражать при помощи тегов. Употребление буквицы – это общепринятый прием при печати, но как выделить первую букву абзаца? Такие способы есть, но вам придется отмечать каждый случай в отдельности. Не существует тега для первой буквы абзаца. Бывают ситуации, когда хочется, чтобы броузер автоматически генерировал содержимое, добавляя, например, префикс «элемент №», и автоматически нумеровал каждый элемент упорядоченного списка.

CSS2 вводит четыре псевдоэлемента, позволяющие определять особые отношения и стили для их отображения: first-line (первая строка), first-letter (первая буква), before (перед чем-либо) и after (после чего-либо). Объявляйте эти отношения, добавляя к стандартному элементу разметки отделенный двоеточием суффикс. К примеру:

p:first-line {font-size: 200%; font-style: italic}

означает, что броузер должен отображать первые строки абзацев курсивом и шрифтом крупнее остального текста в два раза. Подобным образом:

p:first-letter {font-size: 200%; float: left}

предлагает броузеру сделать первую букву абзаца в два раза крупнее остального текста, сдвинуть ее влево и разрешить первым двум строкам абзаца обтекать большую начальную букву.Псевдоэлементы :before и :after позволяют указывать в документе места, куда вставляется автоматически генерируемое содержимое, в частности особые заголовки и т. д. Стало быть, эти псевдоэлементы идут рука об руку с такими свойствами CSS2, как counter и content. Следующий пример вас, возможно, заинтересует:

ul {counter-reset: item; list-style: none}
ul li:before {content: "Item #" counters(item), " ";
counter-increment: item}
...
<ul>
<li> This is item number 1.</li>
<ul>
<li> This is sub-item number 1.1.</li>
</ul>
<li> This is item number 2.</li>
<ul>
<li> This is sub-item 2.1.</li>
<li> This is sub-item 2.2.</li>
... and so on

Все популярные броузеры поддерживают псевдоэлементы, порождающие эффекты. При этом Internet Explorer не поддерживает свойство content, а Netscape не поддерживает счетчики.

Статьи по HTML на эту тему:

Бестеговые стили – тег <span>
Применение стилей в документах
Стилевые классы
Стилевые свойства

Вернуться в раздел: HTML / 8. Каскадные таблицы стилей