Инструменты пользователя
markirovannye_neuporjadochennye_i_numerovannye_spiski
Различия
Показаны различия между двумя версиями страницы.
|
markirovannye_neuporjadochennye_i_numerovannye_spiski [2018/07/07 13:03] |
markirovannye_neuporjadochennye_i_numerovannye_spiski [2020/06/13 13:46] (текущий) |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| + | ====== Маркированный список ul ====== | ||
| + | |||
| + | {{htmlmetatags> | ||
| + | metatag-description=(Маркированный, | ||
| + | }} | ||
| + | |||
| + | Маркированный список используется для группировки и выделения элементов, | ||
| + | |||
| + | Неупорядоченный список создается элементами двух типов: | ||
| + | * <ul> - Unordered List, неупорядоченный список. Данный элемент создает, | ||
| + | * <li> - List Item, элемент списка. | ||
| + | Тип маркера списка по умолчанию - •. Но это положение вещей можно легко изменить. Для указания типа маркера всего списка или его отдельного элемента, | ||
| + | * " | ||
| + | * " | ||
| + | * " | ||
| + | <note important> | ||
| + | |||
| + | ====== Нумерованный список ====== | ||
| + | Данный тип списка используется для форматирования перечня действий или элементов, | ||
| + | |||
| + | Нумерованный список создается точно так же, как и маркированный, | ||
| + | ====== Стили для форматирования списков ====== | ||
| + | Помимо стилевых правил для форматирования шрифта и цвета символов, | ||
| + | * **Свойство list-style-type** | ||
| + | Это свойство является заменой устаревшего атрибута type, о котором упоминалось в предыдущих разделах. Свойство list-style-type может принимать следующие значения: | ||
| + | |||
| + | * disc - маркировка в виде дика (замена type=" | ||
| + | * circle - маркировка в виде окружности (замена type=" | ||
| + | * square - маркировка в виде квадрата (замена type=" | ||
| + | * decimal - арабская (десятичная) нумерация (замена type=" | ||
| + | * upper-roman - римская нумерация в верхнем регистре (замена type=" | ||
| + | * lower-roman - римская нумерация в нижнем регистре (замена type=" | ||
| + | * upper-alpha - алфавитная нумерация в верхнем регистре (замена type=" | ||
| + | * lower-alpha - алфавитная нумерация в нижнем регистре (замена type=" | ||
| + | * none - маркер или нумерация отсутствует | ||
| + | Свойство стиля list-style-type можно применять одинаково как для форматирования маркированного, | ||
| + | |||
| + | Помимо дублирования значений отмененного атрибута type, с помощью стилей можно вообще запретить всяческую нумерацию или маркировку. Для этого используется значение none свойства list-style-type. | ||
| + | |||
| + | Ниже показан пример применения стиля для оформления нумерации списка в виде малых букв латинского алфавита: | ||
| + | |||
| + | Листинг: | ||
| + | < | ||
| + | <ol style=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | </ | ||
| + | |||
| + | * **Свойство list-style-image** | ||
| + | Еще одним эффектным способом визуального оформления списков является возможность использования графического маркера элемента списка. То есть, вместо использования нескольких скучных стандартных маркеров, | ||
| + | |||
| + | Изображение должно быть создано в формате *.jpg, *.gif или *.png. При использовании *.gif или *.png явным преимуществом является поддержка прозрачности - маркер становится более универсальным и может быть применен на web-страницах, | ||
| + | |||
| + | Предположим, | ||
| + | |||
| + | Листинг: | ||
| + | < | ||
| + | <ul style=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | </ | ||
| + | Если в стиле для списка одновременно указать и стандартный тип маркера и графический маркер, | ||
| + | <note important> | ||
| + | Для отмены графического маркера используйте свойство list-style-image со значением none: | ||
| + | |||
| + | < | ||
| + | ... | ||
| + | <li style=" | ||
| + | ... | ||
| + | </ | ||
| + | * **Свойство list-style-position** | ||
| + | Свойство стиля list-style-position позволяет управлять положением маркера или номера элемента по отношению к тексту элемента списка. Возможные значения: | ||
| + | |||
| + | * outside - маркеры расположенны снаружи по отношению к тексту (по умолчанию) | ||
| + | * inside - маркеры расположенны "в тексте" | ||
| + | ====== Многоуровневые списки ====== | ||
| + | <note important> | ||
| + | Многоуровневые списки используют в тех случаях, | ||
| + | < | ||
| + | Все о разметке | ||
| + | Предназначение разметки | ||
| + | Важность синтаксически корректных и правильных документов | ||
| + | Об элементах, | ||
| + | Дополнительная информация | ||
| + | Обзор структуры элементов | ||
| + | Общие атрибуты | ||
| + | Дополнительная информация | ||
| + | ... | ||
| + | </ | ||
| + | Для создания многоуровневого списка просто вложите в любой из элементов списка еще один список. Это и будет список второго уровня. Для создания третьего уровня, | ||
| + | |||
| + | Листинг: | ||
| + | < | ||
| + | <ul> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <ul> | ||
| + | < | ||
| + | < | ||
| + | <ul> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ul> | ||
| + | </li> | ||
| + | < | ||
| + | < | ||
| + | <ul> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </ | ||
| + | При выполнении примера вы, несомненно, | ||
| + | |||
| + | Одним из вариантов ее решения является использование стиля для вложенных списков: | ||
| + | |||
| + | Листинг: | ||
| + | < | ||
| + | <ol style=" | ||
| + | < | ||
| + | <ol style=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | </li> | ||
| + | < | ||
| + | <ol style=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | </li> | ||
| + | < | ||
| + | <ol style=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | </li> | ||
| + | < | ||
| + | <ol style=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | </li> | ||
| + | </ol> | ||
| + | </ | ||
| + | |||
| + | Для еще большего визуального отличия элементов первого и второго уровня, | ||