CSS стили

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

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

Пример группирования по тэгам:
До группирования:

H1 {font-family: arial;font-size: 14pt}
H2 {font-family: arial;font-size: 14pt}
H3 {font-family: arial;font-size: 14pt}

После группирования:

H1,H2,H3 {font-family: arial;font-size: 14pt}

Пример группирования по атрибутам одного семейства:
До группирования:

BODY {margin-top: 12pt;margin-right: 10pt;margin-left: 15pt}

После группирования

BODY {margin: 12pt 10pt 15pt}
Назначение классов

Для того, чтобы сделать работу более универсальной, можно создать несколько вариантов - классов свойств стилей и применять их к элементам поочередно. Сгруппировав стили по свойствам, необходимо дать им названия ввиде расширения к элементу.
Синтаксис:
H1.left {text-align: left}
H1.right {text-align: right}
Далее в документе указывается либо <H1 class=left>, либо <H1 class=right>

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

.left {text-align: left}
.right {text-align: right}

Далее в документе указывается либо <тэгclass=left>, либо <тэгclass=right> Назначение псевдоклассов

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

  • A:link - не просмотренные ссылки
  • A:visited - просмотренные ссылки
  • A:hover - выбранная, но не активизированная ссылка
  • A:active - активизированная ссылка