2015-03-07
409
Второй способ применения таблиц стилей основан на использовании стилевых классов. Рассмотрим это на примере:
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
P.italic {font-style: italic}
.bold {font-weight: bold}
Здесь созданные в таблице стилей селекторы указывают на четыре стилевых класса с именами arial, newroman, italic, bold. Перые три правила могут использоваться только для HTML элементов H1, H2 и P, для которых заданы стилевые классы arial, newroman и italic соответственно. Четвертый селектор позволяет применить правило к любому элементу, стилевой класс которого указан как bold.
Назначение стилевого класса HTML элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.
Рассмотрим пример использования стилевых классов (пример 10.2).
Пример 10.2. Использование стилевых классов
<HTML>
<HEAD>
<TITLE>Использование стилевых классов</TITLE>
<!– Определение таблицы стилей–>
<STYLE type = "text/css">
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
|
|
|
P.italic {font-style: italic}
.bold {font-weight: bold}
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
<P>Текст абзаца
<H1 class = "arial">Измененный заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<P class = "italic">Курсивный текст абзаца
<H2 class = "newroman">Измененный заголовок второго уровня</H2>
<P class = "bold">Полужирный текст абзаца
</BODY>
</HTML>
Страница, формируемая браузером Internet Explorer при обработке приведенного примера, показана на рис. 10.2.
Рис. 10.2. Использование стилевых классов
Как можно увидеть, для использования стилевых классов нужно немного больше поработать над содержимым HTML документа, назначая нужным элементам значения атрибутов class. При этом доступно гораздо больше возможностей по оформлению документа: например, может быть недостаточно одного и того же цвета абзацев, одинакового выравнивания или шрифта текста. Есть еще множество случаев, когда удобнее создать некоторое количество стилевых классов, а не задавать CSS свойства одинаковых HTML элементов, как это сделано в примере 10.1.
