www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Основы CSS (ЦСС) > Списки

Списки

контентовая версия  

С помощью CSS (ЦСС) можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.

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

Табл. 1. Свойства CSS (ЦСС) для управления видом списка
Свойство Значение Описание Пример
list-style disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
Вид маркера. Первые три используются для разработки маркированного списка, а остальные — для нумерованного. LI {list-style: circle}

LI {list-style: upper-alpha}
list-style-image none
URL
Устанавливает символом маркера любую картинку. LI {list-style-image: url(check.gif)}
list-style- position
outside
inside
Выбор положения маркера относительно блока строк контента. LI {list-style-position: inside}

Поскольку тег <LI> наследует стилевые свойства тега <OL> или <UL>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI. Так, в примере 1 используется селектор UL, для него и задаются стилевые параметры.

Пример 1. Создание маркированного списка

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Списки</title>
<style type="text/CSS (ЦСС)">
UL {
 list-style: square; /* Маркеры в виде квадрата */
 list-style-position: outside; /* Маркеры размещаются за пределами контентового блока */
 color: navy; /* Цвет контента списка */
}
</style>
</head>
<body>
<ul>
 <li>Заголовок должен быть короче трех строк.</li>
 <li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.</li>
 <li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно контента.

Рис. 1

Рис. 1. Вид списка, измененого с помощью стилей

Чтобы установить свое собственное изображение в качестве маркера применяется параметр list-style-image, как показано в примере 2.

Пример 2. Использование рисунков в качестве маркера

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Списки</title>
<style type="text/CSS (ЦСС)">
LI {
 list-style-image: url('images/check.gif'); /* Путь к файлу с маркером */
}
</style>
</head>

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

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

Рис. 2

Рис. 2. Имаги в качестве маркеров

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

Табл. 2. Возможные виды списков
Код ШТМЛ Пример
<li style="list-style: disc"> Что следует учитывать при тестировании с нашего сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность контента
<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. третий
Статья опубликована: 13.09.2009 Последнее обновление: 16.04.2009
Поиск по сайту
Основы CSS (ЦСС)
Разделы
Теги по теме

LI
Тег LI определяет отдельный элемент списка. Внешний тег UL или OL устанавливает тип списка — маркированный или нумерованный.

OL
Тег OL устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега LI.

UL
Тег UL устанавливает маркированный список. Каждый элемент списка должен начинаться с тега LI.

CSS (ЦСС) по теме

list-style
Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.

list-style-image
Устанавливает адрес Имаги, которое служит в качестве маркера списка. Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.

list-style-position
Определяет, как будет размещаться маркер относительно контента. Имеется два значения: outside — маркер вынесен за границу элемента списка и inside — маркер обтекается контентом.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект