На рис. 10.1 приведено подтверждение сказанных выше слов о том, как браузер покажет текст документа с рассмотренной таблицей стилей.

Рис. 10.1. Задание стилей для HTML-элементов

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

Здесь созданные в таблице стилей селекторы указывают на четыре стилевых класса с именами 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).

Страница, формируемая браузером Internet Explorer при обработке приведенного примера, показана на рис. 10.2.

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

Как можно увидеть, для использования стилевых классов нужно немного больше поработать над содержимым HTML‑документа, назначая нужным элементам значения атрибутов class. При этом доступно гораздо больше возможностей по оформлению документа: например, может быть недостаточно одного и того же цвета абзацев, одинакового выравнивания или шрифта текста. Есть еще множество случаев, когда удобнее создать некоторое количество стилевых классов, а не задавать CSS‑свойства одинаковых HTML‑элементов, как это сделано в примере 10.1.