Псевдоклассы, определяющие состояние элементов

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

active

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

link

Применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал.

focus

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

Конец формы

hover

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

visited

Данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно.

5. Правила создания стиля

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

1. Пишите все правила для каждого селектора в одном месте

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

TD { background: olive; }

TD { color: white; }

TD { border: 1px solid black; }

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

TD {

background: olive;

color: white;

border: 1px solid black;

}

2. Более высокий приоритет имеет значение, указанное в коде ниже

Если для селектора вначале задается параметр с одним значением, а затем тот же параметр, но уже с другим значением, то применяться будет значение, которое в коде установлено ниже

P { color: green; }

P { color: red; }

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

3. Описание стилей начинайте с селекторов верхнего уровня

Учитывая, что многие стилевые свойства элементов наследуются от своих родителей, начинать таблицу стилей лучше именно с селекторов, которые выступают контейнерами для других элементов. В частности, это BODY, TABLE, UL, OL и т.д. Если требуется задать гарнитуру шрифта для всего текста веб-страницы, то надо применить параметр font-family к селектору BODY.

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

4. Группируйте селекторы с одинаковыми параметрами и значениями

5. Используйте идентификаторы и классы

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

6. Применяйте универсальные стилевые параметры

Универсальные параметры задают одновременно сразу несколько значений. Примеры таких свойств: border (вид границы), padding (поля вокруг элемента), margin (отступы вокруг элемента).

Так, параметр padding определяет поля одновременно для всех четырех сторон элемента. Поэтому использование padding: 10px короче и понятнее, чем последовательное добавление аргументов padding-left, padding-top, padding-right и padding-bottom, определяющих поля для каждой стороны.

Краткие итоги

Каскадные таблицы стилей CSS – технология описания внешнего вида документа, написанного языком разметки (HTML, XHTML, XML, SVG, XUL и др.).

Основной целью разработки CSS являлось разделение содержимого и представления документа.

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

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

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле.

При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы.

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

Способ записи CSS в общем виде имеет следующий синтаксис:

Селектор { свойство1: значение; свойство2: значение; ... }

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

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

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других.

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