Lection_5

Содержание
Виды списков
Организация списков
Задание формата списков
Стилевое оформление списков
Позиционирование маркеров и нумерации
Графические маркеры

Виды списков
Виды списков:
нумерованные;
маркированные;
многоуровневые.

Организация списков
нумерованные
Создаются с помощью тега
…
Чтобы разделять элементы списка используется вложенный тег
…
Например,
Элемент списка 1
Элемент списка 2
Элемент списка 3

Пример
Код В браузере

Задание
Выведите перечень месяцев в виде нумерованного списка

Атрибуты
type
позволяет задать тип списка; может принимать значения:
1 – обычная нумерация арабскими цифрами;
А – нумерация прописными латинскими буквами;
а – нумерация строчными латинскими буквами;
I – нумерация римскими цифрами;
i – нумерация римскими цифрами, которые записываются строчными символами.
Например,
…
- нумерация будет проведена строчными латинскими буквами

Задание
Измените тип нумерации на прописные латинские буквы при отображении перечня месяцев

Атрибуты
start
Данный параметр задает, с какого номера нужно начинать нумерацию; причем номер всегда задается в виде числа, даже если нумерация ведется символьными обозначениями
Например,
…
- нумерация будет римской, выраженной строчными символами и начнется с iii

Задание
Измените стартовый номер нумерации при отображении перечня месяцев – с пятого условного номера (т.е. с «е»)

Атрибуты
У тега
может присутствовать атрибут value, который призван изменять порядок нумерации
Например, value=“9”>… - сделает данный элемент списка 9-м, даже если он шел пятым или двадцатым

Задание
При отображении перечня месяцев измените нумерацию - с сентября снова начните нумерацию с начала – с условного номера «а».

Организация списков
маркированные
Создаются с помощью тега
…
Чтобы разделять элементы списка используется вложенный тег
…
Например,
Элемент списка 1
Элемент списка 2
Элемент списка 3

Пример
Код В браузере

Атрибуты
type
позволяет задать тип маркера, используемого для организации списка; может принимать значения:
disk – маркер в виде закрашенного круга;
circle – маркер в виде незакрашенного круга;
square – маркер в виде закрашенного квадрата;
Например,
…
- список будет организован с помощью маркеров в виде закрашенных кружков

Задание
Измените список месяцев на маркированный с типом маркера в виде закрашенного квадрата

Вложенные списки
При организации вложенных списков важно соблюдать систему вложенности (как при работе с вложенными скобками);
Например,
Элемент списка 1
Элемент списка 2 – вложенный список
Элемент вложенного списка 1
Элемент вложенного списка 2
Элемент вложенного списка 3
Элемент списка 3

Пример
Код В браузере

Задание
Задайте произвольный многоуровневый список; измените для некоторых его элементов параметры: типы маркеров, порядок нумерации.
Например,

Стили
Через стили можно выбрать три типа маркеров:
диск (круглый маркер с заполнением)
окружность (круг, полый круглый маркер)
квадрат (квадрат с зарисовкой)

Стили
Для нумерованных списков предусмотрено шесть вариантов-схем нумерации:
decimal \\ 1, 2, 3,…
decimal-leading-zero \\ 01, 02, 03,…
upper-alpha \\ A, B, C,…
lower-alpha \\ a, b, c,…
upper-roman \\ I, II, III,…
lower-roman \\ i, ii, iii,…

Стили
Все эти варианты можно создать через CSS-свойство
list-style-type
Пример,
list-style-type: square;
list-style-type: upper-alpha;
! Можно использовать другие схемы нумерации, например, греческий

Стили
Данное стилевое свойство применяется при форматировании списков -
,
, но также применимо и к отдельно взятому элементу списка
Пример
li {list-style-type: square;}
.circle {list-style-type: circle;}

Стили
Данное стилевое свойство позволяет скрыть маркеры в том случае, когда, допустим, есть необходимость использовать собственные графические маркеры или если с помощью списка создается панель меню – тогда в наличии маркеров нет необходимости
Пример
list-style-type: none;

Стили
Используя свойство list-style-position, можно управлять размещением маркеров.
Ключевое слово outside\inside визуально выделяет список и каждый его элемент из всего текста.
Определить местоположение можно:
слева от текста пунктов списка, выделяя их обособленно (outside);
внутри текстовых блоков элементов списка (inside).

Пример
outside\inside

Стили
Изменить промежуток между маркером и текстом можно с помощью свойства padding-left
\\ об этом свойстве будем говорить позже
\\ она работает только если свойство list-style-position имеет значение outside или отсутствует вообще
В дальнейшем мы изучим свойства padding и margin, которые позволят более свободно работать с различными отступами по отношению к спискам

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

Стили
Синтаксис команды следующий:
list-style-image: url(путь к файлу)
list-style-image: url(images/bullet.jpg)
ВАЖНО: Путь определяется относительно таблицы стилей, а не веб-страницы

Задание
Нарисуйте собственные графические маркеры и на веб-странице создайте список, применив в качестве маркеров данные графические объекты