CSS: Урок 17. HTML & CSS списки

Пятница, 24 Декабря 2010 г. 21:16 + в цитатник

CSS атрибуты и значения, определяющие свойства списков

HTML списки | Пример:

Sony
Asus
Dell
Toshiba
Acer
Lenovo

CSS списки | Пример:

                                  <head>

            <style type="text/css">

            * {font-family: Arial, Helvetica, sans-serif}

            #nav_menu {padding: 0; width: 762px; margin: 0 auto}

            #nav_menu ul {list-style: none; margin: 0; padding: 0}

            #nav_menu li {display: inline}

            #nav_menu a {

            float: left;

            width: 125px;

            height: 30px;

            background-color: #cc0033;

            border-left: 2px solid #ffffff;

            text-decoration: none;

            text-align: center;

            padding: 0;

            padding-top: 10px;

            font-size: 18px;

            color: #ffffff

            }

            #nav_menu a:hover {background-color: #990033; color: Tomato}

            </style>

                              </head>

            <body>

            <div id="nav_menu">

            <ul>

            <li><a href="#">Sony</a></li>

            <li><a href="#">Asus</a></li>

            <li><a href="#">Dell</a></li>

            <li><a href="#">Toshiba</a></li>

            <li><a href="#">Acer</a></li>

            <li><a href="#">Lenovo</a></li>

            </ul>

            </div>

            </body>

Результат: CSS списки ⇒ горизонтальное меню

Атрибуты и значения

Селектор * – определяет все элементы документа. В данном случае установлен шрифт.
padding:0 – отменяет внутренние поля.
margin:0 auto – определяет центрирование блока.
list-style:none – определяет отсутствие маркеров списка.
margin:0 – отменяет внешние поля блока
display:inline – определяет горизонтальное положение объектов.
border-left: – определяет свойства левой границы.
padding-top: – определяет размер верхнего внутреннего поля.
text-decoration:none – отменяет подчеркивание текста.
float:left – определяет обтекание слева (подробнее в одном из следующих уроков).
a:link, a:active, a:visited заменены селектором a, то есть все три псевдоэлемента имеют одинаковые свойства.