йНМЯОЕЙР ОН МЮВЕПРЮРЕКЭМНИ ЦЕНЛЕРПХХ хМФЕМЕПМЮЪ ЦПЮТХЙЮ юПУХРЕЙРСПЮ щбл хМТНПЛЮРХЙЮ Х ХМТНПЛЮЖХНММШЕ РЕУМНКНЦХХ

Предыдущий разделУровень вышеСледующий раздел

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

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

мЮВЕПРЮРЕКЭМЮЪ ЦЕНЛЕРПХЪ Х ХМФЕМЕПМЮЪ ЦПЮТХЙЮ, ОЕПЯОЕЙРХБЮ