Стилевые классы

Стандарт CSS2 позволяет вам определить несколько различных стилей для одного элемента путем указания класса для каждого стиля на уровне документа или во внешней таблице стилей. Затем вы в документе явно выбираете стиль, задавая атрибут class с нужным вам значением name в соответствующем теге.

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



Приведенный пример показывает: определение стилевого правила для класса состоит в том, что в селекторе к имени тега через точку приписано имя класса. В отличие от «послушного» XHTML-селектора, являющегося именем стандартного тега (который необходимо записывать строчными буквами), имя класса может быть любой последовательностью букв, цифр и дефисов, но всегда должно начинаться с буквы.1 Будьте, однако, осторожны, регистр в этом случае имеет значение – abstract это не то же самое, что AbsTRact.


Классы входят в селекторные списки наряду с обычными селекторами, отделяясь от других классов и селекторов запятыми, как это показано в третьем примере. Единственное ограничение, вводимое для классов, состоит в том, что они немогут вкладываться друг в друга, так что конструкция p.equation.centered, например, не является допустимой.

Первое правило в примере, таким образом, создает класс стилей абзаца под названием «abstract», текст которого должен выводиться курсивом с отступом на полсантиметра от правого и левого краев. Подобным образом второе определение стилевого класса «equation» предписывает броузеру центрировать текст и использовать гарнитуру шрифта Symbol при его отображении. Последнее правило создает стиль с центрированным текстом и полусантиметровыми полями, который должен применяться ко всем заголовкам уровня 1, как и к абзацам, атрибут class которых имеет значение centered.

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


This is the abstract paragraph. See how the margins are indented?


The equation paragraph follows



a = b + 1



This paragraph's text should be centered.



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


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

.italic {font-style: italic}

создает родовой класс по имени italic. Чтобы применить его, просто включите это имя в качестве значения атрибута class в тег. Так, например, используйте конструкции

и

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

. ID-классы
Почти все HTML-теги допускают атрибут id, присваивающий элементу уникальный в документе идентификатор. Атрибут id может быть целью URL и использоваться при автоматической обработке документа, а также в качестве указания применить к поименованному им элементу определенное стилевое правило.

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


Вот пример:



Теперь в документе можно написать

, чтобы создать синий заголовок, или вставить id=yellow практически в любой тег, чтобы окрасить его содержимое в желтый цвет. Сочетание атрибутов class и id позволяет в некоторых ограничениях применять к одному элементу два независимых стилевых правила.

Употребление правил, созданных таким способом, обладает существенным недостатком – стандарты HTML и XHTML требуют, чтобы значение атрибута id было уникально в каждом случае его использования в документе. А здесь нам приходится неоднократно указывать одно и то же значение для применения стилевого класса.

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

Псевдоклассы
В дополнение к традиционным стилевым классам стандарт CSS2 определяет псевдоклассы, позволяющие устанавливать стиль отображениядля некоторых состояний тегов, например изменять стиль показа, когда пользователь щелкает по гиперссылке. Псевдоклассы похожи на регулярные классы, но обладают двумя заметными отличиями – они присоединяются к имени тега двоеточием, а не точкой, и их имена заранее определены, а не произвольно выбираются вами. Существует семь псевдоклассов, три из которых явным образом ассоциированы с тегом (a).

Псевдоклассы гиперссылок
Популярные, поддерживающие стандарт CSS2 броузеры различают три специальных состояния гиперссылок, созданных при помощи тега (a): неиспользованная, используемая и использованная. Броузер способен изменять внешний вид содержимого тега, обозначая его состояние подчеркиванием, например, или цветом. При помощи псевдоклассов можно управлять тем, как эти состояния отображаются, определяя стили для a: link (неиспользованная), a: active (используемая) и a: visited (использованная).

Псевдокласс :link управляет внешним видом ссылок, которые не выбраны пользователем и не посещались прежде. Псевдокласс :active определяет внешний вид гиперссылок, которые в настоящий момент выбраны и обрабатываются броузером. Псевдокласс :visited устанавливает облик ссылок, которые ранее уже были использованы. Чтобы полностью определить все три состояния тега (a), можно написать:

a:link {color: blue}
a:active {color: red; font-weight: bold}
a:visited {color: green}

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

Интерактивные псевдоклассы
Стандарт CSS2 определяет два новых псевдокласса, которые вместе с :active реагируют на поступки пользователя и советуют интерактивному агенту, скажем броузеру, как отображать элемент, подвергнувшийся внешнему воздействию. Другими словами, эти два псевдокласса являются динамическими: hover и focus. Например, броузер может изменить вид указателя мыши, когда вы проводите ею над гиперссылкой в документе. Подобный эффект нависания, скорее всего, связан со стилем отображения, который возникает только при условии, что мышь попала в область, принадлежащую элементу. В частности, если вы добавите псевдокласс :hover к списку стилевых правил для гиперссылки из нашего примера:

a:hover {color: yellow}

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

Подобным образом псевдокласс :focus позволяет изменить стиль элемента, который стал объектом внимания. Элемент может попасть в сферу обзора, если вы дошли до него, нажимая клавишу «Tab», щелкнули на нем мышью или – в зависимости от броузера – подвели к нему курсор. Независимо от способа, каким ему уделено внимание, стилевое правило, ассоциированное с псевдоклассом :focus, будет применяться к этому элементу, пока вы не утратите к нему интереса.

Псевдоклассы вложения и языка
CSS2-псевдокласс :first-child позволяет указать способ, каким можно отобразить элемент, являющийся первым потомком некоего родительского элемента. К примеру, следующее правило применяется только к тем абзацам, которые входят первыми в состав раздела. Перед абзацем не должно быть никаких элементов (обратите внимание на специальное использование знака «больше» по отношению к первому элементу-потомку):

div > p:first-child {font-style: italic}

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




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




Новый раздел




Я отображен обычным шрифтом, потому что этот параграф – второй потомок в разделе.
Наконец, стандарт CSS2 определяет новый псевдокласс, который позволяет выбирать элемент, основываясь на его языке. В частности, если включить в тег

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

lang. К примеру:div:lang(it) {font-family: Roman}

говорит, что текст в разделах, содержащих итальянский язык, должен применять шрифты семейства Roman. Как считаете, подходит?

Заметьте, что язык указывается в скобках сразу после ключевого слова lang. Используйте для псевдокласса :lang те же коды языков по стандарту ISO, что и для атрибута lang. Как броузеры поддерживают псевдоклассы Ни один из популярных броузеров пока не поддерживает псевдоклассы :lang и :focus. Все они обрабатывают псевдоклассы :link, :active, :hover и :visited для тега гиперссылки (a), а также :first-child. Хотя по стандарту :active может использоваться и с другими элементами, ни один из броузеров пока не поддерживает его употребление ни с каким отличным от (a) тегом.

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

a.plain:link, a.plain:active, a.plain:visited {color: blue}
a:link {color: blue}
a:visited {color: green}
a:active {color: red}
a.fancy:link {font-style: italic}
a.fancy:visited {font-style: normal}
a.fancy:active {font-weight: bold; font-size: 150%}

Простая (plain) версия (a) всегда синяя вне зависимости от состояния гиперссылки. Соответственно нормальная гиперссылка имеет снача-ла синий цвет, становится красной, когда активна, и превращается в зеленую после посещения. Затейливая (fancy) ссылка наследует цветовую схему нормальной, но ее текст до использования выводится кур-
сивом, после посещения возвращается к обычному и вырастает в полтора раза и становится жирным, когда она активна.

Два слова в предупреждение по поводу класса fancy – указывая изменение размера шрифта для преходящего свойства, вы задаете броузеру работу по отображению окружающего содержимого. Поскольку некоторые броузеры работают на медленных машинах, этот эффект может остаться незамеченным определенной частью ваших пользователей.
Кроме того, поскольку реализация такого сорта изменений в отображении довольно хлопотна, маловероятно, что большинство броузеров будут поддерживать радикальную модификацию внешнего вида в псевдоклассах тега (a).

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

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

Классы не могут наследовать от других классов, а только от «свободного» тега. Таким образом, как можно большее число стилевых свойств необходимо определить в спецификациях тега, а в правила классов включать только те из них, что специфичны для данного класса. Это упростит поддержание и совместное использование стилевых классов,
особенно в случае больших собраний документов.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела HTML на эту тему:
Бестеговые стили – тег
Применение стилей в документах
Синтаксис стилей
Стилевые свойства
Элементы стилей

Вернуться в раздел: HTML / 8. Каскадные таблицы стилей