Создание статического содержания. CSS
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. Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий [2, 5]:
Тег.Имя класса { свойство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.
Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий:
.Имя класса { свойство1: значение; свойство2: значение; ... }При такой записи, класс можно применять к любому тегу.
Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>.
3.1.4.2. Идентификаторы
Идентификатор (называемый также "ID селектор ") определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.
Синтаксис использования идентификатора следующий [2, 5]:
#Имя идентификатора { свойство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.
Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий:
Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора.
3.1.4.3. Контекстные селекторы
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте.
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий [2, 5]:
Тег1 Тег2 { ... }В этом случае стиль будет применяться к Тегу2, когда он размещается внутри Тега1, как показано ниже.
Пример использования контекстных селекторов:
…
<head>
…
<style type="text/css">
P B {
font-weight: bold;
color: navy;
}
</style>
</head>
<body>
<div><b>Жирное начертание текста</b></div>
<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>
</body>
…В данном примере показано обычное применение тега <B> и этого же тега, когда он вложен внутрь параграфа <P>. При этом меняется цвет текста, как показано на рис. 3.3.
Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса.
3.1.4.4. Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа [5]. Рассмотрим пример отношения элементов:
<p>Это <b>пример</b> <var>соседних</var> селекторов.</p>
Теги <VAR> и <B> представляют собой соседние элементы.
Для управления стилем соседних элементов используется символ плюса ( + ), который устанавливается между двумя селекторами. Общий синтаксис следующий:
Селектор 1 + Селектор 2 { Описание правил стиля }Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.
Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <H1> и <H2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов.
Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счет включения отрицательного значения параметра margin-top. При этом текст поднимается вверх, ближе к предыдущему элементу.
3.1.4.5. Дочерние селекторы
Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий [2, 5]:
Селектор 1 > Селектор 2 { Описание правил стиля }Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами. Однако использование дочерних селекторов расширяет возможности по управлению стилями элементов, что в итоге позволяет получить нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой – сюда относятся, например, таблицы и разные списки.
3.1.4.6. Селекторы атрибутов
Для изменения стиля элементов содержащих различные параметры, в CSS введены селекторы атрибутов [5]. Они позволяют установить стиль тега по присутствию определенного параметра или его значения.
Рассмотрим один вариант применения таких селекторов – Селектор атрибута со значением.
Данный селектор устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра. Синтаксис применения следующий.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }В первом случае стиль применяется ко всем элементам, которые содержат указанное значение атрибута. А во втором – только к определенным селекторам.
3.1.4.7. Универсальный селектор
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор , который соответствует любому элементу веб-страницы [5].
Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий:
* { Описание правил стиля }В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.
Вообще, этот тип селекторов применяется в основном в структурных языках вроде XML, для обозначения имен элементов, которые в стилях неизвестны.
3.1.4.8. Группирование
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся параметров. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода [2, 5].
Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий:
Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.