Почему "каскадные"?



Предыдущая | Следующая
Почему "каскадные"?
Но как Web-обозреватель разбирается со всем этим "зоопарком" стилей? Давайте выясним это. И заодно узнаем, почему таблицы стилей называются еще и каскадными.
Предположим, что у нас имеется вот такая внешняя таблица стилей:
Р { font-size: 10pt; } HI { font-size: 20pt;
text-align: center; } .copyright { font-style: italic; }
Атрибут font-style задает начертание шрифта, а его значение italic делает шрифт курсивным без использования тега <ем>. А атрибут text-align задает выравнивание текстового абзаца, в нашем случае — по центру (значение center).
Сохраним созданную таблицу стилей в файле под именем 2. Less. И создадим небольшую Web-страницу с таким HTML-кодом:
<HTML> <HEAD>
<Т1ТЪЕ>Эксперименты со стилями</Т1ТЬЕ>
<LINK REL="stylesheet" HREF="2.1.ess" TYPE="text/ess">
<STYLE>
HI { font-size: 14pt;
color: red; } </STYLE> </HEAD> <BODY>
<Н1>Стили</Н1>
<Р>Давайте немного поэкспериментируем со стилями.</Р>
<Р CLASS="copyright">
Авторские <SPAN STYLE="font-style: normalM>npaBa</SPAN>
принадлежат нам. </Р> </BODY> </HTML>
Все это нам уже знакомо. Единственное — значение normal атрибута стиля font-style убирает у шрифта курсивное начертание.
Итак, самым первым делом Web-обозреватель загружает внешнюю таблицу стилей 2.1.css, подключенную к Web-странице с помощью тега <link>. Таким образом, стили переопределения тегов <р> и <hi> и стилевой класс copyright будут применены к Web-странице сразу же.
Далее Web-обозреватель считывает внутреннюю таблицу стилей и выясняет, что в ней также содержится стиль переопределения тега <Н1>. То есть возникает конфликт стилей и вступает в силу правило каскадное™, разрешающее его. И разрешающее столь изящно, что нельзя не восторгаться. (Вот если бы так решались все конфликты на свете!..)
К определению стиля, сделанному во внешней таблице, Web-обозреватель добавляет определение, сделанное во внутренней таблице. А если определение затрагивает один и тот же атрибут (в нашем случае — font-size, задающий размер шрифта), берется определение, сделанное во внутренней таблице. Правило "своя рубашка ближе к телу" работает и в случае таблиц стилей.
Результирующий стиль тега <Н1>, сформированный Web-обозревателем для "внутреннего потребления", будет иметь такой вид:
HI { font-size: 14pt;
text-align: center; color: red }
Если мы присмотримся к коду Web-страницы и таблицы стилей, то заметим еще один конфликт стилей. Разрешается он таким же образом, как и предыдущий.
Сначала Web-обозреватель берет определение стиля р (переопределение одноименного тега) и добавляет к нему определение стилевого класса copyright.
При этом атрибуты, определенные в стилевом классе, имеют приоритет перед определенными в стиле переопределения тега. Здесь действует еще одно правило, которое стоит запомнить: "более частные определения имеют приоритет перед более общими". А стилевые классы — как раз более частные, так как могут быть привязаны к любому тегу.
Далее полученный стиль привязывается к тегу <р> с атрибутом class, равным copyright, и содержимое этого тега будет набрано курсивным шрифтом размером 10 пунктов. Но в содержимом этого тега мы видим вложенный тег <span>, для которого был задан встроенный стиль, убирающий курсивное начертание. Поскольку встроенный стиль — еще более частный, чем даже стилевой класс, то его определения имеют наивысший приоритет. И слово "права" (содержимое тега <span>) будет уже набрано обычным шрифтом — не курсивом.
Все это может показаться сложным. И действительно, для начинающего (да и зачастую для опытного) Web-дизайнера каскадность — бич божий. Но, разобравшись в правилах разрешения конфликтов стилей, можно сократить свои таблицы стилей до минимума. Так, чтобы изменить оформление какого-либо элемента одной из Web-страниц, достаточно будет переопределить только нужные атрибуты стиля во внутренней таблице или встроенном стиле. Разумеется, это намного проще и быстрее, чем писать отдельную таблицу стилей специально для этой страницы.
Мы еще вернемся к таблицам стилей в дальнейшем, когда начнем-таки создавать свой сайт. А сейчас давайте вернемся к уже знакомому HTML и совершим путешествие в историю этого языка.

 

Содержание Книга по php и mysql