Контекстные селекторы - Самоучитель CSS - WEB - Статьи

Главная » Статьи » WEB » Самоучитель CSS

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

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

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

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

<Тег1>
 <Тег2> ... </Тег2>
</Тег1>

Использование контекстных селекторов продемонстрировано в примере 10.1.

Пример 10.1. Контекстные селекторы

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Контекстные селекторы</title>
 <style type="text/css">
 P B { 
 font-family: Times, serif; /* Семейство шрифта */
 font-weight: bold; /* Жирное начертание */
 color: navy; /* Синий цвет текста */
 }
 </style>
 </head> 
 <body>
 <div><b>Жирное начертание текста</b></div>
 <p><b>Одновременно жирное начертание текста
 и выделенное цветом</b></p>
 </body>
</html>

В данном примере показано обычное применение тега <b> и этого же тега, когда он вложен внутрь абзаца <p>. При этом меняется цвет и шрифт текста, как показано на рис. 10.1.

Оформление текста в зависимости от вложенности тегов

Рис. 10.1. Оформление текста в зависимости от вложенности тегов

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

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

Пример 10.2. Использование классов

HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Контекстные селекторы</title>
 <style type="text/css">
 A {
 color: green; /* Зеленый цвет текста для всех ссылок */
 }
 .menu { 
 padding: 7px; /* Поля вокруг текста */
 border: 1px solid #333; /* Параметры рамки */
 background: #fc0; /* Цвет фона */
 }
 .menu A {
 color: navy; /* Темно-синий цвет ссылок */
 }

 </style>
 </head> 
 <body>
 <div class="menu">
 <a href="1.html">Русская кухня</a> |
 <a href="2.html">Украинская кухня</a> |
 <a href="3.html">Кавказская кухня</a>
 </div>
 <p><a href="text.html">Другие материалы по теме</a></p>
 </body>
</html>

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

Ссылки разных цветов

Рис. 10.2. Ссылки разных цветов

В данном примере используется два типа ссылок. Первая ссылка, стиль которой задается с помощью селектора A, будет действовать на всей странице, а стиль второй ссылки (.menu A) применяется только к ссылкам внутри элемента с классом menu.

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

Категория: Самоучитель CSS | Добавил: expert1 (31.01.2013)

Просмотров: 369 | Теги: CSS, Самоучитель | Рейтинг: 0.0/0

Всего комментариев: 0

Главное меню

Вход

Статистика

Стихи

Рекомендуем

Загрузки

Проекты