ОГЛАВЛЕНИЕ
1 Задание списков на Web-странице средствами HTML
1.1 Нумерованные списки
1.2 Ненумерованные списки
1.3 Списки-определения
2 Использование CSS для задания параметров списков
Пример №1
Пример №2
1. Задание списков средствами HTML
В текстовых документах используются списки (перечисления элементов) разных типов. HTML поддерживает списки трех видов:
- нумерованные списки;
- ненумерованные списки;
- списки-определения.
1.1. Нумерованные списки
Для задания нумерованных списков, т.е. таких списков, перед перечисляемыми элементами которых указываются или цифры, или буквы, в HTML используется тэг-контейнер <OL> . . . </OL> (OL - Ordered List, упорядоченный список). Он содержит два параметра:
- TYPE - задает тип нумерации:
- 1 - арабскими цифрами (задается по умолчанию);
- A - прописными латинскими буквами;
- a - строчными латинскими буквами;
- I - прописными римскими цифрами;
- i - строчными римскими цифрами.
- START - задает начало нумерации списка (по умолчанию - с первого элемента).
Сами элементы списка указываются с помощью тэга-контейнера <LI> . . . </LI> (LI - List Item, элемент списка). Закрывающий тэг </LI> можно не приводить.
В примере №1 показано задание вложенных списков средствами HTML (в их числе и нумерованные списки).
1.2. Ненумерованные списки
Для задания ненумерованных списков, т.е. таких списков, перед каждым перечисляемым элементом которых указыватся один и тот же знак, в HTML используется тэг-контейнер <UL> . . . </UL> (UL - Unordered List, неупорядоченный список). Он содержит параметр TYPE, значениями которого являются:
- DISC - диск (задается по умолчанию);
- CIRCLE - окружность;
- SQUARE - квадрат.
Элементы ненумерованных списков так же, как и элементы нумерованных списков, задаются с помощью тэга-контейнера <LI> . . . </LI> (см. пункт 1.1).
В примере №1 показано задание вложенных списков средствами HTML (в их числе и ненумерованные списки).
1.3. Списки-определения
Для задания списков-определений в HTML используется тэг-контейнер <DL> . . . </DL> (DL - Defination List, список определений). Для задания определений (например, фрукты) используется тэг-контейнер <DT> . . . </DT> (DT - Defination Type, тип определения ). Элементы определения перечисляются с помощью тэга-контейнера <DD> . . . </DD> (DD - Defination Data, определяемые данные). Закрывающий тэг </DD> можно не приводить.
В примере №1 показан HTML список.
Пример 1
<HTML>
<HEAD>
<TITLE> Использование списков на Web-странице </TITLE>
<LINK REL= STYLESHEET HREF="my.css">
<STYLE>
DT{color:#000070; font:italic 0.70cm}
DD{color:#006000; font:italic 0.60cm}
UL{color:#B00000; font:italic 0.55cm}
OL{color:#FF9090; font:italic 0.55cm}
</STYLE>
</HEAD>
<BODY>
<H1> Списки на Web-странице </H1>
<DL>
<DT> Списки, которые поддерживает HTML:
<DD> Ненумерованные с такими знаками перечисления:
<UL TYPE=square>
<LI> disc;
<LI> square;
<LI> circle.
</UL>
<DD> Нумерованные с такими видами нумерации:
<OL TYPE=a>
<LI> арабскими цифрами;
<LI> прописными латинскими буквами;
<LI> строчными латинскими буквами;
<LI> прописными римскими цифрами;
<LI> строчными римскими цифрами.
</OL>
<DD> Списки-определения.
</DT>
</DL>
</BODY>
</HTML>
Цвет, размер и тип шрифтов в списках в примере №1 заданы с помощью внутреннего задания CSS для тэгов DT, DL, UL и OL.
2 Использование CSS для задания параметров списков
Каскадные листы стилей CSS так же, как при форматировании теста, используются для расширения возможности HTML при задании параметров списков.
Для задания параметров списков в CSS имеется два свойства:
- list-style-type - задает такие виды знаков при перечислении элементов:
- disc - диск;
- circle - окружность;
- square - квадрат;
- decimal - арабские цифры;
- lower-roman - строчные римские цифры ;
- upper-roman - прописные римские цифры;
- lower-alpha - строчные латинские буквы;
- upper-alpha - прописные латинские буквы.
- list-style-image - задает произвольный (задаваемый разработчиком) знак при перечислении элементов списка в виде ссылки на файл, содержащий изображение знака, в виде list-style-image: url(ссылка).
Использование свойства list-style-image позволяет реализовать перечисление с использованием русских или украинских букв, задавая их в виде изображений.
В примере №2 показано использование свойств list-style-type и list-style-image.
Пример 2
<HTML>
<HEAD>
<TITLE> Создание списков с помощью CSS </TITLE>
<LINK REL= STYLESHEET HREF="my.css">
<STYLE>
.image{color:#000070; font:italic 0.5cm; list-style-image: url(tre1.gif)}
</STYLE>
</HEAD>
<BODY>
<H1> Списки на Web-странице </H1>
<P> CSS позволяет формировать на Web-странице списки:
<UL CLASS="image">
<LI> с заданием знаков перечесления с помощью свойства list-style-type:
<UL style="color:#000070; font:italic 0.5cm; list-style-type:decimal;
list-style-image:none">
<LI> disc;
<LI> square;
<LI> circle;
<LI> decimal;
<LI> lower-roman;
<LI> upper-roman;
<LI> lower-alpha;
<LI> upper-alpha.
</UL>
<LI> с заданием знаков перечисления в виде произвольных изображений (
) с помощью свойства list-style-image.
</UL>
</BODY>
</HTML>
Цвет, размер и тип шрифтов в списках в примере №2 заданы для тэга UL внешнего списка с помощью внутреннего задания CSS, для тэга UL внутреннего списка - с помощью встроенного.
