Контекстные селекторы
Творческий полет мысли при верстке очередной станицы сайта требует, чтобы текст, выделенный в заголовке с помощью элемента <em>, выглядел следующим образом:
Да здравствует CSS!
Пытаемся реализовать его средствами CSS, задаем элементу <em> правило -
em {color: red}, в HTML-код вставляем фразу - <h1>Да здравствует <em> CSS!</em></h1>Все получилось, но, возникает вопрос, какого цвета будет текст, выделенный тегом <em> в заголовках других уровней, параграфах. Конечно же, красного!
Можно задать элементу <em>, находящемуся между <h1> отдельный класс:
<h1>Да здравствует <em сlass="color"> CSS!</em></h1>Но лучше задать стиль для тега <em> с условием, что он располагается внутри заголовка <h1>, тогда можно установить стили, как для заголовка, так и для тега, который находится внутри него.
Контекстные селекторы позволяют устанавливать такие правила, и легко управлять стилем одинаковых элементов, вроде изображений и ссылок, оформление которых должно различаться в разных областях web-страницы.
Контекстный селектор состоит из простых селекторов разделенных пробелом:
тег1 тег2 {свойство 1: значение 1; … свойство n: значение n}Такое написание означает, что стиль применяется к тегу 2, когда он размещен внутри тега 1.
В нижеприведенном коде с помощью контекстного селектора назначен стиль для заголовка второго уровня. Параметры тега <h2> действуют на всю фразу. Правило
color: red применяется только к тексту, находящемуся между элементом <em>…</em>.Знакомимся с кодом, смотрим, что получилось:
<html>
<head>
<title>контекстные селекторы</title>
<style type="text/css">
body {
background:#faf0e6
}
p {
text-indent:20px;
text-align: justify
}
h1 em {
color: red;
font-size:150%
}
p em {
color: red
}
</style>
</head>
<body>
<img src=ims/03.gif align=left height=200 hspace=30 vspace=5 alt="расслабься">
<div align="center"><h1>Привет всем!</h1></div>
<p>Сайтик разрастается. Страниц все больше. Появились идеи, решить их средствами одного HTML сложно. Осваиваю <em>CSS</em> - Таблицы каскадных стилей. Столько новых возможностей, да и верстку облегчает существенно. Полезная штука!</p>
<h1><center>Да здравствует <br><em>CSS!</em></center></h1>
</body>
</html>
