Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Работа со списками в CSS


List-style-type

Данное свойство позволяет задать вид маркера элементов списка. Как всегда, может иметь несколько значений:

Все эти маркеры можно применять как к нумерованным, так и к маркированным спискам. Рассмотрим пример. Зададим таблицу стилей для нумерованного и маркированного списка следующего содержания:

ol {
list-style-type:disc;
}
ul {
list-style-type:upper-roman;
}

Теперь подключим эту таблицу к html-документу, содержание которого написано ниже:

<html>
 <head>
  <title>Необычное в списках</title>
  <link href="style7.css" type="text/css" rel="stylesheet">
 </head>
 <body>
  <p>Нумерованный список:</p>
  <ol>
   <li>Первый элемент списка;
   <li>Второй элемент списка;
   <li>Третий элемент списка.
  </ol>
  <p>Маркированный (ненумерованный список):</p>
  <ul>
   <li>Первый элемент списка;
   <li>Второй элемент списка;
   <li>Третий элемент списка.
  </ul>
 </body>
</html>

Получилось следующее. Теперь каждый элемент нумерованного списка маркирован чёрным кружком, а ненумерованного - большой римской цифрой.


List-stile-position

Свойство list-style-position определяет будет ли маркер находится внутри списка или снаружи. Может иметь 2 значения:

  1. inside - маркер находится внутри блока элемента списка;
  2. outside - маркер находится снаружи блока элемента списка.

Внизу рассмотрим 2 блока списков, первый - inside, второй - outside.

  1. Первый элемент;
  2. Второй элемент;
  3. Третий элемент.
  1. Первый элемент;
  2. Второй элемент;
  3. Третий элемент.

List-style-image

Это свойство позволяет вместо маркера поставить любое изображение. В качестве значения указывается слово url, затем в круглых скобках путь к изображению. К списку, расположенному ниже подключим рисунок, при помощи внутренней таблицы стилей.

Вот, кстати, и html-код с подключенной таблицей стилей, списка, размещённого выше:

<ul style="list-style-image:url(images/css/galka.gif); list-style-position:inside;">
<li> Первый элемент;
<li> Второй элемент;
<li> Третий элемент.
</ul>


Сокращённая форма записи свойства list-style.

Стиль списка вида:

ul {
list-style-position:inside;
list-style-image:url(galka.gif);
}

Можно представить как:

ul {
list-style:inside url(galka.gif);
}

Что задавать первым, позицию или рисунок - неважно! На этом всё.


<<Предыдущая | В раздел | Следующая>>