Запись шаблона CSS

Группировка и наследование

Любое правило таблицы стилей CSS состоит из селектора и определения шаблона.

Селектор выступает в роли указателя стилевого правила для определенного HTML-элемента или внутреннего класса (идентификатора). Определение шаблона -- это описание стилевых правил для обозначенных элементов HTML. Правила чередуются через точку с запятой и заключаются в фигурные скобки.

НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }

В данном примере селектором является элемент заголовка нз, для шаблона которого следует такое определение: цвет -- синий, шрифт -- Tahoma, либо Verdana, либо Arial.

Как видно из примера, для одного селектора приведено описание, содержащее два правила -- по цвету заголовка и наименованию гарнитуры. Это говорит о том, что CSS позволяет группировать несколько стилевых правил для одного селектора в рамках единого описания шаблона.

Сравнив запись вида:

НЗ { color: blue; }

НЗ { font-family: Tahoma, Verdana, Arial; }

И

НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }

можно сделать вывод о том, что группировка правил по селектору позволяет, во-первых, экономить размер CSS-файла, во-вторых -- систематизировать структуру описания шаблона.

Другой особенностью таблиц стилей CSS является свойство наследования стилевых правил для нескольких селекторов одновременно, например:

TD, ТН, Р, DIV { text-align: justify; color: gray: font-size: Юрх; }

Такая запись назначает единый стиль отображения текстовой информации для элементов ячейки таблицы (<то>, <тн>), а также параграфов (<р>) и блоков (<div>), а именно: тивыравнивания -- по ширине, цвет -- серый, размер шрифта -- 10 пикселов.

Селекторы

В качестве селектора CSS могут выступать:

О элементы HTML. Переопределение стиля для конкретного элемента страницы:

BODY { color: orange; }

В этом случае весь текст в пределах раздела body будет оранжевым. При добавлении, например, таблицы назначение стилевого шаблона пропадет для текста внутри ячеек;

классы. Использование классов позволяет переопределять стиль как для конкретного элемента, так и для любого элемента, которому присвоен данный класс. Наименование класса начинается с точки и обычно пишется строчными буквами (допускается использование латинских букв и цифр, но наличие специальных символов, нижних подчеркиваний и прочих нестандартных элементов не рекомендуется).

.red { color: red; }

В этом случае любой элемент HTML, позволяющий менять цвет, будет отображаться красным, если ему присвоить класс . red:

<FONT CLASS="red">TeKCT красным цветом</ГОЫТ>

ИЛИ

<HR CLASS="red">

Если мы дополним селектор класса наименованием конкретного HTML-элемента, то действие стилевого правила будет распространяться только на данный элемент:

HR.red { color: red; }

При указании классов стилевого шаблона следует внимательно следить за тем, поддерживает ли HTML-элемент присваемый типереопределения стиля. Например, запись вида:

HR { text-align: justify; }

будет бессмысленной, т. к. горизонтальный разделитель относится к области структурного форматирования и не может содержать текст, который, согласно стилевому правилу, следует растянуть по ширине;

идентификаторы. Запись идентификатора начинается с символа # (диез) и заканчивается наименованием:

fblack { background-color: black; }

Например, присвоив данный идентификатор тегу то, мы получим ячейку таблицы, залитую черным цветом:

<TD 1П="Ыас1<">Ячейка черного цвета</ТО>

Сравнив функции селектора класса и идентификатора, можно задаться вполне закономерным вопросом -- чем же отличаются эти селекторы? Действительно, формат определения селектора обоих типов аналогичен по структуре и присвоению HTML-элементам. Однако селектор идентификатора часто применяется для задания уникального имени элементу, который задействован в программном сценарии (скрипте). В отличие от него, селектор класса ограничивается, в основном, применением в стилевых шаблонах.

В заключение необходимо обратить особое внимание на невозможность сочетания селекторов различных типов. Нельзя одновременно переопределить стиль для стандартного элемента HTML и для него же, но по конкретному классу/идентификатору.

 
< Пред   СОДЕРЖАНИЕ   Скачать   След >