Пример 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> В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться.
Читайте также: b) Пример классического. Воспользуйтесь поиском по сайту: ©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...
|