CSS » Кое-что о списках


24 января 2008 от admin
Многие начинающие веб-дизайнеры даже не подозревают, насколько мощным и удобным инструментом являются списки. Да-да, самые обычные ненумерованые (впрочем и нумерованные тоже) списки, именно те самые, заключенные между тегами 
<li> и </li>
Множество дизайнерских трюков, для которых прежде применялись скрипты, можно реализовать, используя только списки и некоторые стилевые правила.

Итак, для начала сделаем элементарный список:
<ul>
 	<li>Пункт 1</li>
 	<li>Пункт 2</li>
 	<li>Пункт 3</li>
 	<li>Пункт 4</li>
 	<li>Пункт 5</li>
</ul>
в браузере мы увидим:
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5

Но нам нужна большая функциональность, и более изящное оформление, не так ли? Придется подключать CSS - между открывающим и закрывающим тегом head вставляем строчку , а уже в самом css-файле определяем стили.
#list {
	margin: 2em;
	width: 10em;
	padding: 5px;
	}
Допустим, нам понадобился список с особыми маркерами. Как мы поступали раньше? Создавали таблицу, в одной колонке размещали картинку маркера и смещали ее в ячейке вверх и вправо. В другой колонке размещали текст, который должен был бы находится в элементах 
<li>
Теперь CSS позволяет использовать изображение в качестве маркера:
list-style-image: url(bullet.png);
Если броузер не поддерживает эту функцию CSS (или не поддерживает вывод графики), будет использован маркер по умолчанию (либо тот, который вы укажите на этот случай):
list-style-type: disc;
Чтобы изображение, выбранное вами в качестве маркера, не "выползло" за границы списка (например при смене разрешения), поместите изображение внутрь блока 
<li>
list-style-position: inside;

В результате содержимое css файла:
#list {
   margin: 2em;
   width: 10em;
   padding: 5px;
}
ul {
   list-style-image: url(bullet.png);
   list-style-type: disc;
   list-style-position: inside;
}
На экране превратится в:
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5
Примечание: стили для списка
list-style-image: url(bullet.png);
list-style-type: disc;
list-style-position: inside;

можно безболезненно заменить на одну строчку
list-style: disc url(bullet.gif) inside;

Списки необязательно должны располагаться вертикально - иногда по соображениям дизайнера (например для меню или навигационной панели) элементы должны выстроиться в одну строку. Это достигается элементарно - в свойствах элемента 
<li>
указываем display: inline;
Кроме того, иногда стандартных стилей оформления (атрибутов disc, circle или square) может не хватить, а графику (list-style-image) по определенным причинам использовать нельзя. На помощь придут псевдоэлементы :before и :after - тогда стилевое правило будет выглядеть так:
#list ul li:before {
   content: "\00BB";
}

Следует помнить, что младшие версии IE не дружат с CSS 2, поэтому пользователи интернет експлорера ничего не заметят. Все остальные (Opera, Safari, Firefox, Konqueror, etc) корректно отображают элементы :before и :after. С их помощью можно отображать как обычные символы, так и элементы псевдографики - для этого надо указать шестнадцатеричный (Hex) код в качестве аргумента.
В результате (с учетом inline и before) css файл:
#inline {
   margin: 2em;
   padding: 5px;
}
#inline li:before {
   content: "\00BB";
}
#inline ul, #inline li {
   display: inline;
 margin: 0;
   padding: 0;
   font-weight: bold;
}
В браузере покажет:
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5
Иногда необходимо выделить один из элементов списка. Попробуем реализовать это с помощью CSS. Для начала опишем общие стили:
#tabs ul {
   margin-left: 0;
   padding-left: 0;
   display: inline;
}
#tabs ul li {
   margin-left: 0;
   margin-bottom: 0;
   padding: 2px 15px 5px;
   border: 1px solid #000;
   list-style: none;
   display: inline;
}
Затем добавим класс .here (с его помощью и будем выделять нужный пункт):
#tabs ul li.here {
   border-bottom: 1px solid #fff;
   list-style: none;
   display: inline;
}
а в html одному из элементов списка присвоим этот класс: 
<li class="here">Пункт 3</li>
В результате увидим:

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 5


По материалам alistapart.com. Это далеко не вся и далеко не полная информация о списках и приемах работы с ними. Постепенно я буду добавлять новые методы как по спискам в частности, так и по CSS в целом, а все желающии могут мне помочь в этом, просто оставляя коментарии.