Продолжаем знакомство с 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.
Применение стилей к селекторам атрибутов и контекстным селекторам рассмотрим отдельно.
По первому примеру.
Чем тег
Простой параграф. Текст выравнен по центру.
отличается от тега
По определению класса «exp» — текст выравнялся по правому краю, стал красным курисовом и обрел большую толщину.
???
С какой стати второй абзац стал красным?
Где указание на класс P.exp?
Вы правы. В класс был мною пропущен. Спасибо за внимательное чтение. Все исправлено.