Списки


С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера любое изображение. Последняя возможность не поддерживается четвертой версией браузера Netscape Navigator.

В таблице перечислены свойства элементов, предназначенных для создания и изменения списков.

Свойство Значение NC IE Описание Пример
list-style

disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
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. Создание маркированного списка
<html>
<head>
<style type="text/css">
LI { list-style: square; list-style-position: outside; color: navy}
</style>
</head>

<body>
<ul>
 <li>Заголовок должен быть короче трех строк;
 <li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
 <li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;
<ul>
</body>
</html>

В примере используются квадратные маркеры и их внешнее размещение относительно текста. Цвет — темно-синий.

     
  • Заголовок должен быть короче трех строк;  
  • При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;  
  • Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;
Пример 2. Использование изображений в качестве маркера
<html>
<head>
<style type="text/css">
LI { list-style-image: url(images/check.gif); }
</style>
</head>

<body>
<ul>
 <li>Заголовок должен быть короче трех строк;
 <li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
 <li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;
<ul>
</body>
</html>

В качестве маркеров используется маленькая картинка.

     
  • Заголовок должен быть короче трех строк;  
  • При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;  
  • Перед использованием специального термина или слова, решите, будет ли оно понятно читателю;

Некоторые примеры создания различных списков приведен в таблице.

Код HTML Пример
<li style="list-style: disk"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style="list-style: circle"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style="list-style: square"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style="list-style: decimal">

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

  1. текст
  2. текст
  3. текст
<li style="list-style: lower-roman">

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

  1. текст
  2. текст
  3. текст
<li style="list-style: upper-roman">

Нумерованный список с заглавными римскими цифрами:

  1. текст
  2. текст
  3. текст
<li style="list-style: lower-alpha">

Нумерованный список с прописными буквами латинского алфавита:

  1. текст
  2. текст
  3. текст
<li style="list-style: upper-alpha">

Нумерованный список с заглавными буквами латинского алфавита:

  1. текст
  2. текст
  3. текст


Предыдущая статья     Следующая статья     Список статей