CSS по шагам



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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

UL#menu > LI {

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

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

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

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

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

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

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

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

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

}

LI > UL {

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

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

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

}

LI > A {

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

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

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

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

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

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

}

</style>

</head>

<body>

<ul id="menu">

 <li>Редактор</li>

 <li>Правка

  <ul>

   <li><a href="undo.html">Отменить</a></li>

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

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

   <li><a href="paste.html">Вставить</a></li>

  </ul>

 </li>

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

  <ul>

   <li><a href="bold.html">Жирное</a></li>

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

   <li><a href="emphasis.html">Приятное</a></li>

  </ul>

 </li>

 <li>Размер

  <ul>

   <li><a href="small.html">Так себе</a></li>

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

   <li><a href="middle.html">Средний</a></li>

   <li><a href="big.html">Недетский</a></li>

  </ul>

 </li>

</ul>

</body>

</html>

Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу




Содержание  Назад  Вперед