При написании 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>, входит в состав абзаца и наследует его свойства.