Различия

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

@@ Строка 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;).

АйТи бубен

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

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

Различия

Инструменты страницы