Применение нескольких правил каскадных списков стилей к одному селектору
Правила каскадных списков стилей позволяют легко форматировать текст Web-страниц сайта. С помощью списков стилей можно без труда изменить стиль любого HTML-дескриптора путем изменения одного правила списков стилей. Тем не менее, иногда требуется форматирование одного конкретного элемента Web-страницы (например, текста абзаца), которое отличается от форматирования такого же элемента в другой части страницы. Если для одного и того же селектора (в данном случае селектора р) создать несколько правил, Web-браузер будет форматировать элемент в соответствии с последним правилом списка стилей. Например, второе правило в приведенном ниже наборе правил заменяет действие первого правила:
<style type="text/css">
р {color:red; font-size:18pt}
p {color:black; font-size:12pt}
</style>
Как результат, текст всех абзацев будет выводиться шрифтом черного цвета размером 12 пунктов.
Для применения к одному элементу Web-страницы нескольких правил списков стилей необходимо для каждого правила определить класс с уникальным именем. После определения класса его форматирование можно применить к элементу за счет указания в HTML-дескрипторе элемента атрибута class:
<p class=Тип-Bamero-CSS-Класса">
ПРАКТИКУМ
Предположим, например, что необходимо создать класс для представления важного текста и еще один класс — для обычного текста. Для создания двух классов правил каскадного списка стилей, правила должны вводиться следующим образом:
<head>
<title>Примеры CSS-классов</title>
<style type="text/css">
<!--
p.critical {color:red; font-size:18pt; font-weight:bold} p.regular {color:black; font-size:12pt}
-->
</style>
</head>
Класс правил каскадного списка стилей может иметь произвольное имя. Тем не менее, между селектором (для HTML-дескриптора) и именем класса в описании правил всегда должна находиться точка (.).
После считывания приведенного выше описания стилей Web-браузер будет иметь в своем распоряжении два класса стилей для текста абзаца: p. critical и p.regular. Стиль p.critical будет присваивать абзацу полужирный шрифт красного цвета размером 18 пунктов, а стиль p.regular — шрифт черного цвета размером 12 пунктов. Следующий код служит примером использования классов каскадных списков стилей для форматирования текста абзацев на Web-странице:
<html>
<head>
<title>Пример использование селекторов класса</title>
<style type="text/css">
<!--
p.critical {color:red; font-size:18pt; font-weight:bold} p.normal {color:black; font-size:12pt}
-->
</style>
</head>
<body>
<p class="critical">Текст, выводимый шрифтом красного цвета, размером 18 пунктов, полужирным начертанием</p>
<p class="normal">Текст, выводимый шрифтом черного цвета, размером 12 пунктов</p>
</body>
</html>
Для элементов, параметры форматирования которых не определены в списке стилей, Web-браузер будет использовать форматирование по умолчанию. Например, поскольку правила списка стилей в приведенном выше коде не устанавливают тип шрифта, скажем, Arial или Helvetica, браузер будет использовать тип шрифта по умолчанию. На рис. 4.6 показано, каким образом Web-страница, описываемая приведенным выше HTML-кодом, будет выглядеть в Web-браузере.
Чтобы описания классов каскадных списков стилей были более гибкими, уберите из описаний селекторы. Например, как определено в списке стилей, внедренном в заголовок предыдущей Web-страницы, классы правил для важного ("critical") и обычного ("normal") текста доступны только для дескрипторов <p>. Поскольку для обоих классов в правилах указан селектор абзаца (р), правила класса "важного" текста нельзя применить, например, для заголовка, как показано в следующей строке кода:
<hl class="critical">Это критический заголовок</hl>
При условии, что классы правил списка стилей определены таким же образом, как для Web-страницы, показанной на рис. 4.6, браузер выведет на экран заголовок уровня 1 стилем по умолчанию, поскольку для заголовков уровня 1 класс "critical" не определен.
Рис. 4.6. Селекторы класса позволяют быстро изменить форматирование текста в браузере
Тем не менее, если в описании класса опустить селектор, как показано приведенном ниже примере кода, имя класса может использоваться для форматирования любого дескриптора Web-страницы:
<head>
<title>Пример использование несвязанных селекторов класса</title>
<style type="text/css">
.critical {color:red; font-size:18pt; font-weight:bold}
.normal {color:black; font-size:12pt}
</style>
</head>
Обратите внимание, что "несвязанное" имя класса в его определении начинается с точки (.) и не содержит селектора для HTML-дескриптора. Теперь приведенные ниже строки кода приведут к тому, что на экран будут выведены первый заголовок уровня 1 шрифтом красного цвета размером 18 пунктов и второй заголовок шрифтом черного цвета размером 12 пунктов:
<hl class="critical">Это критический заголовок уровня 1</hl>
<hl class="normal">Это нормальный заголовок уровня 1</hl>
Таким образом, при определении класса каскадного списка стилей без селектора, его можно будет использовать для форматирования любого элемента Web- страницы. Если же класс будет определен с селектором, его форматирование можно будет применить только к указанному в определении типу HTML-дескриптора.