Виды селекторов CSS

Виды селекторов CSS

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

Примечание: знание принципов использования селекторов CSS есть обязательным для дальнейшего изучения каскадных таблиц стилей, так как они являются основой CSS кода.

Давайте же ознакомимся с основными селекторами CSS.


Селекторы элементов (тегов)

Это самые простые и элементарные селекторы. При этом, селектором является определенный элемент или тег HTML страницы. Давайте посмотрим, как это выглядит на примере:

h1 {color: #36CFFF}

Здесь в качестве селектора выступает заголовок первого уровня, то есть тег <h1>, а все его содержимое имеет цвет «36CFFF».


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

С помощью данного селектора можно применить стили ко всем элементам веб-страницы. Например:

* {color: #000000}

Это правило делает содержимое всех элементов страницы черным цветом.


Селекторы потомков

С их помощью можно изменять стили определенного элемента, только тогда, когда он находится внутри  другого элемента. К примеру:

ul em {color: #000000}

Таким образом, CSS применяется к тегу <em> только тогда, корда он находится внутри тега <ul>.


Селекторы классов

Они позволяют задать стили только к тем элементам, которые имеют одинаковые названия атрибута «class». Вот как это будет выглядеть html код:

<p class="black">С помощью CSS этот текст будет черным</p>

А таким будет стиль:

.black {color: #000000}

Если же вы хотите, чтобы CSS применялся только к тегу <p>, то синтаксис будет таким:

p.black {color: #000000}

Примечание: для одного элемента можно применять несколько классов, например: <p class="black myClass my2Class">. Еще одним важным элементом есть то, что при прописывании стиля для класса, код начинается с точки. 


Селекторы идентификаторов

Принцип использования для таких селекторов такой же самый как для селекторов классов, но атрибутом элемента выступает идентификатор. Код html:

<h1 id="myID">Заголовок 1-го уровня</h1>

CSS код будет следующим:

#myID {color: #000000}

Примечание: код стиля для идентификаторов начинается с решетки «#». 

Так же, как и в случае с селекторами классов, CSS можно прописать для идентификаторов определенного элемента:

h1#myID {color: #000000}

Групповые селекторы

В CSS есть возможность применять один и тот же стиль к нескольким элементам без копирования того самого стиля под каждый элемент. Для этого, между элементами нужно проставить запятые. Пример:

h1, h2, h3 {color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase}

Теперь вы знаете о самых основных селекторах CSS, в следующих статьях мы будем изучать уже непосредственно написание кодов CSS с разными свойствами. Удачи в создании сайтов!


<<< Предыдущая статья Меню категории Следующая статья >>>

Ставив лайк Вы помогаете сайту :)

Статьи по теме:
Рейтинг:
5.0/5 из 3
Категория: Учебник CSS | Добавил: zaharchuk (13.01.2015)
Просмотров: 4002
Комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]