Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 14


Самоучитель по HTML и CSS

Добрый день.

На сайте htmlbook.ru обновился раздел с тегами HTML по адресу http://htmlbook.ru/html. Теперь все примеры (а их несколько сотен) валидны, иными словами соответствуют спецификации HTML, за исключением примеров с явно невалидными тегами или параметрами. Также к каждому тегу добавлена таблица, где показано, работает тег в популярных браузерах или нет.

Вы можете сделать онлайновый справочник еще лучше, если протестируете его. Присылайте свои предложения по адресу vlad@htmlbook.ru что следует добавить или, наоборот, убрать в справочнике. Приветствуются любые замечания касательно орфографических и логических ошибок.

11. Списки

Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.

Любой список представляет собой контейнер <UL>, который устанавливает маркированный список, или <OL>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <LI>.

Маркированный список

Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера <UL>, а каждый пункт списка начинается с тега <LI>, как показано ниже.

<ul>
 <li>Первый пункт</li>
 <li>Второй пункт</li>
 <li>Третий пункт</li>
</ul>

В списке непременно должен присутствовать закрывающий тег </UL>, иначе возникнет ошибка. Закрывающий тег </LI> хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.

В листинге  11.1 приведен код HTML для добавления маркированного списка на веб-странице.

Листинг 11.1. Создание маркированного списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Маркированный список</title>
</head>
<body>

<hr>
 <ul>
  <li>Чебурашка</li>
  <li>Крокодил Гена</li>
  <li>Шапокляк</li>
  <li>Крыса Лариса</li>
 </ul>
<hr>

</body>
</html>

Результат данного примера показан на рис. 11.1.

Рис. 11.1

Рис. 11.1. Вид маркированного списка в браузере Firefox

Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется параметр type тега <UL>. Допустимые значения приведены в табл. 11.1

Табл. 11.1. Стили маркеров списка
Тип списка Код HTML Пример
Список с маркерами в виде круга <ul type="disc">
<li>...</li>
</ul>
  • Первый
  • Второй
  • Третий
Список с маркерами в виде окружности <ul type="circle">
<li>...</li>
</ul>
  • Первый
  • Второй
  • Третий
Список с квадратными маркерами <ul type="square">
<li>...</li>
</ul>
  • Первый
  • Второй
  • Третий

Замечание

Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.

Создание списка с квадратными маркерами показано в листинге 11.2.

Листинг 11.2. Вид маркеров

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Маркированный список</title>
</head>
<body>

<p><strong>Изменение убеждений</strong></p>
<ul type="square">
<li>изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение – иудаизм и мусульманство вместе;</li>
<li>изменение веры в непогрешимость любимой партии;</li>
<li>убеждение в том, что инопланетяне существуют;</li>
<li>предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).</li>
</ul>

</body>
</html>

Результат данного примера показан на рис. 11.2.

Рис. 11.2

Рис. 11.2. Вид списка с квадратными маркерами в браузере Firefox

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

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега <OL>, который и применяется для создания списка. Каждый пункт нумерованного списка заключается в контейнер <LI>, как показано ниже.

<ol>
 <li>Первый пункт</li>
 <li>Второй пункт</li>
 <li>Третий пункт</li>
</ol>

Если не указывать никаких дополнительных параметров и просто написать тег <OL>, то по умолчанию применяется список с арабскими числами (1, 2, 3,...), как показано в листинге 11.3.

Листинг 11.3. Создание нумерованного списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нумерованный список</title>
</head>
<body>

<p><strong>Работа со временем</strong></p>
<ol>
 <li>создание пунктуальности (никогда не будете никуда опаздывать);</li>
 <li>излечение от пунктуальности (никогда никуда не будете торопиться);</li>
 <li>изменение восприятия времени и часов.</li>
</ol>

</body>
</html>

Результат данного примера показан на рис. 11.3.

Рис. 11.3

Рис. 11.3. Вид нумерованного списка

Заметьте, что в нумерованном списке также добавляются автоматические отступы сверху, снизу и слева от текста.

В качестве нумерующих элементов могут выступать следующие значения:

  • арабские числа (1, 2, 3, ...);
  • прописные латинские буквы (A, B, C, ...);
  • строчные латинские буквы (a, b, c, ...);
  • прописные римские числа (I, II, III, ...);
  • строчные римские числа (i, ii, iii, ...).

Для указания типа нумерованного списка применяется параметр type тега <OL>. Его возможные значения приведены в табл. 11.2.

Табл. 11.2. Типы нумерованного списка
Тип списка Код HTML Пример
Арабские числа <ol type="1">
<li>...</li>
</ol> 		1. Чебурашка
2. Крокодил Гена
3. Шапокляк
Прописные буквы латинского алфавита <ol type="A">
<li>...</li>
</ol> 		A. Чебурашка
B. Крокодил Гена
C. Шапокляк
Строчные буквы латинского алфавита <ol type="a">
<li>...</li>
</ol> 		a. Чебурашка
b. Крокодил Гена
c. Шапокляк
Римские числа в верхнем регистре <ol type="I">
<li>...</li>
</ol> 		I. Чебурашка
II. Крокодил Гена
III. Шапокляк
Римские числа в нижнем регистре <ol type="i">
<li>...</li>
</ol> 		i. Чебурашка
ii. Крокодил Гена
iii. Шапокляк

Чтобы начать список с определенного значения, используется параметр start тега <OL>. При этом не имеет значения, какой тип списка установлен с помощью параметра type, аргумент start одинаково работает и с римскими и с арабскими числами. В листинге 11.4 показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.

Листинг 11.4. Нумерация списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Римские числа</title>
</head>
<body>

<ol type="I" start="8">
<li>Король Магнум XLIV</li>
<li>Король Зигфрид XVI</li>
<li>Король Сигизмунд XXI</li>
<li>Король Хусбрандт I</li>
</ol>

</body>
</html>

Результат данного примера показан на рис. 11.4.

Рис. 11.4

Рис. 11.4. Нумерованный список с римскими числами


Рецепты CSS

Как изменить отступ слева от маркеров списка?

Добавьте параметр margin-left к селектору UL или OL, соответственно, для маркированного или нумерованного списка. Браузер Firefox одновременно с отступами добавляет к списку поля (параметр padding). Поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение атрибута padding.

Пример

<!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 {
 padding: 0px; /* Убираем поля для браузера Firefox */
 margin-left: 20px; /* Отступ слева */
}
</style>
</head>
<body>
<hr>
<ul>
 <li>Чебурашка</li>
 <li>Крокодил Гена</li>
 <li>Шапокляк</li>
</ul>
<hr>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Список сдвинут влево от своего исходного положения

Значение margin-left подбирается экспериментально исходя из собственных предпочтений. Допускается также использовать отрицательную величину, только учтите, что маркеры и текст могут при этом «уехать» за край окна браузера.

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное