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

Пример 12.3. Использование дочерних селекторов




HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" >

<title> Дочерние селекторы </title>

<style>

UL #menu {

margin: 0; padding: 0; /* Убираем отступы */

}

UL #menu > LI {

list-style: none; /* Убираем маркеры списка */

width: 100px; /* Ширина элемента в пикселах */

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

color: #333; /* Цвет текста */

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

font-family: Arial, sans-serif; /* Рубленый шрифт */

font-size: 90%; /* Размер шрифта */

font-weight: bold; /* Жирное начертание */

float: left; /* Располагаем элементы по горизонтали */

}

LI > UL {

list-style: none; /* Убираем маркеры списка */

margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */

border-bottom: 1px solid #666; /* Граница внизу */

padding-top: 5px; /* Добавляем отступ сверху */

}

LI > A {

display: block; /* Ссылки отображаются в виде блока */

font-weight: normal; /* Нормальное начертание текста */

font-size: 90%; /* Размер шрифта */

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

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

border-bottom: none; /* Убираем границу снизу */

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

}

</style>

</head>

<body>

<ul id="menu" >

<li> Правка

<ul>

<li><a href="#" > Отменить </a></li>

<li><a href="#" > Вырезать </a></li>

<li><a href="#" > Копировать </a></li>

<li><a href="#" > Вставить </a></li>

</ul>

</li>

<li> Начертание

<ul>

<li><a href="#" > Жирное </a></li>

<li><a href="#" > Курсивное </a></li>

<li><a href="#" > Подчеркнутое </a></li>

</ul>

</li>

<li> Размер

<ul>

<li><a href="#" > Маленький </a></li>

<li><a href="#" > Нормальный </a></li>

<li><a href="#" > Средний </a></li>

<li><a href="#" > Большой </a></li>

</ul>

</li>

</ul>

</body>

</html>


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

 

 

Поделиться:





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





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



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