русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

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

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Списки в 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> Нумерованные с такими видами нумерации:
<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 внутреннего списка - с помощью встроенного.

Просмотров: 18741

Вы можете --> заказать сайт - полноценный или в качестве обучения для студентов.

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.