Селекторы атрибутов

Для изменения стиля элементов содержащих различные параметры, в CSS введены селекторы атрибутов[5]. Они позволяют установить стиль тега по присутствию определенного параметра или его значения.

Замечание. Селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, причем для корректной работы примеров необходимо добавить правильный <!DOCTYPE>.

Рассмотрим один вариант применения таких селекторов – Селектор атрибута со значением.

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

[атрибут="значение"] { Описание правил стиля } Селектор[атрибут="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, которые содержат указанное значение атрибута. А во втором – только к определенным селекторам.

Универсальный селектор

Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы [5].

Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий:

* { Описание правил стиля }

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

Вообще, этот тип селекторов применяется в основном в структурных языках вроде XML, для обозначения имен элементов, которые в стилях не известны.

Группирование

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

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

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

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

Наследование

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других [2, 5]. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Разберем наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <TABLE>, внутри которого добавляются теги <TR>, а затем идет тег <TD>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере.

Пример наследования параметров цвета:

…

<head>

…

TABLE {

color: red;

background: #333;

}

</style>

</head>

<body>

<table>

<tr>

<td>Ячейка 1</td>

<td>Ячейка 2</td>

</tr>

<tr>

<td>Ячейка 3</td>

<td>Ячейка 4</td>

</tr>

</table>

</body>…

В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <TD> наследует свойства тега <TABLE>. При этом следует понимать, что не все стилевые атрибуты наследуются. Так, параметр border задает рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение параметра background. При этом цвет фона у ячеек в данном примере черный, хотя он не наследуется, так как у атрибута background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом, если аргумент явно не задан, то цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.

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

Псевдоклассы

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

Синтаксис применения псевдоклассов следующий:

Элемент:Псевдокласс { Описание правил стиля }

Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}) и контекстным селекторам (.menu A:hover {background: #fc0}).

Условно все псевдоклассы делятся на группы, которые перечислены далее [2, 5].

Дата добавления: 2016-02-04; просмотров: 571;