Мы рассмотрели пять разновидностей стилей CSS. Четыре из них — стилевые классы, стили переопределения тега, именованные и комбинированные стили — могут присутствовать только в таблицах стилей.
Таблицы стилей, в зависимости от места их хранения, разделяются на два вида.
Внешние таблицы стилей хранятся отдельно от Web-страниц, в файлах с расширением css. Они содержат CSS-код определений стилей.
Листинг 8.4 иллюстрирует пример внешней таблицы стилей.
Листинг 8.4
.redtext { color=#FF0000;
#bigtext { font-size: large }
em { color=00FF00;
font-weidht: bold }
p em { color=#0000FF }
Как видим, здесь определены четыре стиля. В принципе, все нам знакомо.
Если внешняя таблица стилей хранится отдельно от Web-страницы, значит, нужно как-то привязать ее к Web-странице. Для этого предназначен одинарный метатег <link>, который помещается в секцию заголовка соответствующей Web-страницы. (О метатегах и секциях Web-страниц уже говорилось) Вот формат его написания:
Интернет-адрес файла таблицы стилей записывают в качестве значения атрибута href этого тега.
Остальные атрибуты тега <link> для нас несущественны. Атрибут rel указывает, чем является файл, на который ссылается тег <link>, для текущей Web-страницы; его значение "stylesheet" говорит, что этот файл — внешняя таблица стилей. А атрибут type указывает тип mime файла, на который ссылается данный тег; внешняя таблица стилей имеет тип mime text/css.
В примере из листинга 8.5 мы привязали внешнюю таблицу стилей, хранящуюся в файле main.css, к текущей Web-странице.
Преимущество внешних таблиц стилей в том, что их можно привязать сразу к нескольким Web-страницам. Недостаток всего один, да и тот несущественный, — внешняя таблица стилей хранится в отдельном файле, так что есть вероятность его "потерять".
Внутренняя таблица стилей (листинг 8.6) записывается прямо в HTML-код Web-страницы. Ее заключают в парный тег <style> и помещают в секцию заголовка. В остальном она не отличается от ее внешней "коллеги".
Листинг 8.6
<head>
. . . .
<style>
.redtext { color: #FF0000 }
#bigtext {font-size: large }
em { color: 00FF00;
font-weight: bold }
p em { color: #0000FF }
</style>
. . . .
</head>
Преимущество внутренней таблицы стилей в том, что она является неотъемлемой частью Web-страницы и, стало быть, никогда не "потеряется". Недостатков два. Во-первых, стили, определенные во внутренней таблице стилей, применяются только к той Web-странице, в которой эта таблица стилей находится. Во-вторых, внутренняя таблица стилей не соответствует концепции Web 2.0, требующей отделять содержимое Web-страницы от ее представления.
В одной и той же Web-странице могут присутствовать сразу несколько таблиц стилей: несколько внешних и внутренняя (листинг 8.7).
В таком случае действие всех этих таблиц стилей складывается. А по каким правилам — мы сейчас выясним.
Правила каскадности и приоритет стилей
На один и тот же элемент Web-страницы могут действовать сразу несколько стилей. Это могут быть стили разных видов (стиль переопределения тега, стилевой класс, комбинированный стиль, встроенный стиль) или определенные в разных таблицах стилей (внешних и внутренней). Такое встречается сплошь и рядом, особенно на Web-страницах со сложным оформлением.
Но как Web-обозреватель определяет, какой именно стиль применить к тому или иному элементу Web-страницы? Мы уже знаем, что в таких случаях действие стилей как бы складывается. Но по каким правилам? Предположим, что мы создали внешнюю таблицу стилей (листинг 8.8).
Листинг 8.8
.regtext { color #FF0000 }
#bigtext { font-size: large }
em { color: #00FF00;
font-wieght: bold }
После этого мы изготовили Web-страницу, содержащую внутреннюю таблицу стилей (листинг 8.9).
Листинг 8.9
<style>
.regtext { color #0000FF }
em { font-size: smaller }
</style>
А в самой Web-странице написали вот такой фрагмент HTML-кода:
<p>Это красный текст.</p>
<p id="bigtext" style="color: #FFFF00">Это большой текст.</p>
<p><em>Это курсив.</em></p>
Хорошо видно, что на элементы этой Web-страницы действуют сразу по нескольку стилей. Так, во второй строке кода к тегу <p> привязаны и именованный стиль bigtext, и встроенный стиль. Но этого мало — и внешняя, и внутренняя таблицы стилей содержат определение двух одинаковых стилей — стилевого класса redtext и стиля переопределения тега <em>!
Так что же мы получим в результате?
Рассмотрим сначала последнюю строку приведенного HTML-кода с тегом <em>. Сначала Web-обозреватель загрузит, обработает и сохранит в памяти внешнюю таблицу стилей. Затем он обработает внутреннюю таблицу стилей и добавит все содержащиеся в ней определения стилей к уже хранящимся во внешней таблице стилей. Это значит, что стили переопределения тега <em>, заданные в разных таблицах стилей, будут сложены, и результирующий стиль, написанный на языке CSS, станет таким:
EM { color: #00FF00;
font-size: smaller;
font-weight: bold }
Именно его и применит Web-обозреватель ко всем тегам <em>, что присутствуют на Web-странице.
Вторая строка HTML-кода, что содержит тег со встроенным стилем, будет обработана так же. Web-обозреватель добавит к считанному из внешней таблицы стилей определению именованного стиля bigtext определение встроенного стиля. Результирующий стиль, если записать его на языке CSS, будет таким:
#bigtext { color: $FFFF00;
font-size: large }
И, наконец, самая трудная задача — первая строка HTML-кода. Поскольку оба определения стилевого класса redtext задают один и тот же параметр — цвет текста (атрибут стиля color) — Web-обозреватель поступит так. Он отменит значение этого атрибута, заданное в стиле из внешней таблицы стилей, и заменит его тем, что задано в стиле из внутренней таблицы стилей. Поскольку, с его точки зрения и с точки зрения стандартов CSS, внутренняя таблица стилей — это та рубашка, что "ближе к телу". И тогда результирующий стиль будет таким:
.redtext { color: #0000FF }
Здесь мы столкнулись с тем, что стили разных видов и заданные в разных таблицах стилей имеют разный приоритет. Web-обозреватель руководствуется этим приоритетом, когда формирует в своей памяти окончательные определения стилей.
Теперь познакомимся с правилами, описывающими поведение Web-обозревателя при формировании окончательных стилей. Их еще называют правилами каскадности.
Внешняя таблица стилей, ссылка на которую (тег ) встречается в HTML-коде страницы позже, имеет приоритет перед той, ссылка на которую встретилась раньше.
Внутренняя таблица стилей имеет приоритет перед внешними.
Встроенные стили имеют приоритет перед любыми стилями, заданными в таблицах стилей.
Более конкретные стили имеют приоритет перед менее конкретными. Это зна-чит, например, что стилевой класс имеет приоритет перед стилем переопределения тега, поскольку стилевой класс привязывается к конкретным тегам. Точно так же комбинированный стиль имеет приоритет перед стилевым классом.
Если к тегу привязаны несколько стилевых классов, то те, что указаны правее, имеют приоритет перед указанными левее.
