mutivseti.ru - правильный сайт о заработке в интернете!

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

Подробности

Опубликовано 06.01.2013 07:54

list-style-type

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

• disc - маркер в виде закрашенного круга;
• circle - маркер в виде незакрашенной окружности;
• square - чёрный квадрат в качестве маркера;
• decimal - маркеры в виде десятичных чисел (1, 2, 3,...,n);
• upper-roman - каждый маркер - большая римская цифра (I, II, III,...,N);
• lower-roman - каждый маркер - маленькая римская цифра (i, ii, iii,...,n);
• upper-alpha - маркеры задаются большими латинскими буквами (A, B, C,...,Z);
• lower-alpha - маркеры задаются при помощи малых латинских букв (a, b, c,...,z);
• none - маркер списка отсутствует.

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

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

 

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

Нумерованный список:

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

Маркированный (ненумерованный список):

• Первый элемент списка;
  
• Второй элемент списка;
  
• Третий элемент списка.
  

 

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

 

list-style-image

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

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

 

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

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

 

| следующая>>

 

---