Виды селекторов CSS. Классы, идентификаторы и селекторы тегов

виды селекторовПродолжаем знакомство с CSS, которое мы начали в статье «Структура CSS.  Синтаксис и подключение CSS» .
Сегодня рассмотрим виды селекторов и другие элементы CSS с их атрибутами.
Классы
Классы используют, если нужно определить стиль для одного элемента веб-страницы или применить разные стили для одного тега.
Для указания в коде HTML-документа, что тег применяется с каким-то определенным стилем, к определяемому тегу добавляют параметр. Класс записывают внутри скобок стилевой таблицы. Сначала пишется нужный тег, а за ним, через точку пользовательское имя класса Рассматривая примеры, будем использовать таблицы глобальных стилей, для сокращения статей. Но держа в уме, что стили правильнее и удобнее записывать в отдельном файле. И так, пример использования классов:

<html>
<head>
<title>Примнение классов и селекторов тегов.</title>
<style type="text/css">
P {
text-align: center;
}
P.exp {
text-align: right;
color: red;
font-style: italic;
font-weight:  bold;
}
</style>
</head>
<body>

<p>Простой параграф. Текст выравнен по центру.</p>

<p class="exp">По определению класса «exp» — текст выравнялся по правому краю, стал красным курисовом и обрел большую толщину.</p>

</body>
</html>

классы

На рисунке Вы видите использование класса «exp» для изменения отображения параграфа.
Также в этом примере используется ещё один вид селекторов - Селектор Тегов. В примере в его роли выступает селектор тега Р.
В роли такого селектора может выступать любой тег HTML, которому необходимо определить правила форматирования. К таким правилам можно отнести такие как: цвет, фон, размер и другие.

Идентификаторы — следующий вид селекторов, который используется для изменнения только одного элемента, придавая этому элементу уникальное имя. Последняя особенность позволяет применять идентификаторы для обращения к ним посредством скриптов, для динамическог измененния веб-элементов. Синтаксис написания также сходен с классами, но вместо точки перед именем идентификатора ставится знак #.

К идентификатору обращаются аналогично классам, но вместо ключевого слова используется параметр id. А значением оного выступает имя идентификатора. Символ решетки в этот момент уже не указывают. Пример:

<html>
<head>
<title>Идентификаторы</title>
<style type="text/css">
P {
text-align: center;
}
#exp {
text-align: right;
color: white;
background-color: #3366CC;
font-weight: bold;
}
</style>
</head>
<body>

<p>Простой параграф. Текст выравнен по центру.</p>

<p id="exp">По определению идентификатора «exp» — текст выравнялся по правому краю, стал белым на синем фоне и обрел большую толщину.</p>

</body>
</html>

идентификаторы

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

Когда необходимо установить одновременно одинаковый стиль для всех элементов веб-документа, используют универсальный селектор, соответствующий любому элементу веб-страницы. Для его обозначения применяют символ звездочки (*) и обычно синтаксис бывает таким: * { Описание правил стиля }.

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

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

Соседние селекторы
Соседними называют веб-элементы, которые расположены рядом друг с другом, и следуют один за другим, например: <div><b></b><i></i></div> . В приведённом примере соседними являются теги <b> и <i>. Родительские и дочерние элементы не относятся к соседним.

Для задания стилей соседних элементов применяют символ плюса (+), который вставляют между двумя селекторами. Синтаксис написания стилей соседних селекторов следующий: 1селектор  + 2селектор { Описание правил стиля }. Использовать вокруг знака «+» пробелы не является обязательным.

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

<html>
<head>
<title>Cоседние селекторы</title>
<style type="text/css">
I + B {
color: red;
}
</style>
</head>
<body>
<p><i>Изменение цвета с применением способа </i><b>соселнего селектора</b></p>
<p>Изменение цвета с применением способа <b>соселнего селектора</b> не происходит из-за отсутствия самого соседства.</p>
</body>
</html>

Соседние селекторы

С помощью данного способа задания стилей можно добиться применение стиля к элементу следующему строго за определённым предыдущим. В нашем примере цвет тега <b> меняется только в том случае, если он следует за соседним тегом <i>, и никогда иначе. Данный способ применяется редко т.к. не поддерживается браузером  Internet Explorer.

Дочерние селекторы

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

1селектор > 2селектор { Описание правил стиля для 2-ого селекрора }

Стиль будет применён ко 2-му селектору, но только тогда, когда он является дочерним для 1-ого селектора.

Рассмотрим применение Дочернего селектора на примере:

<html>
<head>
<title> Дочерние селекторы</title>
<style type="text/css">
DIV > P {
color: red;
}
</style>
<body>
<div>
<p>Красный цвет текста только у параграфа, вложенного в тег DIV</p>
</div>
<p>У этого параграфа цвет по-умолчанию , т.к. он не является дочерним для тега DIV</p>
</body>
</html>

Дочерний селектор

По тексту на рисунке виден смысл применения соседних селекторов. Данный способ также применяется редко т.к. не поддерживается браузером  Internet Explorer.

Применение стилей к селекторам атрибутов и контекстным селекторам рассмотрим отдельно.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

2 комментария

  1. Larisa пишет:

    По первому примеру.

    Чем тег

    Простой параграф. Текст выравнен по центру.

    отличается от тега

    По определению класса «exp» — текст выравнялся по правому краю, стал красным курисовом и обрел большую толщину.

    ???

    С какой стати второй абзац стал красным?

    Где указание на класс P.exp?

  2. Игорь пишет:

    Вы правы. В класс был мною пропущен. Спасибо за внимательное чтение. Все исправлено.

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

Перед отправкой формы:
Human test by Not Captcha