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

1. Обычный.

Селектор {определение}

Определение состоит из двух частей: свойства и его значения, разделенных двоеточием. Назначение свойства видно из его названия.

2. Классовые селекторы.

селектор.класс {определение}

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

Классы также могут быть описаны без явного привязывания к определенным элементам.

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

3. ID-селекторы.

#ID {определение}

ID – индивидуально именованный стиль. С его помощью можно создавать стилистические исключения среди элементов одного класса. Идентификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств.

4. Контекстные селекторы.

селектор селектор {определение}

Контекстные селекторы – это сочетания нескольких обыкновенных селекторов. Стиль задается только элементом в заданной последовательности в зависимости от каскадного порядка.

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

H1, H2, H3 {color:green}

12. Псевдоклассы и псевдоэлементы

Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы, а также они могут генерировать содержимое, которого нет в исходном html коде. Таким фрагментом может быть первый символ или первая строка в абзаце.

Псевдоэлементы используются не сами по себе, а только в совокупности с основными селекторами:

<основной селектор>:<псевдоэлемент> { <стиль> }

Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.

Далее рассмотрим некоторые псевдоэлементы и их свойства.

:first-letter

Привязывает стиль к первой букве текста в элементе web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение. Это позволяет создавать в тексте буквицу(увеличенная первая буква, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) и выступающий инициал (увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста).

:first-line

Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе веб страницы.

:after и :before

Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content, которое определяет содержимое для вставки.

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

Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них.

Псевдоклассы условно делятся на три группы:

• определяющие состояние элементов;

• имеющие отношение к дереву элементов;

• указывающие язык текста.

Псевдоклассы этой группы определяют состояние элемента html страницы и применяют стиль только для определенного состояния. Обычно псевдоклассы состояний применяются для гиперссылок, но иногда их применяют и для других элементов веб страницы.

Псевдокласс :link применяется для не посещенных ссылок, т.е. ссылкам, на которые пользователь еще не нажимал. Записи a{...} и a:link{...} в таблице стилей дают одинаковый результат, поэтому псевдокласс :link можно не указывать.

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

Псевдокласс :active применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.

Псевдокласс :focus применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.

И последний псевдокласс :hover применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.

Псевдоклассы тега <A> регламентируют правила для отображения связей:

link – непосещенная связь

visited – посещенная связь

active – активная связь

hover – связь, на которой расположен курсор мыши.

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

13. Способы применения таблиц стилей в документе.