Ненумерованные
Здесь особых нововведений не наблюдается. Видом пульки тут управляет атрибут list-style-type. Стандарты прежние:
Так уж и быть пример:
<ul style=list-style-type:square> <li>Строка 1 <li>Строка 2 <li>Строка 3 </ul> |
|
Но есть одна деталь которая привлекает веб-мастера использовать CSS при составлении списков. Это возможность вставлять в виде пули любой рисунок. В HTML очень нехватало треугольничков, неправда ли?:-) Применяем атрибут list-style-image и получаем свободу фантазии:
<ul style=list-style-image:url(..\graphics\strelka.gif)> <li>Строка 1 <li>Строка 2 <li>Строка 3 </ul> |
|
Два выше перечисленных атрибута можно использовать совместно: если браузер не находит файл записанный в url(...), то он ставит списку тип пульки, описанный в list-style-type. Можно так же использовать атрибут list-style-image в тегах <li>. Так можно задать вид пули для каждой строки списка.
Нумерованные
Для этого вида списков тоже есть атрибут list-style-type. Он как и в HTML определяет тип нумерации. По этой табличке легко во всем разобраться:
HTML | CSS | Русския язык |
1 | decimal | Десятичные |
I | upper-roman | Большие римские |
i | lower-roman | Маленькие римские |
A | upper-alpha | Большие буквы |
a | lower-alpha | Маленькие буквы |
Тут сказать больше нечего.
Все списки
Ко всем видам списков применимы атрибуты, касающиеся оформления текста. И еще один интересный атрибут list-style-position, который показывает как располагается пулька (маркер) по отношению к тексту списка:
Похоже я выразил все мысли о создании списков в CSS
Предыдущий урок | Следующий урок