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

Конструкция селектора

Конструкция селектора

Селекторы элементов

Селекторами могут быть любые элементы html, т. е. обычные теги.

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

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

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

В данном случае весь текст, заключенный в теги td, h1 и h2 будет отображен красным цветом размером 16 пикселей.

Селекторы классов

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

Присвоение класса тегу происходит с помощью атрибута class. Рассмотрим HTML-код:

Селекторы идентификаторов

ID-селекторы задаются аналогично классам, однако каждый ID может быть применен только к одному элементу. Т. е. в коде страницы может быть только один тег с данным ID. Главное отличие синтаксиса ID-селекторов от селкторов класса в том, что в ID для адресации используется знак #, а не точка.

HTML-код выглядит следующим образом:

Селекторы потомков (контекстные селекторы)

Можно написать стилевое определение, которое будет работать только при определенной комбинации вложенности тегов. Например, можно установить цвет I синим только для случая, если этот тег расположен внутри тега H3:

Наследование

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

Тогда содержимое тега I, помещенного внутрь заголовка, будет также выведено на экран зеленым цветом:

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

Каскадирование

Начальные сведения о каскаде были даны в разделе "Общие сведения о языке CSS".

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

Специфичность

Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.

Специфичность селектора разбивается на 4 группы — a, b, c, d:

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

Пример:

Селектор a, b, c, d Число
p 0, 0, 0, 1 1
p .mystyle 0, 0, 1, 1 11
p b 0, 0, 0, 2 2
#block 0, 1, 0, 0 100

Селектор, обладающий бОльшим значением специфичности, обладает бОльшим приоритетом. Если селекторы обладают одинаковой специфичностью, то более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже.

CSS-правила, которые прописаны во встроенной таблице стилей обладают наивысшим приоритетом. Однако существует способ переопределить из подключаемых CSS-файлов стили, заданные в атрибуте style. Для этого нужно использовать ключевое слово !important, которое задаёт CSS-свойству усиленный приоритет.

Например, в связанной таблице стилей (файле style.css) содержатся правила:

Код html-документа:

В css-файле правило, которое задает синий цвет текста абзаца, будет иметь приоритет над правилом, задающим зеленый цвет текста абзаца, т.к. оно располагается ниже, поэтому абзац 1 будет синего цвета.
В html-коде используется встроенный стиль, определяющий красный цвет заголовка, но поскольку к правилу в связанной таблице добавлено ключевое слово !important, то заголовок будет отформатирован желтым цветом.
В html-коде есть абзац с идентификатором paragraph. В связанной таблице стилей этот абзац выбирается двумя различными типами селекторов: селектором элемента, селектором идентификатора. Несмотря на то, что селектор элемента указан после идентификатора в каскаде, идентификатор имеет приоритет над селектором элемента, потому что он имеет большее значение специфичности, следовательно, абзац 2 будет серого цвета.

Задание

Задайте следующие параметры форматирования для текста главной страницы "Туристическая фирма":

Задайте следующие параметры форматирования для текста web-страниц по направлениям отдыха:

Рассчитайте значения специфичности для селекторов:

домой назад далее