Инструменты пользователя

Инструменты сайта


markirovannye_neuporjadochennye_i_numerovannye_spiski

Различия

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

Ссылка на это сравнение

markirovannye_neuporjadochennye_i_numerovannye_spiski [2018/07/07 06:03] (текущий)
Строка 1: Строка 1:
 +====== Маркированный список ul ======
 +
 +{{htmlmetatags>​
 +metatag-description=(Маркированный,​ или еще неупорядоченный список ul HTML 5.)
 +}}
 +
 +Маркированный список используется для группировки и выделения элементов,​ но без указания их порядка. Например,​ это может быть [[Site navigation menu|Меню навигации сайта]]. Маркированный,​ или еще неупорядоченный список применяется для форматирования перечислений,​ последовательность элементов которых не имеет значения. К примеру,​ на странице требуется расположить перечень независимых друг от друга услуг, оказываемых некоторой организацией. ​
 +
 +Неупорядоченный список создается элементами двух типов: ​
 +  * <ul> - Unordered List, неупорядоченный список. Данный элемент создает,​ собственно,​ сам список,​ указывает его начало и конец.
 +  * <li> - List Item, элемент списка. ​
 +Тип маркера списка по умолчанию - •. Но это положение вещей можно легко изменить. Для указания типа маркера всего списка или его отдельного элемента,​ ранее использовали атрибут type. Атрибут type может принимать следующие значения: ​
 +  * "​disc"​ - маркер в виде диска. Используется по умолчанию.
 +  * "​circle"​ - маркер в виде окружности (внутри пустой)
 +  * "​square"​ - маркер в виде заполненного квадрата
 +<note important>​На данный момент атрибут **type** считается устаревшим и должен быть заменен таблицами стилей [[http://​htmlbook.ru/​css/​list-style-type|list-style-type]].</​note>​
 +
 +====== Нумерованный список ======
 +Данный тип списка используется для форматирования перечня действий или элементов,​ последовательность которых имеет значение. Например,​ пошаговое описание выполнения некоторого алгоритма,​ содержание статьи или книги (пронумерованный перечень глав). ​
 +
 +Нумерованный список создается точно так же, как и маркированный,​ только вместо элемента <ul> используется элемент <ol> - Ordered List, упорядоченный список. Тип нуменации по умолчанию - арабские цифры (1,2,3...). Поменять способ нумерации можно, используя устаревший атрибут type.
 +====== Стили для форматирования списков ======
 +Помимо стилевых правил для форматирования шрифта и цвета символов,​ рассмотренных на прошлом занятии,​ к списку и его отдельным элементам можно применить ряд специальных правил. Эти правила отвечают за назначение маркера или нумерации элементов списка,​ а, также, могут управлять положением маркера по отношению к элементу.
 +  * **Свойство list-style-type**
 +Это свойство является заменой устаревшего атрибута type, о котором упоминалось в предыдущих разделах. Свойство list-style-type может принимать следующие значения: ​
 +
 +  * disc - маркировка в виде дика (замена type="​disc"​)
 +  * circle - маркировка в виде окружности (замена type="​circle"​)
 +  * square - маркировка в виде квадрата (замена type="​square"​)
 +  * decimal - арабская (десятичная) нумерация (замена type="​1"​)
 +  * upper-roman - римская нумерация в верхнем регистре (замена type="​I"​)
 +  * lower-roman - римская нумерация в нижнем регистре (замена type="​i"​)
 +  * upper-alpha - алфавитная нумерация в верхнем регистре (замена type="​A"​)
 +  * lower-alpha - алфавитная нумерация в нижнем регистре (замена type="​a"​)
 +  * none - маркер или нумерация отсутствует ​
 +Свойство стиля list-style-type можно применять одинаково как для форматирования маркированного,​ так и для нумерованного списка. В принципе,​ можно маркированному списку (ul) дать нумерацию элементов,​ и наоборот - нумерованному (ol) присвоить маркер в виде диска, к примеру. Вопрос только в том, зачем? Сделав это вы грубо нарушите логику разметки. ​
 +
 +Помимо дублирования значений отмененного атрибута type, с помощью стилей можно вообще запретить всяческую нумерацию или маркировку. Для этого используется значение none свойства list-style-type. ​
 +
 +Ниже показан пример применения стиля для оформления нумерации списка в виде малых букв латинского алфавита: ​
 +
 +Листинг:​ Пример оформления списка с помощью стиля  ​
 +<​file>​
 +<ol style="​list-style-type:​ lower-alpha;">​
 +    <​li>​Элемент списка 1</​li>​
 +    <​li>​Элемент списка 2</​li>​
 +    <​li>​Элемент списка 3</​li>​
 +    <​li>​Элемент списка 4</​li>​
 +    <​li>​Элемент списка 5</​li>​
 +</ol>
 +</​file>​
 +
 +  * **Свойство list-style-image**
 +Еще одним эффектным способом визуального оформления списков является возможность использования графического маркера элемента списка. То есть, вместо использования нескольких скучных стандартных маркеров,​ вы сможете использовать собственноручно созданное изображение. ​
 +
 +Изображение должно быть создано в формате *.jpg, *.gif или *.png. При использовании *.gif или *.png явным преимуществом является поддержка прозрачности - маркер становится более универсальным и может быть применен на web-страницах,​ имеющих совершенно разные фоновые цвета или изображения. ​
 +
 +Предположим,​ что вы хотите использовать в качестве маркера изображение "​marker.gif",​ размерами 10х16 пикселей,​ расположенное в той же папке, что и XHTML страница. Код для достижения поставленной цели будет иметь следующий вид: ​
 +
 +Листинг:​ Использование графического маркера  ​
 +<​file>​
 +<ul style="​list-style-image:​ url(marker.gif);">​
 +    <​li>​Элемент списка 1</​li>​
 +    <​li>​Элемент списка 2</​li>​
 +    <​li>​Элемент списка 3</​li>​
 +    <​li>​Элемент списка 4</​li>​
 +    <​li>​Элемент списка 5</​li>​
 +</ul>
 +</​file>​
 +Если в стиле для списка одновременно указать и стандартный тип маркера и графический маркер,​ то сработает только графический,​ так как он имеет больший приоритет. ​
 +<note important>​При назначении графического маркера,​ установите,​ так же, стандартный маркер. Тогда, в случае отсутствия изображения маркера,​ форматирование списка будет производиться стандартным маркером.</​note> ​
 +Для отмены графического маркера используйте свойство list-style-image со значением none: 
 +
 +<​file>​
 +...
 +<li style="​list-style-image:​ none;"> ​
 +...
 +</​file>​
 +  * **Свойство list-style-position**
 +Свойство стиля list-style-position позволяет управлять положением маркера или номера элемента по отношению к тексту элемента списка. Возможные значения: ​
 +
 +  * outside - маркеры расположенны снаружи по отношению к тексту (по умолчанию)
 +  * inside - маркеры расположенны "в тексте"​
 +====== Многоуровневые списки ======
 +<note important>​Вкладывать элемент ul или ol необходимо только в элемент li. Нельзя вкладывать список в список непосредственно!</​note> ​
 +Многоуровневые списки используют в тех случаях,​ когда требуется отразить иерархическую структуру,​ подчинение одних элементов другим. Наиболее ярким примером многоуровневого списка может служить оглавление сложного документа: ​
 +<​file>​
 +Все о разметке ​
 +Предназначение разметки ​
 +Важность синтаксически корректных и правильных документов ​
 +Об элементах,​ атрибутах и объектах ​
 +Дополнительная информация ​
 +Обзор структуры элементов ​
 +Общие атрибуты ​
 +Дополнительная информация ​
 +...
 +</​file> ​
 +Для создания многоуровневого списка просто вложите в любой из элементов списка еще один список. Это и будет список второго уровня. Для создания третьего уровня,​ вложите список в элемент второго уровня. И так далее. Пример: ​
 +
 +Листинг:​ Многоуровневый неупорядоченный список  ​
 +<​file>​
 +<ul>
 +    <​li>​Элемент списка 1го уровня</​li>​
 +    <​li>​Элемент списка 1го уровня</​li>​
 +    <​li>​Элемент списка 1го уровня с вложенным списком
 +        <ul>
 +            <​li>​Элемент списка 2го уровня</​li>​
 +            <​li>​Элемент списка 2го уровня с вложенным списком
 +                <ul>
 +                    <​li>​Элемент списка 3го уровня</​li>​
 +                    <​li>​Элемент списка 3го уровня</​li>​
 +                    <​li>​Элемент списка 3го уровня</​li>​
 +                    <​li>​Элемент списка 3го уровня</​li>​
 +                </ul>
 +            </li>
 +            <​li>​Элемент списка 2го уровня</​li>​
 +            <​li>​Элемент списка 2го уровня</​li>​
 +        <ul>
 +    </li>
 +</ul>
 +</​file>​
 +При выполнении примера вы, несомненно,​ обратили внимание на тот факт, что типы маркеров для каждого уровня списка изменяются. Первый уровень маркируется как "​disc",​ второй - "​circle",​ третий и далее - "​square"​. Проделав тот же опыт с упорядоченными списками,​ вы убедитесь в том, что каждый следующий уровень списка не меняет тип нумерации. Эту задачу придется решать самостоятельно. ​
 +
 +Одним из вариантов ее решения является использование стиля для вложенных списков: ​
 +
 +Листинг:​ Многоуровневый упорядоченный список  ​
 +<​file>​
 +<ol style="​font-weight:​ bold;">​
 +    <​li>​Зима
 +        <ol style="​list-style-type:​ lower-alpha;​ font-weight:​ normal;">​
 +            <​li>​Декабрь</​li>​
 +            <​li>​Январь</​li>​
 +            <​li>​Февраль</​li>​
 +        </ol>
 +    </li>
 +    <​li>​Весна
 +        <ol style="​list-style-type:​ lower-alpha;​ font-weight:​ normal;">​
 +            <​li>​Март</​li>​
 +            <​li>​Апрель</​li>​
 +            <​li>​Май</​li>​
 +        </ol>
 +    </li>
 +    <​li>​Лето
 +        <ol style="​list-style-type:​ lower-alpha;​ font-weight:​ normal;">​
 +            <​li>​Июнь</​li>​
 +            <​li>​Июль</​li>​
 +            <​li>​Август</​li>​
 +        </ol>
 +    </li>
 +    <​li>​Осень
 +        <ol style="​list-style-type:​ lower-alpha;​ font-weight:​ normal;">​
 +            <​li>​Сентябрь</​li>​
 +            <​li>​Октябрь</​li>​
 +            <​li>​Ноябрь</​li>​
 +        </ol>
 +    </li>
 +</ol>
 +</​file>​
 +
 +Для еще большего визуального отличия элементов первого и второго уровня,​ к внешнему списку применен полужирный шрифт (font-weight:​ bold;). В каждом вложенном списке жирность шрифта возвращается в норму (font-weight:​ normal;).
  
загрузка...
markirovannye_neuporjadochennye_i_numerovannye_spiski.txt · Последние изменения: 2018/07/07 06:03 (внешнее изменение)