Классы стилей

Классы стилей

При написании HTML-документов довольно часто встречается необходимость каким-либо образом выделять блоки информации, подчеркивать их уникальность или логическую нагрузку. Например, в учебнике по математике кроме обычного описания материала могут присутствовать теоремы, задания, примеры и др. Стандартный HTML предоставляет нам теги логической разметки, например, тег <BLOCKQUOTE> предназначен для длинных цитат. CSS дает возможность самим придумывать логические конструкции и описывать их внешний вид.

Допустим, мы хотим создать страницу, на которой будет два вида абзацев (тег <P>), причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы - интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга.

Сначала выделим абзацы (вопросы журналиста и ответы интервьюируемого) с помощью селектора класса CLASS.

<HTML>
...
<BODY>
...
<P CLASS="ask">Вопрос журналиста</P>
<P CLASS="answer">Ответ интервьюируемого</P>
...
</BODY>
</HTML>

В разделе HEAD документа зададим стиль каждого класса.

P.ask{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12pt;
 text-align: justify;
 color: gray;
 margin-left: 100px;
 font-weight: bold;
}

P.answer{
 font-family: Times, serif;
 font-size: 14pt;
 color: black;
 text-align: justify;
 margin-left: 20px;
}

Вопросы журналиста будут отображаться шрифтом серии sans-serif серого цвета, полужирным начертанием, размером 12 пунктов, с отступом 100 пикселов от левого края страницы, с выравниванием по ширине. Ответы же будут отображены шрифтом Times, размером 14 пунктов черного цвета, с отступом 20 пикселов от левого края страницы, с выравниванием по ширине.

Вложенные элементы наследуют правила, заданные для родительских элементов. Так, например, если в абзац, содержащий вопрос журналиста, включить фрагмент текста, выделенный курсивным начертанием, то этот фрагмент при отображении браузером уже будет иметь выделение как курсивом, так и полужирным шрифтом. Это связано с тем, что текст, заключенный между тегами <I> и </I>, входит в состав абзаца и наследует его свойства.