Стилевые классы

На предыдущем уроке был рассмотрен стиль переопределения тега. Рассмотрим другой стиль

.warning {
	font-family: "Arial";
	font-size: 12px;	
	color: Red;
	font-style: italic
}

Принципиальное отличие данного примера заключается в том, что в качестве селектора используется "произвольное слово", не html-тег. Такая разновидность стиля CSS называется стилевым классом.

Стилевой класс не привязан к какому-либо конкретному тегу, он может быть использован в любом теге. Имя стилевого класса предваряется символом точки, за которой идет имя класса. Имя стилевого класса должно начинаться с буквы, и может содержать буквы латинского алфавита, цифры, дефис.

Для привязки стилевого класса к конкретному html-тегу служит атрибут CLASS, который поддерживается тегами, к которым может быть применен стиль. В качестве значения атрибута CLASS указывается имя стилевого класса без символа точки, которое заключается в кавычки.

<P CLASS="warning">Будьте внимательны!<P>

Абзац, к которому применен стилевой класс "warning", будет отображаться красным наклонным шрифтом Arial размером 12 пикселей.

В качестве атрибута CLASS допускается указывать одновременно несколько имен стилевых классов, при этом имена разделяются пробелом, а действие стилевых классов суммируется.

<P CLASS="style-1 style-2 style-3">...<P>

Именованный стиль

Именованный стиль, как и стилевой класс, явно привязывается к html-тегу, но имеет ряд отличий:

• определение именованного стиля начинается со знака #;
• привязка именованного стиля к тегу реализуется через атрибут ID;
• значение атрибута ID должно быть уникальным в пределах конкретной html-страницы. Поэтому, конкретный именованный стиль может быть применен только один раз в пределах конкретной html-страницы.

#warning {
	font-family: "Arial";
	font-size: 12px;	
	color: Red;
	font-style: italic
}

...
<P ID="warning">...<P>