3 Правила построения css

В первых трёх случаях подключения таблицы CSS к документу (см. выше) каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

селектор, селектор {

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

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

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

}

В четвёртом случае подключения таблицы CSS к документу правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».

4 Виды селекторов

Селектор - это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.

Простой селектор представляет собой селектор типа, селектор класса либо id-селектор, за которым могут следовать селекторы псевдоклассов и селекторы атрибутов (о последних в данном кратком описании умолчим).

Селектор - это последовательность простых селекторов, разделенных пробелами либо символами ">" и "+" . Указанные разделители имеют следующий смысл.

• Пробел в последовательности селекторов соответствует понятию "селектор потомков".

• Символ ">" в последовательности селекторов соответствует понятию "дочерний селектор".

• Символ "+" в последовательности селекторов соответствует понятию "сестринский селектор".

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

h1 { color: navy; }

h2 { color: navy; }

h3 { color: navy; }

равносильна

h1, h2, h3 { color: navy; }

Селекторы потомков.

Можно применять к HTML-элементу определенный стиль в зависимости от того, вложен ли этот элемент в другой (то есть, является ли его потомком). Для этого названия элементов перечисляются в порядке их предполагаемой вложенности и разделяются пробелами. В следующем примере описывается селектор, согласно которому заголовки 1-го уровня (элемент h1) будут выведены красным цветом только внутри ячеек таблиц (td). Причем, внутри ВСЕХ ячеек ВСЕХ таблиц (даже если есть вложенные таблицы).

td h1 { color: red; }

Дочерние селекторы.

В ряде случаев нас интересуют не все "потомки" некоего структурного элемента, но лишь непосредственные - не "внуки" или "правнуки", а только "дети" (child). Для указания того, что правило стиля относится только к непосредственному потомку, в селекторе используется символ ">". В следующем примере приведен селектор, согласно которому в ячейке (td) nтаблицы (table) некоего класса "special" заголовок 1-го уровня (h1) будет выведен красным цветом. Заметьте, что если в ячейке есть вложенная таблица, к заголовкам в ее ячейках это описание уже не относится.

table.special td>h1 { color: red; }