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

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





HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Контекстные селекторы</title>

<style>

A {

color: green; /* Зеленый цвет текста для всех ссылок */

}

.menu {

padding: 7px; /* Поля вокруг текста */

border: 1px solid #333; /* Параметры рамки */

background: #fc0; /* Цвет фона */

}

.menu A {

color: navy; /* Темно-синий цвет ссылок */

}

</style>

</head>

<body>

<div class="menu">

<a href="http://htmlbook.ru/1.html">Русская кухня</a> |

<a href="http://htmlbook.ru/2.html">Украинская кухня</a> |

<a href="http://htmlbook.ru/3.html">Кавказская кухня</a>

</div>

<p><a href="http://htmlbook.ru/text.html">Другие материалы по теме</a></p>

</body>

</html>


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

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

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

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

 

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



комментариев: 57

23.09.2010

Влад Мержевич

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

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

В этом примере тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Здесь теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, никак не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

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

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

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

В примере 11.1 показана структура взаимодействия тегов между собой.





Рекомендуемые страницы:




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


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



©2015- 2021 megalektsii.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.