Стилевые классы
На предыдущем уроке был рассмотрен стиль переопределения тега. Рассмотрим другой стиль
.warning {
font-family: "Arial";
font-size: 12px;
color: Red;
font-style: italic
}
Принципиальное отличие данного примера заключается в том, что в качестве селектора используется "произвольное слово", не html-тег. Такая разновидность стиля CSS называется стилевым классом.
Стилевой класс не привязан к какому-либо конкретному тегу, он может быть использован в любом теге. Имя стилевого класса предваряется символом точки, за которой идет имя класса. Имя стилевого класса должно начинаться с буквы, и может содержать буквы латинского алфавита, цифры, дефис.
Для привязки стилевого класса к конкретному html-тегу служит атрибут CLASS, который поддерживается тегами, к которым может быть применен стиль. В качестве значения атрибута CLASS указывается имя стилевого класса без символа точки, которое заключается в кавычки.
ПРИМЕР 1:
<P CLASS="warning">Будьте внимательны!<P> |
Абзац, к которому применен стилевой класс "warning", будет отображаться красным наклонным шрифтом Arial размером 12 пикселей.
В качестве атрибута CLASS допускается указывать одновременно несколько имен стилевых классов, при этом имена разделяются пробелом, а действие стилевых классов суммируется.
ПРИМЕР 2:
<P CLASS="style-1 style-2 style-3">...<P> |
Именованный стиль
Именованный стиль, как и стилевой класс, явно привязывается к html-тегу, но имеет ряд отличий:
- определение именованного стиля начинается со знака #;
- привязка именованного стиля к тегу реализуется через атрибут ID;
- значение атрибута ID должно быть уникальным в пределах конкретной html-страницы. Поэтому, конкретный именованный стиль может быть применен только один раз в пределах конкретной html-страницы.
ПРИМЕР 3:
#warning {
font-family: "Arial";
font-size: 12px;
color: Red;
font-style: italic
}
...
<P ID="warning">...<P>
|
