Маркированный список css

Свойство list-style-type

Свойство list-style-type устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:

Свойство list-style-type
Значение Пример
disc
  • Пункт списка
circle
  • Пункт списка
square
  • Пункт списка
decimal
  • Пункт списка
decimal-leading-zero
  • Пункт списка
lower-roman
  • Пункт списка
upper-roman
  • Пункт списка
lower-alpha
  • Пункт списка
upper-alpha
  • Пункт списка
georgian
  • Пункт списка
  • Пункт списка
  • Пункт списка
cjk-ideographic
  • Пункт списка
  • Пункт списка
  • Пункт списка
none
  • Пункт списка

В таблице я указал два весьма необычных свойства: georgian и cjk-ideographic. Эти свойства используются регионально. Есть ещё несколько похожих любопытных значений этого свойства, например armenian или hiragana, но все их перечислять нет смысла.

Теперь пример использования этого свойства:

<!DOCTYPE html> <html> <head> 	<title>Свойство list-style-type.</title> <style> 	/* Меняем маркер списка */  ol{  list-style-type: square;  } </style> </head> <body>  <ol> 	<li>Первый пункт.</li> 	<li>Второй пункт.</li> 	<li>Третий пункт.</li> </ol>  </body> </html>

Обратите внимание, мы превратили нумерованный список <ol> в маркированный.

Свойство list-style-type
Рисунок 1. Свойство list-style-type.

Обязательно обратите внимание на значение none, это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.

Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.

Свойство list-style-image

Свойство list-style-image устанавливает символом маркера графический файл.

<!DOCTYPE html> <html> <head> 	<title>Свойство list-style-image.</title> <style> 	/* Меняем маркер списка на картинку */  ul{  list-style-image: url("http://komotoz.ru/_images/bullet_li.gif");  } </style> </head> <body>  <ul> 	<li>Первый пункт.</li> 	<li>Второй пункт.</li> 	<li>Третий пункт.</li> </ul>  </body> </html>

Вот результат работы этого кода:

Свойство list-style-image
Рисунок 2. Свойство list-style-image.

Мы видим, что теперь маркеры списка отмечены графическим файлом http://komotoz.ru/_images/bullet_li.gif.

Свойство list-style-position

Перед тем, как приступить к изучению этого свойства, более детально изучим модель форматирования элемента <ul>.

<!DOCTYPE html> <html> <head> 	<title>Форматируем список.</title> <style> 	/* Форматируем список */  ul{  border: 1px solid black; 	}  li{  border: 1px solid red;  padding: 3px;  margin: 5px auto;  } </style> </head> <body>  <ul> 	<li>Первый пункт.</li> 	<li>Второй пункт.</li> 	<li>Третий пункт.</li> </ul>  </body> </html>

Вот что мы видим:

Форматируем блок <ul>
Рисунок 3. Форматируем блок <ul>.

Тут важно обратить внимание на то, что маркеры списка выходят за границу блока элемента <li>, обрамлённого красной границей. Это может привести к неожиданным результатам, вот например обнулим внутренние отступы <ul>.

<!DOCTYPE html> <html> <head> 	<title>Форматируем список.</title> <style>  ul{  border: 1px solid black;  	/* Обнулим внутренние отступы */  	padding: 0;  	/* Отцентрируем по горизонтали */  	margin: 10px auto;  	/* Уменьшим ширину со 100% до 300px */  	width: 300px; 	}  li{  border: 1px solid red;  padding: 3px;  margin: 5px auto;  } </style> </head> <body>  <ul> 	<li>Первый пункт.</li> 	<li>Второй пункт.</li> 	<li>Третий пункт.</li> </ul>  </body> </html>

Вот что мы получим:

Форматируем блок <ul>
Рисунок 4. Форматируем блок <ul>.

Теперь маркеры списка вышли за пределы контейнера <ul>. Таким образом маркеры могут выйти и за пределы контейнера статьи, к которой принадлежит список, что нарушит внешний вид сайта.

Лучше бы поместить их внутрь контейнера <li>. Это бы решило данную проблему. Вот для этого и существует свойство list-style-position.

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

Свойство list-style-position
Значение Действие
list-style-position: inside Маркер внутри блока <li>.
list-style-position: outside Маркер снаружи блока <li> (по умолчанию).

По умолчания используется значение outside.

Применим это свойство к нашему примеру и поместим маркеры в блок <li>, установив этому свойству значение inside.

<!DOCTYPE html> <html> <head> 	<title>Свойство list-style-position.</title> <style>  ul{  border: 1px solid black;  	padding: 0;  	/* Управляем положением маркера */  	list-style-position: inside; 	}  li{  border: 1px solid red;  padding: 3px;  margin: 5px auto;  } </style> </head> <body>  <ul> 	<li>Первый пункт.</li> 	<li>Второй пункт.</li> 	<li>Третий пункт.</li> </ul>  </body> </html>

Вот что мы получили:

Свойство list-style-position.
Рисунок 5. Свойство list-style-position.

Теперь маркеры списка вложены в блок <li>.

Свойство list-style

Свойство list-style является сокращённой формой, позволяющей использовать значения всех трёх предыдущих свойств.

Пример: сделаем картинку маркером и поместим маркер внутрь блока пункта списка.

<!DOCTYPE html> <html> <head> 	<title>Свойство list-style.</title> <style> ul{ 	border: 1px solid black; 	padding: 0; 	/* Управляем списоком */ 	list-style: inside url("/images/bullet_li.gif"); } li{ 	border: 1px solid red; 	padding: 3px; 	margin: 5px auto; } </style> </head> <body>  <ul> 	<li>Первый пункт.</li> 	<li>Второй пункт.</li> 	<li>Третий пункт.</li> </ul>  </body> </html>

Вот результат:

Свойство list-style.
Рисунок 6. Свойство list-style.

Мы в одном свойстве list-style указали два значения: положение маркера и путь графичекого файла маркера.

Свойство list-style используют чаще всего, даже для задания одного значения. Оно короткое, его легко написать.

You May Also Like

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.