Селекторы CSS. Часть первая.

Статья от 28.05.09 в категории CSS
Теги: CSS, html

Валидная и хорошо структурированная страница предоставляет каркас, к которому применяются стили. Чтобы можно было присвоить стиль, определенный в таблице CSS, некоторому элементу или элементам, нужно каким-либо образом идентифицировать эти элементы . Для идентификации элементов применяются селекторы.

Обычные селекторы

В практике верстки веб-страниц чаще всего применяются селекторы типов и нисходящие селекторы . Селектор типа используется для присвоения стиля всем элементам заданного типа, например всем гиперссылкам, абзацам, заголовкам. Для создания селектора типа нужно всего лишь поместить в таблице CSS имя элемента (т.е. типа) перед определением стиля, как в приведенных ниже примерах.

p {color : black;}
а {text-decoration: underline ; }
h1 { font-weight: bold;}

Нисходящие селекторы позволяют присваивать стили элементам, вложенным в заданные элементы или группы элементов. Нисходящий селектор создается путем добавления пробела между двумя селекторами. В следующем примере заданный стиль будет присваиваться только гиперссылкам (дескриптора), вложенным в элементы списков (дескриптор li). Следовательно, данный стиль не повлияет на гиперссылки, расположенные в простых абзацах (дескриптор p).

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

#intro {font-weight: bold; }
.datePosted {color: green; }

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

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

/ * Присвоение синего цвета непосещенным гиперссылкам * /
a:link { color: blue; }
/ * Присвоение зеленого цвета посещенным гиперссылкам * /
a:visited { color: green; }
/ * Присвоение красного цвета гиперссылке ,
          на которую наведен указатель мыши, и активным гиперссылкам */
a:hover, a:active { color: red; }
/ * Присвоение красного цвета строке таблицы,
          на которую наведен указатель мыши * /
tr:hover { background-color: red; }

Директивы :link и :visited являются псевдоклассами гиперссылок. Их можно подключать только к гиперссылкам. Директивы :hover, :active и :focus являются динамическими псевдоклассами. Теоретически их можно подключать к любому элементу. Однако, к сожалению, динамические псевдоклассы поддерживаются только несколькими современными браузерами. Браузеры IE6- обращают внимание на селекторы :active и :hover, только если они подключены к гиперссылкам, а селекторы :focus игнорируются ими начисто.

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

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

* {
padding: 0;
margin: 0;
}

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

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

Оставить комментарий

Подпишись на обновления
через rss или email.

WEBduty.ru css html javascript jquery