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

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


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 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;).