Каскадные таблицы стилей (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 - активизированная ссылка
