10. Списки

На этой странице:

• Стандартный маркер списка
• Изображение в качестве маркера
• Местоположение маркера
• Интегрированное свойство
• Компоновка списка
• Горизонтальные списки

Стандартный маркер списка

Для изменения типа маркера применяют свойство list-style-type.

В браузерах, как правило, задаются предопределённые стили для вложенных списков:

UL {list-style-type:disc;}     
UL UL {list-style-type:circle;}     
UL UL UL {list-style-type:square;}     
      

Свойство list-style-type наследуемое, но в силу предопределений браузера стиль, заданный для корневого UL, не распространится на потомки. Если это нужно, придётся определять для потомков явные стили чтобы перекрыть определения браузера, например, так:

UL, UL UL, UL UL UL {list-style-type:circle;}     
      

Изображение в качестве маркера

Стандартный маркер можно заменить собственным, привлекая для этого свойство list-style-image.

Местоположение маркера

Маркер можно располагать вне или внутри содержимого элемента списка. Это делается при помощи свойства list-style-position.

Интегрированное свойство

Все три свойства списка можно свести в одно: list-style.

Файл style.css OL {list-style:lower-roman inside;} Файл index.htm

list-style Значения: [<type> || <image> || <position> ] | inherit По умолчанию: см. отдельные свойства Область применения: списки Наследование: да Примечание: значения могут идти в любом порядке, любое может быть опущено (тогда работает значение по умолчанию)

Компоновка списка

Рассмотрим подробнее устройство списка.

Блочные элементы LI следуют друг за другом внутри блочного элемента UL (или OL). Маркеры не оказывают влияние на компоновку страницы: они “привешиваются” браузером слева от каждого LI на фиксированном расстоянии. Это расстояние зависит от браузера. В некоторых случаях маркеры могут оказаться даже за пределами окна (такой пример будет рассмотрен ниже).

UL, OL {margin-left:40px;}
    

UL, OL {padding-left:40px;}
    

Пиксельный размер промежутка нельзя назвать удачным решением. Гораздо лучше использовать em, тогда величина сдвига будет зависеть от размера шрифта и меняться пропорционально вместе с ним.

Чтобы задать собственные em-отступы, можно записать один их двух вариантов:

UL, OL 
{
  margin-left:2em;
  padding-left:0;
}
    

UL, OL 
{
  padding-left:2em;
  margin-left:0;
}
    

Посмотрите, как это работает в следующем примере.

  
UL, OL 
{
  margin-left:2em;
  padding-left:0;
  background:#afe9de;
}
      

В теме 9, в разделе “Кодирование списков” был рассмотрен пример со списком, в котором нумерация начиналась с XXVI. Чтобы маркер не вышел за пределы окна, пришлось для OL установить внешний отступ в 100px:

Комментарий к вынужденному стилевому описанию был такой:

Браузеры делают фиксированный отступ для вывода элементов списка на экран (примерно 40 пикселов). Нумерация при этом смещается к левому краю окна. Когда номер достаточно большой, места не хватает. Для исключения этого неприятного эффекта в коде примера пришлось задать смещение списка вправо на 100 пикселов при помощи стилевого указания style="margin-left:100px" в теге OL.

Расстояние между маркером и LI, как уже было сказано, задаётся браузером, и в CSS пока нет средств для управления этим параметром.

Но можно отказаться от стандартных маркеров (при помощи правила list-style-type:none), нарисовать свой маркер и выводить его как фоновую картинку в левый внутренний отступ каждого LI.

  
UL
{
  margin-left: 1em;
  padding-left: 0;
}
UL LI
{
  padding-left:20px;
  list-style-type: none;
  background: url(pic/marker8.png) no-repeat 0 0.6em;
}
      

А что если маркер, как фоновое изображение, выравнивать по центру в вертикальном направлении? Тогда он должен точно попасть в середину LI по вертикали!

  
UL
{
  margin-left: 1em;
  padding-left: 0;
}
UL LI
{
  padding-left:20px;
  list-style-type: none;
  background: url(pic/marker8.png) no-repeat 0 center;
}
      

Получилось неплохо. А теперь протестируем наше решение на вложенном списке.

Что такое? Почему маркеры рассыпались как горошины? Попробуйте самостоятельно объяснить причину. На самом деле, и в первом варианте с простым (не вложенным) списком не всё в порядке: попробуйте уменьшить ширину окна так, чтобы текст пунктов стал занимать более одной строки.

Горизонтальные списки

Построим горизонтальный список — основу для меню сайта и оформим его так, как показано на рисунке:

Запишем список позиций в виде обычного UL пока без всяких стилевых указаний.

Конечно, на горизонтальный список это не похоже. Но стоит взять в руки CSS, как через несколько минут картина совершенно изменится!

Прежде всего, уберём маркеры и, главное, превратим блочные элементы LI в строчные при помощи свойства display.

  
.menu {list-style:none;}
.menu LI {display:inline;}
      

На следующем шаге сделаем следующее. Для блока UL:

• уберём внешние отступы;
• назначим внутренние отступы;
• запретим перенос строки.

Для элементов LI зададим рубленый шрифт уменьшенного на 20% размера.

  
.menu
{
  list-style:none;    
  margin:0;           
  padding:3px 0;      
  white-space:nowrap; 
}
.menu LI
{
  display:inline;   
  font:0.8em Tahoma,sans-serif; 
}
      

Теперь осталось каждый элемент LI превратить в кнопку. Что делаем:

• определяем фоновый цвет;
• задаём внутренние отступы;
• назначаем рамку.

Файл style.css

.menu
{
  list-style:none;    /* Убираем маркеры */
  margin:0;           /* Убираем внешние отступы */
  padding:3px 0;      /* Убираем лишние внутренние отступы */
  white-space:nowrap; /* Запрещаем переносы */
}
.menu LI
{
  display:inline;   /* Превращаем LI в строчный элемент */
  font:0.8em Tahoma,sans-serif; /* Определяем шрифт */
  background:#fff2a6; /* Фон кнопки */
  padding: 2px 0.5em; /* Задаём внутренние  отступы */
  border:1px solid gray;     /* Рамка вокруг кнопки */
  border-left-color:#fff2a6; /* Убираем повтор рамки слева */
}

.menu LI.first
{
  border-left-color:gray; /* Восстанавливаем первую рамку */
}