Книга: HTML: Популярный самоучитель

Использование стилевых классов

Использование стилевых классов

Второй способ применения таблиц стилей основан на использовании стилевых классов. Рассмотрим это на примере:

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.

Оглавление книги


Генерация: 1.157. Запросов К БД/Cache: 3 / 1
поделиться
Вверх Вниз