3.1.4. Селекторы тегов
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде [2, 5]:
Тег { свойство1: значение; свойство2: значение; ... }
Пример изменения стиля тега параграфа:
…
<head>
…
<style type="text/css">
p {
font-size: 110%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
…
В данном примере изменяется размер шрифта и семейство шрифта параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <P>.
3.1.4.1. Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий:
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }
Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса".
Пример использования классов c тегами:
…
<head>
…
<style type="text/css">
p {
font-size: 110%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p.Color {
color: navy;
}
</style>
</head>
<body>
<p>Пример использования селектора тегов.</p>
<p class="Color">Пример использования класса.</p>
</body>
…
Результат данного примера показан на рис. 3.1.
Рис. 3.1. Результат использования классов c тегами
Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий:
.Имя класса { свойство1: значение; свойство2: значение; ... }
При такой записи, класс можно применять к любому тегу.
Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>.
3.1.4.2. Идентификаторы
Идентификатор (называемый также "ID селектор") определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.
Синтаксис использования идентификатора следующий:
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.
Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр 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. Результат использования идентификатора
Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий:
Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора.