Описание правил стилей

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

селектор

<

свойство1: значение; свойство2: значение; свойство3: значение;

}.

Селектор определяет способ отбора HTML-элементов, к которым будет применяться данное правило. Например, он может соответствовать реальным названиям элементов (например, body) или задавать элементы, имеющие некоторое значение атрибутов class либо id.

В фигурных скобках {} записываются пары «свойство: значение», которые указывают, какие значения будут задаваться свойствам отобранных элементов. Свойства определяют, что требуется сделать с выделенными элементами. Они могут задавать, например, цвет элемента, цвет фона, позицию, поля, заполнение, тип шрифта и многое другое.

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

Все множество подобных правил совместно формирует таблицу стилей.

Описание значений свойств

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

Например, следующее правило р { margin: 10рх; font-family: Times New Roman; color: green;}.

указывает, что вокруг параграфов документа (селектор) создаются поля (margin) размером в 10 пикселей, для вывода текста используется шрифт (font-family) Times New Roman, а цвет текста параграфа (color) является зеленым (green).

Цвета в CSS могут задавать разными способами: в виде названия цвета (всего имеется 16 таких цвет ов, например, gray, green, black); в виде rgb-кода (например. RGB (255,255,0) — желтый цвет) или в виде шестнадцатеричного кода (например. #а52а2а — коричневый цвет).

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