 |
Пример 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 показана структура взаимодействия тегов между собой.
|
|
|
b) Пример классического.
II. Использование галереи фильтров
Q Приведите, пожалуйста примеры нарушений выполнения этой пробы при различных видах афазий.
Q Приведите, пожалуйста, примеры подобных нарушений внимания. Наиболее показательные примеры, на наш взгляд, относятся к сфере интеллектуальной деятельности и памяти.
V. Соотношение содержания стандартов и примерных программ
VI. 8. Примерный список вопросов по предмету.
VIII. ТЕХНИКА ИЗМЕНЕНИЯ ЛИЧНОЙ ИСТОРИИ С ИСПОЛЬЗОВАНИЕМ ВИЗУАЛЬ НОЙ СИСТЕМЫ.
XIII. Типичные ошибки изложения, вызванные нарушением логического закона тождества (с примерами)
XIV. Типичные ошибки изложения, вызванные нарушением логического закона противоречия (с примерами)
XVI. Типичные ошибки изложения, вызванные нарушением закона достаточного основания (с примерами)
