Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Контекстные селекторы




Селекторы тегов

В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде:

Тег { свойство1: значение; свойство2: значение;... }

Пример изменения стиля тега параграфа:

<head>

<style type="text/css">

p {

font-size: 110%;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

</style>

</head>

В данном примере изменяется размер шрифта и семейство шрифта параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <P>.

Классы

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

Тег.Имя класса { свойство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>

Результат данного примера показан на рисунке 1:


Рисунок 1 – Результат использования классов c тегами

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

.Имя класса { свойство1: значение; свойство2: значение;... }

При такой записи, класс можно применять к любому тегу.

Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>.

 

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

Идентификатор (называемый также "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.

Результат данного примера показан на рисунке 2:


Рисунок 2 - Результат использования идентификатора

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

Тег#Имя идентификатора { свойство1: значение; свойство2: значение;... }

Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора.

Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте.

Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий:

Тег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 - Результат использования контекстных селекторов

Замечание. Не обязательно контекстные селекторы содержат только один вложенный тег. В зависимости от ситуации допустимо применять два и более последовательно вложенных друг в друга тегов.

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса.

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

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим пример отношения элементов:

<p>Это <b>пример</b> <var>соседних</var> селекторов.</p>

Теги <VAR> и <B> представляют собой соседние элементы.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий:

Селектор 1 + Селектор 2 { Описание правил стиля }

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <H1> и <H2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов.

Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счет включения отрицательного значения параметра margin-top. При этом текст поднимается вверх, ближе к предыдущему элементу.

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

Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий:

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

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

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

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

Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой – сюда относятся, например, таблицы и разные списки.

Поделиться:





Читайте также:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...