Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, идентификаторы, классы и др. После указания селектора идут фигурные скобки, в которых записывается необходимое стилевое свойство, а его значение указывается после двоеточия. Параметры разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.
Замечание. Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры.
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде [2, 5]:
В данном примере изменяется размер шрифта и семейство шрифта параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <P>.
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий [2, 5]:
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }
Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса".
Рис. 3.1. Результат использования классов c тегами
Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий:
.Имя класса { свойство1: значение; свойство2: значение; ... }
При такой записи, класс можно применять к любому тегу.
Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>.
Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.
Синтаксис использования идентификатора следующий [2, 5]:
В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.
Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример). Символ решетки при этом уже не указывается.
Пример использования идентификатора:
…
<head>
…
<style type="text/css">
#help {
position: absolute;
left: 160px;
top: 50px;
width: 225px;
height: 180px;
background: #f0f0f0;
}
</style>
</head>
<body> <div id="help">Пример использования Идентификаторов</div></body>…
В данном примере определяется стиль тега <DIV>, для которого указан селектор help через параметр id.
Результат данного примера показан на Рис. 3.2.
Рис. 3.2. Результат использования идентификатора
Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий:
