Нумерованный и маркерованный список (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, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: