Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » List-style

Свойство list-style. Редактирование маркера в списке.

В этом уроке мы поговорим о редактировании списков. Дело в том что благодаря CSS можно с легкостью изменять их вид. Например, можно сделать из упорядоченного списка маркированный и наоборот. Рассмотрим основные свойства их форматирования:

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

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

В качестве примера предлагаю превратить упорядоченный список в маркированный и наоборот:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Свойство list-style-type в CSS</title>
<style type="text/css">
ol {list-style-type:square;}
ul {list-style-type: upper-roman;}
</style>
</head>
<body>
 <h2>Этот список был упорядоченным</h2>
 <ol>
   <li>Первый элемент</li>
   <li>Второй элемент</li>
   <li>Третий элемент</li>
   <li>Четвертый элемент </li>
 </ol>
 <h2>Этот список был маркированным</h2>
 <ul>
   <li>Первый </li>
   <li>Второй </li>
   <li>Третий</li>
   <li>Четвертый</li>
 </ul>
</body>
</html>

В результате вы получите следующий результат:

Применение свойства list-style-type в css

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

Свойство list-style-position определяет позицию маркера списка. Это свойство имеет всего два значения:

Синтаксис написания данного значения очень прост:

ul {list-style-position:inside}

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

Свойство list-style-image очень часто используется веб-разработчиками. Оно позволяет вместо маркера вставить своё изображение. Синтаксис написания данного свойства очень прост:

ul {list-style-image:url(primer.gif)}

Единственное следует правильно указывать путь к изображению. В данном случае файл изображения расположен в одной папке с файлом стилей.

list-style

Свойство list-style позволяет сократить запись всех вышеописанных свойств. То есть вместо:

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

Можно записать вот такую строчку:

ul {list-style:square url(primer.gif) inside}

Все значения свойств записываются через пробел, причем можно их записывать в любом порядке! Вообще списки в css обычно используются для создания меню навигации. И прописывается не одно свойство list-style, а сразу несколько. Например, это могут быть такие свойства, как background, float, padding и т.д. И в совокупности они уже дают именно тот визуальный эффект, который вам было нужно получить. В следующем уроке мы поговорим о классах в CSS.



наверх