С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера любое изображение. Последняя возможность не поддерживается четвертой версией браузера Netscape Navigator.
В таблице перечислены свойства элементов, предназначенных для создания и изменения списков.
Свойство | Значение | NC | IE | Описание | Пример |
---|---|---|---|---|---|
list-style | disc |
4+ |
4+ |
Вид маркера. Первые три используются для создания маркированного списка, а остальные - для нумерованного. | LI {list-style: circle;} LI {list-style: upper-alpha;} |
list-style-image | none URL |
6 |
4+ |
Устанавливает символом маркера любую картинку. | LI {list-style-image: url(check.gif)} |
list-style position |
outside inside |
6 |
4+ |
Выбор положения маркера относительно блока строк текста. | LI {list-style-position: inside;} |
NC - Netscape Communicator; IE - Internet Explorer; 4+ означает версию 4 и выше.
Пример 1. Создание маркированного списка
|
В примере используются квадратные маркеры и их внешнее размещение относительно текста. Цвет - темносиний.
|
Пример 2. Использование изображений в качестве маркера
|
В качестве маркеров используется маленькая картинка.
|
Некоторые примеры создания различных списков приведен в таблице.
Код HTML | Пример |
---|---|
<li style="list-style: disk"> | Что следует учитывать при тестировании сайта:
|
<li style="list-style: circle"> | Что следует учитывать при тестировании сайта:
|
<li style="list-style: square"> | Что следует учитывать при тестировании сайта:
|
<li style="list-style: decimal"> | Нумерованный список с арабскими цифрами:
|
<li style="list-style: lower-roman"> | Нумерованный список с прописными римскими цифрами:
|
<li style="list-style: upper-roman"> |
Нумерованный список с заглавными римскими цифрами:
|
<li style="list-style: lower-alpha"> | Нумерованный список с прописными буквами латинского алфавита:
|
<li style="list-style: upper-alpha"> | Нумерованный список с заглавными буквами латинского алфавита:
|
[Назад] [Содержание] [Вперед]