Нумерованный и маркерованный список (list-style)

Маркированный <ul> и нумерованный <ol> списки могут иметь не только традиционные маркеры или цифры для обозначения пунктов, но и использовать особые маркеры, которые можно задать с помощью CSS. Разберём пример
<ul style="list-style-type: square;">
   <li>Мышь</li>
   <li>Кот</li>
   <li>Сыр</li>
</ul>
В этом коде используется свойство "list-style-type". Оно задаёт вид маркера. Его возможные значения аналогичны атрибуту type="..." ("disc" - чёрная точка, "circle" - кружок с пустотой внутри, "square" - чёрный квадрат. Смотрите статью "Списки (ul, ol, li)") . Результат будет такой:
  • Мышь
  • Кот
  • Сыр
У этого свойства существует ещё одно значение - это "none":
<ul style="list-style-type: none;">
   <li>Мышь</li>
   <li>Кот</li>
   <li>Сыр</li>
</ul>
Оно полностью убирает любы маркеры у списка:
  • Мышь
  • Кот
  • Сыр
Такое скрытие маркеров полезно при создании меню сайта. Обычно меню - это списки, но без маркеров.

Маркер в виде картинки

Существует возможность задать маркер в виде картинки. Делается это с помощью свойства "list-style-image", в значении которого можно указать url адрес фото (в том числе относительный адоес). Рассмотрим пример, в котором маркеры заменены на логотип этого сайта:
<ul style="list-style-image: url('/favicon.ico');">
   <li>Мышь</li>
   <li>Кот</li>
   <li>Сыр</li>
</ul>
В результате вместо маркеров появятся картинки:
  • Мышь
  • Кот
  • Сыр
Обратите внимание на то, что в значении свойства внутри атрибута были использованы одинарные кавычки, чтобы задать адрес картинки "...url( ' /favicon.ico ' );..". Если бы были использованы двойные кавычки, то браузер бы подумал, что атрибут style закончился. Но благодаря другому виду кавычек, свойство можно успешно записать в атрибут. Таким чередованием двойных и одинарных кавычек можно пользоваться в том числе и в JS скриптах внутри тегов, к примеру, onmousedown (читайте об этом подробнее в разделе JS скриптов).

Позиция маркеров

Маркеры списков находятся за пределами списков. Поэтому они могут выпадать за края контейнера, где находится список. Чтобы понять о чём идёт речь, лучше продемонстрировать на примере. Возьмём контейнер с чёткой рамкой и маркированный список с обнулёнными отступами для его пунктов. Используем для этого такой HTML код:
<div style="border: 3px solid #c0d2de;">
   <ul style="padding: 0px;">
      <li>Мышь</li>
      <li>Кот</li>
      <li>Сыр</li>
   </ul>
</div>
Результат будет такой:
  • Мышь
  • Кот
  • Сыр
Маркеры выпали за пределы области. Этм свойством они обладают по умолчанию. Но его можно переопределить с помощью CSS свойства "list-style-position". Если поставить его в значение "inside", то маркеры будут внутри списка. А если "outside", то снаружи списка, как в примере выше. Попробуем поместить их внутрь списка, добавим "list-style-position: inside;" к прошлому примеру:
<div style="border: 3px solid #c0d2de;">
   <ul style="padding: 0px; list-style-position: inside;">
      <li>Мышь</li>
      <li>Кот</li>
      <li>Сыр</li>
   </ul>
</div>
Результат будет такой:
  • Мышь
  • Кот
- теперь маркеры находятся внутри родительского контейнера и не выпадают за его пределы.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: