русс | укр

Мови програмуванняВідео уроки php mysqlПаскальСіАсемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование


Linux Unix Алгоритмічні мови Архітектура мікроконтролерів Введення в розробку розподілених інформаційних систем Дискретна математика Інформаційне обслуговування користувачів Інформація та моделювання в управлінні виробництвом Комп'ютерна графіка Лекції


Шановні українці! Матеріал був перекладений з російської мови. Тому можуть бути незначні помикли...

Списки в HTML

ЗАГОЛОВОК

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> addbaseНумеровані з такими видами нумерації:
<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 внутрішнього списку - за допомогою вбудованого.

Переглядів: 1492

Повернутися взміст


Онлайн система числення Калькулятор онлайн звичайний Науковий калькулятор онлайн