Каскадные таблицы стилей
Наконец-то у меня появилась возможность продолжить повествование. Безусловно, задержка с выходом очередной публикации получилась в это раз весьма большой. Очень хочется надеяться, что в ближайшее время мне удастся наверстать упущенное.
В прошлый раз мы занимались созданием базового HTML-документа, который стойко пролежал на веб-сервере в гордом одиночестве целых три месяца. Думаю, что настало время избавить его от этой участи и проделать вторую по счету (но не менее важную) подготовительную работу – снабдить наш документ базовыми стилевыми инструкциями. Однако, не все так просто, как кажется.
Публикация «Готовим базовый документ» не могла быть написана без предварительного сугубо теоретического материала о языках разметки гипертекста. Аналогичным образом невозможно написать практическое руководство по созданию базового стилевого файла без определенного теоретического введения в предмет.
По этой причине в данной публикации мы рассмотрим ключевые аспекты каскадных таблиц стилей: основные синтаксические конструкции, наследование и правила каскадирования. Надеюсь, что предложенный вашему вниманию материал послужит хорошей отправной точкой для всех последующих практических занятий.
Немного истории
Каскадные таблицы стилей (Cascading Style Sheets) – это стандартная технология, специально предназначенная для визуального форматирования документов. Другими словами, каскадные таблицы стилей являются языком дизайна, который позволяет визуализировать структурную разметку.
Спецификация CSS1 была официально утверждена 17 декабря 1996 года и впоследствии пересмотрена 11 января 1999 года. В том далеком 1996 году Консорциум W3C оказался в довольно-таки непростой ситуации. Поскольку специалисты W3C пытались увязать каскадные таблицы стилей с выходом HTML 3, Спецификация CSS1 не утверждалась в качестве официального стандарта очень долгое время. Как следствие, реализация CSS в браузерах тоже сильно запоздала. Более того, из-за весьма безответственного отношения производителей браузеров к CSS, даже частичная поддержка этой новой технологии содержала массу ошибок.
В принципе, сложившаяся во то время ситуация имеет еще одно объяснение. Несмотря на то, что каскадные таблицы стилей изначально разрабатывались для организации максимально полного управления внешним видом документов, стандарт CSS1 предоставил в распоряжение веб-разработчиков весьма скудные возможности. Спецификация CSS1 предусматривала всего лишь управление шрифтами, фонами, форматированием текста, а также размерами и отступами элементов – всем тем, что в большинстве своем уже было доступно веб-разработчикам благодаря визуально-ориентированным тэгам и атрибутам HTML. Все это в совокупности с некорректно реализованной поддержкой CSS в браузерах стало причиной возникновения табличной верстки – злоупотребления средствами HTML ради сопутствующих визуальных эффектов.
Тем не менее, даже в то смутное время многие веб-разработчики смогли по достоинству оценить одно из основных преимуществ каскадных таблиц стилей. Это преимущество заключалось в том, что все документы на веб-сайте могли ссылаться на один и тот же CSS-файл. Поскольку любые изменения отдельного стилевого файла отражались сразу на всех веб-страницах, использование CSS позволяло существенно упростить процесс редизайна интернет-ресурсов. Даже если учесть, что стилевые спецификации использовались в то время только для управления шрифтами, это было намного оптимальнее, нежели выделение необходимых элементов на каждой странице веб-сайта при помощи тэга <font>.
12 мая 1998 года была официально утверждена Спецификация CSS2. Новая версия каскадных таблиц стилей содержала много интересных и полезных нововведений. Прежде всего, новый стандарт предусматривал возможность свободного позиционирования любого элемента относительно окна браузера или элемента-родителя. При этом также предусматривалось «третье измерение», позволяющее накладывать элементы друг на друга в определенной последовательности. Другим важнейшим нововведением в CSS2 стала поддержка различных типов устройств (media types) с возможностью точно определить стилевые спецификации, которые должны применяться при выводе документа на конкретное устройство представления (компьютерный монитор, принтер, сотовый телефон, речевой браузер и т.п.)
Тем не менее, в 1998 году ни один разработчик не мог реально воспользоваться возможностями CSS2. Популярные в то время браузеры не поддерживали ни абсолютного позиционирования, ни какой-либо другой сложной визуализации документов средствами CSS. Так или иначе, на протяжении четырех с лишним лет роль CSS сводилась всего лишь к замене шрифтов.
Ситуация стала меняться только в начале нового тысячелетия, когда популярность браузера Netscape Navigator 4 заметно сократилась. В 2003 году Джеффри Зельдман написал авторитетное руководство «Web-дизайн по стандартам», содержащее недвусмысленные призывы к применению веб-стандартов на практике. Со временем это печатное издание стало своеобразным «Евангелием» для многих разработчиков. С другой стороны, благодаря стараниям WaSP, многие производители браузеров тоже осознали, что совместимость их продуктов со стандартами является жизненно необходимой для дальнейшего развития Всемирной паутины.
Конечно же, даже на сегодняшний день уровень поддержки CSS у разных браузеров весьма неоднозначен. Тем не менее, он является вполне достаточным для того, чтобы практически в полной мере задействовать весь потенциал каскадных таблиц стилей. Уже давно выработаны специальные приемы и инструкции, позволяющие обойти различные технические ограничения и добиться правильного отображения документов в тех браузерах, которые не совсем соответствуют стандартам. И все же до сих пор мне приходится слышать высказывания следующего характера:
С каждым днем убеждаюсь, что блочная верстка имеет свои недостатки...
Недостатки можно обнаружить в любой технологии. Другое дело, как эти недостатки соотносятся с преимуществами. В одной из предыдущих публикаций я уже отмечал, чем именно вызваны подобные заявления. Безусловно, многим веб-разработчикам с преимущественно визуальным мышлением не так просто поменять сложившиеся стереотипы и перестроиться на ортогональный стиль разметки. Тем не менее, искать сомнительные недостатки в новой технологии только лишь из-за того, что она кардинально отличается от старых и привычных табличных методов, по меньшей мере наивно и глупо. Равно как и опровергать преимущества разделения структуры и представления.
Синтаксис CSS
Каскадные таблицы стилей формально независимы от HTML, имеют свой собственный синтаксис и не наследуют никаких идеологических ограничений.
Таблица стилей представляет из себя набор правил, ассоциированных с документом и определяющих его отображение. Каждое правило в таблице стилей состоит из селектора и блока объявлений. Блок объявлений всегда отделяется от селектора пробелом и заключается в фигурные скобки.
Селектор определяет область применения стилевого правила, а блок объявлений содержит одно или несколько объявлений, которые отделяются друг от друга точкой с запятой.
Каждое объявление включает в себя свойство и соответствующее этому свойству значение. Любое свойство является обобщенным параметром оформления (размер шрифта, цвет фона, окружающие элемент поля и т.п.) и всегда отделяется от значения двоеточием. Набор допустимых значений для каждого конкретного свойства определяется индивидуально.
h2 {font-size: 1.4em; font-weight: normal;}
В приведенном выше примере свойству font-size присваивается значение 1.4em, а свойству font-weight – значение normal. Таким образом мы получаем два разных объявления, которые помещаются в обрамленный фигурными скобками блок объявлений. Поскольку блок объявлений соотносится с селектором h2, областью применения данного стилевого правила будут являться все элементы <h2>…</h2>.
Каскадные таблицы стилей позволяют использовать в качестве селекторов не только простые имена элементов, но и более сложные конструкции. Давайте рассмотрим основные типы селекторов, которые гарантированно поддерживаются всеми современными браузерами.
Универсальный селектор
Универсальный селектор обозначается символом «*» и сопоставляется любому элементу в HTML-документе.
* {margin: 0px; padding: 0px;}
Приведенный выше пример демонстрирует применение универсального селектора для обнуления заданных по умолчанию полей и отступов для всех HTML-элементов. В следующей публикации мы рассмотрим данное стилевое правило более подробно.
Имена элементов в качестве селекторов
Для определения информации о представлении HTML-элементов большинство стилевых правил используют в качестве селекторов имена этих элементов.
p {font-size: 1.2em; margin: 10px 20px;}
Селектор, содержащий имя элемента, сопоставляется каждому экземпляру данного элемента в HTML-документе. Таким образом, приведенное выше правило будет применяться ко всем элементам <p>…</p>.
Классы в качестве селекторов
Спецификация HTML 4.01 предусматривает для всех элементов специальный атрибут class, который позволяет особым образом отметить некоторые структурные элементы в документе.
<p class="special">...</p>
Значения атрибутов class могут состоять из букв и цифр (a–z, 0–9), но не должны начинаться с цифры. Атрибут class с одним и тем же значением может назначаться нескольким элементам в документе, а одному элементу может быть назначено несколько разных классов. В последнем случае значения атрибута class должны отделяться друг от друга пробелом:
<p class="special b3">...</p>
Для увеличения гибкости контроля над представлением документов каскадные таблицы стилей позволяют использовать в качестве селекторов значения атрибутов class. Названия классов в селекторах предваряются точкой и указываются после имен элементов:
p.special {padding-left: 20px;}
p.special.b3 {background: #FFFFCC;}
В приведенном примере первое стилевое правило будет применяться только к тем элементам <p>…</p>, которым назначен атрибут class со значением special, а областью применения второго правила будут являться элементы <p>…</p>, которым одновременно назначено два класса: special и b3. Необходимо отметить, что при сопоставлении селектора некоторому подмножеству классов, последовательность, в которой эти классы указываются, не имеет значения и может быть произвольной (как в HTML-разметке, так и в стилевых правилах).
Каскадные таблицы стилей также позволяют использовать в селекторах названия классов без указания имен элементов:
.und {text-decoration: underline;}
В таких случаях подразумевается, что в качестве имени элемента выступает универсальный селектор: конструкции *.und и .und эквивалентны. Как следствие, подобные стилевые правила будут применяться к любым элементам, которым назначен соответствующий класс.
Идентификаторы в качестве селекторов
Помимо классов, Спецификация HTML 4.01 предусматривает для всех элементов еще один специальный атрибут id, с помощью которого любому элементу можно назначить уникальный идентификатор.
<div id="header">...</div>
Значения атрибутов id, так же как и значения классов, могут состоять из букв и цифр (a–z, 0–9), но не должны начинаться с цифры. Главное отличие идентификаторов от классов заключается в том, что каждое значение атрибута id должно быть уникальным. Иначе говоря, в пределах одного документа не может быть двух элементов с одинаковыми значениями атрибута id, а каждому конкретному элементу может быть назначен только один уникальный идентификатор.
Сфера применения идентификаторов довольно широка. Они часто используются в качестве якорей назначения для гиперссылок, JavaScript-сценарии адресуются с помощью идентификаторов к конкретным HTML-элементам, а в CSS значения атрибутов id могут выступать в роли селекторов. Идентификаторы в селекторах указываются после имен элементов и предваряются символом «#»:
div#header {width: 1000px;}
Данное стилевое правило будет применяться к единственному экземпляру элемента <div>…</div>, которому назначен атрибут id со значением header. Если в селекторе используется идентификатор без указания конкретного элемента, подразумевается наличие универсального селектора (конструкции *#footer и #footer эквивалентны):
#footer {height: 120px;}
Такое стилевое правило будет применяться к единственному экземпляру любого элемента, которому назначен уникальный идентификатор footer.
Группировка селекторов
Если нескольким разным селекторам необходимо сопоставить одинаковые объявления, такие селекторы можно сгруппировать в разделенный запятыми список:
p, ul, ol {font-size: 1.2em; line-height: 1.5em;}
В приведенном примере для всех элементов <p>…</p>, <ul>…</ul> и <ol>…</ol> назначается одинаковый размер шрифта и межстрочный интервал. Синтаксис каскадных таблиц стилей позволяет легко группировать не только простейшие селекторы с именами элементов, но также и другие типы селекторов:
ul.menu, p.present {color: #DD0000;}
#header, #footer {margin: 0px 50px;}
В некоторых случаях подобная группировка позволяет значительно сократить размер CSS-файла.
Контекстные селекторы
Контекстный селектор – это селектор, который сопоставляется HTML-элементам на основе их позиции в структуре документа (контекста). Другими словами, контекстные селекторы позволяют применить стилевое правило к определенным элементам, которые являются потомками других элементов в документе.
Контекстный селектор состоит как минимум из двух простейших селекторов, разделенных пробелом. Например, контекстный селектор «p strong» состоит из двух простейших селекторов «p» и «strong».
p strong {color: #FF0000;}
В приведенном примере красный цвет шрифта будет применяться только к тем элементам <strong>…</strong>, которые будут находиться в пределах (внутри) элементов <p>…</p>:
<p>Здесь цвет текста будет <strong>красным</strong>.</p>
<address>А здесь он <strong>красным</strong> не будет.</address>
Давайте теперь рассмотрим более сложный пример.
div#sidebar ul a.active {font-weight: bold; color: #993300;}
В данном случае стилевое правило будет применяться только к тем элементам <a>…</a>, которым, во-первых, назначен атрибут class со значением active и которые (во-вторых) находятся внутри элемента ul, являющегося потомком элемента div с идентификатором sidebar:
<div id="sidebar">
<ul>
<li><a href="page1.htm">Проектирование веб-сайта</a></li>
<li><a href="page2.htm">Дизайн веб-сайта</a></li>
<li><a class="active">Верстка веб-страниц</a></li>
<li><a href="page4.htm">Динамические модули</a></li>
<li><a href="page5.htm">Информационное наполнение</a></li>
</ul>
</div>
На мой взгляд, контекстные селекторы являются одним из самых гениальных изобретений в CSS. Даже несмотря на то, что при их использовании размер CSS-файла может несколько увеличиваться, только с помощью контекста можно эффективно разграничить стилевые правила для разных логических блоков.
Псевдоэлементы
Поскольку стандартные селекторы таблиц стилей могут сопоставляться только с реальными HTML-элементами в документе, возникает ситуация, когда невозможно адресоваться к некоторой внутренней части какого-либо элемента. Иначе говоря, поскольку в HTML нет такого элемента, который бы указывал на первую букву или строку абзаца, обычные селекторы не могут сослаться на такую букву или строку. Для решения этой задачи каскадные таблицы стилей предусматривают два специальных псевдоэлемента, которые не присутствуют в исходной HTML-разметке, но, тем не менее, могут использоваться в селекторах CSS.
Псевдоэлемент :first-letter сопоставляется с первым символом текстового блока и может использоваться для создания буквицы, которая является распространенным типографским эффектом:
p {font-size: 1.2em;}
p:first-letter {font-size: 2.4em; font-weight: bold; float: left;}
Псевдоэлемент :first-line, как и псевдоэлемент :first-letter, расширяет механизм адресации в CSS и ссылается на первую строку текстового блока:
p {color: #CCCCCC;}
p:first-line {color: #CC0000;}
При использовании псевдоэлементов необходимо придерживаться следующих правил:
- Псевдоэлементы могут применяться только к блочным элементам.
- В одном селекторе может быть указан только один псевдоэлемент.
- Псевдоэлементы могут комбинироваться с классами, идентификаторами и контекстными селекторами, но только в том случае, если псевдоэлементы указываются в самом конце контекста.
Неправильное использование:
span:first-letter {font-size: 2.4em;}
p:first-letter:first-line {text-transform: uppercase;}
div#main p:first-letter span {color: #FF0000;}
Правильное использование:
p:first-letter {font-size: 2.4em;}
p:first-line {text-transform: uppercase;}
div#main ul.m3 li p:first-letter {color: #FF0000;}
Псевдоклассы
Псевдокласс представляет из себя элемент, находящийся в определенном состоянии. Любой элемент в документе может приобрести псевдокласс или лишиться его в зависимости от действий пользователя, который работает с документом. Как и псевдоэлементы, псевдоклассы не присутствуют в исходной HTML-разметке документа, но могут адресоваться из таблиц стилей.
Псевдоклассы ссылок
Небезызвестно, что все современные браузеры могут отображать посещенные и непосещенные пользователем ссылки по-разному. Для того, чтобы можно было применить к этим типам ссылок различные стилевые правила, в CSS предусматриваются специальные псевдоклассы :link и :visited.
a:link {color: #663300;}
a:visited {color: #CC9900;}
В приведенном выше примере первое стилевое правило будет применяться к непосещенным ссылкам в документе, а областью применения второго правила будут являться посещенные пользователем ссылки.
Псевдоклассы ссылок являются взаимоисключающими. Иначе говоря, эти псевдоклассы не могут одновременно применяться к одной и той же гиперссылке. В этом нет ничего удивительного, поскольку ни одна ссылка в документе не может быть посещенной и непосещенной одновременно.
Динамические псевдоклассы
Динамические псевдоклассы, как и псевдоклассы ссылок, назначаются элементам в зависимости от действий пользователя. При этом они не являются взаимоисключающими: многие элементы могут приобретать сразу несколько различных динамических псевдоклассов.
Псевдокласс :hover назначается элементу, когда пользователь наводит на этот элемент курсор мыши.
a:hover {color: #CC3300;}
li:hover {background: #00CC33;}
Обратите внимание, что данный псевдокласс может применяться не только к гиперссылкам, но также и к любым другим структурным элементам в документе.
Псевдокласс :active приобретается элементом, когда этот элемент активизируется пользователем. Например, в тот момент, когда пользователь нажимает кнопку мыши и до тех пор, пока он ее не отпустит. Как правило, это довольно-таки короткий промежуток времени.
a:active {color: #CC3300;}
Теоретически псевдокласс :active может применяться к любым элементам, но практической пользы от этого, как правило, немного.
Псевдокласс :focus применяется к элементу, когда этот элемент получает фокус от какого-нибудь указательного устройства (мышь, клавиатура и т.п.).
input:focus {background: #FFFFCC;}
Чаще всего этот динамический псевдокласс используется в стилевых правилах, которые описывают представление текстовых полей в интерактивных формах.
Хозяйке на заметку
Прежде всего необходимо отметить, что все псевдоклассы, как и псевдоэлементы, могут комбинироваться с простыми классами, идентификаторами и контекстными селекторами. Однако, в отличие от псевдоэлементов, псевдоклассы могут указываться в любом месте сложных селекторов (не обязательно в самом конце контекста):
ul#mainmenu li:hover ul {display: block;}
Другим важным аспектом псевдоклассов является правильная очередность селекторов (порядок следования стилевых правил).
a:link {color: #663300;}
a:visited {color: #CC9900;}
a:hover {color: #CC3300;}
a:active {color: #FF0000;}
Обратите внимание, что стилевое правило с псевдоклассом :hover располагается после стилевых правил с псевдоклассами :link и :visited, а правило с псевдоклассом :active следует после правила с псевдоклассом :hover. В противном случае стилевые правила с псевдоклассами :hover и :active не возымеют никакого эффекта в соответствии с правилами каскадирования (о них мы поговорим чуть позже).
Для того, чтобы можно было легко запомнить правильную последовательность стилевых правил с псевдоклассами, с давних пор используются два весьма популярных слова: LoVe/HАte (любовь/ненависть). Последовательность букв в этих словах в точности совпадает с правильной очередностью селекторов с псевдоклассами (Link, Visited, Hover, Active).
Помимо всего прочего, необходимо знать и помнить о том, что Internet Explorer шестой версии «понимает» динамические псевдоклассы :hover и :active только для гиперссылок, а с псевдоклассом :focus он не знаком в принципе. К счастью, это не самые страшные «болезни» этого браузера, поскольку от подобных недугов существует специальное лекарство.
Internet Explorer седьмой версии «понимает» динамический псевдокласс :hover для всех структурных элементов без каких-либо лекарственных препаратов, но с другими псевдоклассами (:active и :focus) в этой версии браузера все остается по прежнему. Более того, в данном случае никакое (даже слегка модифицированное) лекарство уже не помогает. Дело в том, что любая версия Internet Explorer изначально неправильно интерпретирует динамический псевдокласс :active. В этих браузерах «активные» гиперссылки ведут себя таким образом, как если бы им был назначен псевдокласс :focus.
В общем, приятного мало, но за надлежащую поддержку псевдокласса :hover индусам уже можно сказать спасибо.
Комментарии
Комментарии в CSS не влияют на интерпретацию таблиц стилей пользовательскими агентами и оформляются так же, как и в C++. Они начинаются с символов «/*» и заканчиваются символами «*/».
/* This is CSS comment */
Использование комментариев может сэкономить немало времени при поиске определенного стилевого правила в объемных CSS-файлах. Единственное, что я бы вам крайне не рекомендовал, – это комментарии на русском языке. В некоторых случаях использование кириллицы в CSS-комментариях может приводить к неправильной интерпретации таблиц стилей одним весьма популярным браузером.
Наследование
Как уже было отмечено выше, в CSS существует возможность применить стилевое правило к некоторому подмножеству элементов определенного типа. Для решения этой задачи используются селекторы, содержащие имена соответствующих элементов:
p {font-family: Verdana; color: navy;}
В данном случае для всех элементов <p>…</p> в документе будет назначена гарнитура шрифта Verdana темно-синего цвета.
Если необходимо, чтобы какой-то определенный абзац в документе отображался красным цветом, в HTML-разметке можно назначить этому абзацу какой-нибудь класс, а в стилевых спецификациях определить для этого класса соответствующее стилевое правило:
p {font-family: Verdana; color: navy;}
p.special {color: red;}
<p>Этот абзац будет отображаться темно-синим цветом.</p>
<p class="special">А этот абзац будет отображаться красным цветом.</p>
В приведенном примере первое стилевое правило задает для всех элементов <p>…</p> в документе темно-синий цвет, а второе стилевое правило переопределяет первое правило для элементов <p>…</p> с классом special.
Но обратите внимание: несмотря на то, что второе стилевое правило не описывает гарнитуру шрифта, абзац с классом special будет в любом случае отображаться с использованием гарнитуры Verdana (равно как и любые другие элементы <p>…</p> в документе). Это происходит благодаря наследованию значения свойства font-family, которое определяется в первом (глобальном) стилевом правиле для всех элементов <p>…</p>.
Еще одним фундаментальным принципом каскадных таблиц стилей является возможность наследования дочерними элементами некоторых свойств, которые назначаются их родительским элементам или даже более «древним» предкам. При этом совсем необязательно, чтобы предки и потомки были одного и того же типа:
ul {font-size: 1.1em;}
<ul>
<li><a href="#">Первый пункт списка.</a></li>
<li><a href="#">Второй пункт списка.</a></li>
</ul>
В данном случае элементы <a>…</a> являются потомками элемента <ul>…</ul> и будут наследовать заданный для элемента <ul>…</ul> размер шрифта.
Большинство свойств, описывающих шрифт и различные параметры форматирования текста, могут наследоваться дочерними элементами.
Правила каскадирования
Довольно часто мне приходится слышать следующий вопрос: «Почему таблицы стилей называются „каскадными“?» Слово «Cascading» в названии CSS подразумевает, что на представление каждого элемента в HTML-документе могут оказывать влияние сразу несколько разных таблиц стилей. Например, поверх стилевых спецификаций, примененных к какой-нибудь отдельной веб-странице, может действовать стилевой файл, общий для всех страниц веб-сайта. Подобная иерархическая система стилевых спецификаций является одной из основных характеристик CSS.
Естественно, что при таком положении вещей возникают вопросы о последовательности применения нескольких таблиц стилей к одному документу и разрешении возможных конфликтов между стилевыми правилами. Давайте рассмотрим один из наиболее важных аспектов каскадирования – специфичность селекторов.
Каскадные таблицы стилей предусматривают для стилевых правил определенный приоритет, который зависит от специфичности селектора каждого конкретного правила. Другими словами, чем больше специфичность селектора, тем более высокий приоритет имеет соответствующее стилевое правило. Если несколько стилевых правил имеют одинаковую область применения в совокупности с разными значениями одних и тех же свойств, конфликт будет разрешен в пользу правила с самым высоким приоритетом. При этом последовательность, в которой располагаются все стилевые правила в таблице стилей, на данном этапе не имеет никакого значения.
Примеры вычисления специфичности селекторов:
| Селектор | Количество идентификаторов в селекторе (A) |
Количество классов и псевдоклассов в селекторе (B) |
Количество имен элементов в селекторе (C) |
Специфичность |
|---|---|---|---|---|
| * | 0 | 0 | 0 | 0 |
| p | 0 | 0 | 1 | 1 |
| p span | 0 | 0 | 2 | 2 |
| div ul li | 0 | 0 | 3 | 3 |
| .star | 0 | 1 | 0 | 10 |
| h3.news | 0 | 1 | 1 | 11 |
| li:hover | 0 | 1 | 1 | 11 |
| ul li.active | 0 | 1 | 2 | 12 |
| p.special.b3 | 0 | 2 | 1 | 21 |
| div.block ul li a:hover | 0 | 2 | 4 | 24 |
| #content | 1 | 0 | 0 | 100 |
| div#sidebar | 1 | 0 | 1 | 101 |
| div#sidebar ul.caps | 1 | 1 | 2 | 112 |
| p#buttons span a.active | 1 | 1 | 3 | 113 |
| div#footer div#subfooter | 2 | 0 | 2 | 202 |
Обратите внимание, что специфичность селекторов рассчитывается не посредством сложения трех чисел (A, B, C), а путем обычного соединения этих чисел (конкатенации). Если внимательно проанализировать содержимое представленной таблицы, можно сделать некоторые индуктивные умозаключения:
- Стилевые правила, селекторы которых содержат идентификаторы, имеют более высокий приоритет, нежели чем правила, селекторы которых содержат названия классов.
- Стилевые правила, селекторы которых содержат названия классов, имеют более высокий приоритет, нежели чем правила, селекторы которых содержат только лишь имена элементов.
- Стилевые правила, селекторы которых содержат более специфичный контекст, имеют более высокий приоритет, нежели чем правила с менее специфичными контекстными селекторами.
Если возникает ситуация, когда несколько стилевых правил имеют одинаковую область применения и специфичность, в игру вступает еще одно правило каскадирования CSS, согласно которому последнее стилевое правило преобладает над всеми предыдущими. Иначе говоря, происходит сортировка стилевых правил в соответствии с порядком их следования в таблице стилей. В результате к элементу будет применено правило, которое описывается в таблице стилей последним.
Именно по этой причине следует размещать стилевое правило с псевдоклассом :hover после стилевых правил с псевдоклассами :link и :visited, а стилевое правило с псевдоклассом :active – после стилевого правила с псевдоклассом :hover.
Подведем итоги
Каскадные таблицы стилей являются уникальным инструментом, позволяющим достичь подлинной ортогональности аспектов содержания и представления. Благодаря их применению сокращается объем HTML-разметки, увеличивается скорость загрузки документов из Сети и улучшается индексация документов поисковыми системами.
В настоящее время стилевые спецификации постоянно дорабатываются. Об этом свидетельствует практически готовая к утверждению спецификация CSS2.1 и набор модулей CSS3, который уже частично поддерживается многими современными браузерами.
В следующий раз мы подготовим базовый стилевой файл, который будем использовать вместе с нашим базовым HTML-документом во всех последующих практических занятиях. Думаю, что это произойдет в самое ближайшее время.
Ссылка на комментарий 04.05.2008 16:15
Влад Стратулат
Молдова, Кишинев
http://www.vladstratulat.com/
Спасибо за статью.
Особенно выделил для себя последний блок "Правила каскадирования".
Ссылка на комментарий 05.05.2008 02:00
broker
Украина, Бердянск
http://www.berdyansk.name
Спасибо за возобновление публикаций, надеюсь в этом месяце будет еще парочка статей :)
Немного сложновато с правилами каскадирования, по больше б ссылок на доп.материал (печатные издания и он-лайн) желательно на русском языке.
Ссылка на комментарий 05.05.2008 02:58
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Самым лучшим дополнительным материалом по данной теме является Спецификация CSS2. Позвольте заметить, что перевод этого документа на русский язык доступен всем желающим в разделе файловый архив.
Помимо этого, если у Вас есть какие-то вопросы, Вы всегда можете задать их на проекте Арт-Форум.
Ссылка на комментарий 21.05.2008 13:24
DELPHIna
Россия, Великий Новгород
Константин очень хорошая статья...несмотря на то, что с css знакома давно всё равно откопала для себя нечто новенькое...да и ответы на многие вопросы получила. Пиши дальше, жду не дождусь практики :)!
У тебя определенно талант!
Ссылка на комментарий 28.06.2008 13:52
Anton Shevchuk
Украина, Харьков
http://anton.shevchuk.name
Спасибо за статью - но хотелось бы получать обновление сайта посредством RSS ;)