Урок 6: Списки

Главная|Учебник HTML|Учебник CSS|Новости|Вопрос/ответ|Советы|Ссылки|Downloadы|Анкета

Ненумерованные
Здесь особых нововведений не наблюдается. Видом пульки тут управляет атрибут list-style-type. Стандарты прежние:

Так уж и быть пример:

<ul style=list-style-type:square>
<li>Строка 1
<li>Строка 2
<li>Строка 3
</ul>
  • Строка 1
  • Строка 2
  • Строка 3

Но есть одна деталь которая привлекает веб-мастера использовать CSS при составлении списков. Это возможность вставлять в виде пули любой рисунок. В HTML очень нехватало треугольничков, неправда ли?:-) Применяем атрибут list-style-image и получаем свободу фантазии:
<ul style=list-style-image:url(..\graphics\strelka.gif)>
<li>Строка 1
<li>Строка 2
<li>Строка 3
</ul>
  • Строка 1
  • Строка 2
  • Строка 3

Два выше перечисленных атрибута можно использовать совместно: если браузер не находит файл записанный в url(...), то он ставит списку тип пульки, описанный в list-style-type. Можно так же использовать атрибут list-style-image в тегах <li>. Так можно задать вид пули для каждой строки списка.

Нумерованные

Для этого вида списков тоже есть атрибут list-style-type. Он как и в HTML определяет тип нумерации. По этой табличке легко во всем разобраться:

HTMLCSSРусския язык
1decimalДесятичные
Iupper-romanБольшие римские
ilower-romanМаленькие римские
Aupper-alphaБольшие буквы
alower-alphaМаленькие буквы

Тут сказать больше нечего.

Все списки
Ко всем видам списков применимы атрибуты, касающиеся оформления текста. И еще один интересный атрибут list-style-position, который показывает как располагается пулька (маркер) по отношению к тексту списка: