дХОКНЛМШЕ ПЮАНРШ, ЙСПЯНБШЕ ОПНЕЙРШ МЮ ГЮЙЮГ, ЙНМРПНКЭМШЕ ПЮАНРШ МЮ ГЮЙЮГ

 

мЮВЕПРЮРЕКЭМЮЪ ЦЕНЛЕРПХЪ оПЮЙРХЙСЛ ОН ПЕЬЕМХЧ ГЮДЮВ цЕНЛЕРПХВЕЯЙНЕ ВЕПВЕМХЕ хМФЕМЕПМЮЪ ЦПЮТХЙЮ еяйд йПЮРМШЕ ХМРЕЦПЮКШ лЮРЕЛЮРХВЕЯЙХИ ЮМЮКХГ лЮРПХЖШ оПЕДЕКШ оПНХГБНДМШЕ бЕЙРНПМЮЪ ЮКЦЕАПЮ хМРЕЦПЮКЭМНЕ ХЯВХЯКЕМХЕ ртйо ъДЕПМЮЪ ТХГХЙЮ щКЕЙРПНЯРЮРХЙЮ лЮЦМЕРХГЛ нОРХЙЮ хМТНПЛЮЖХНММШЕ РЕУМНКНЦХХ

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

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

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