Как создать нумерованные и маркированные списки в html
Содержание:
- Использование CSS в маркированных списках
- Урок 8Списки HTML
- Нумерованный список
- Список с русскими буквами
- Создание многоуровневого списка в MS Word
- Как сделать списки в Ворде
- Создание собственных маркеров
- Создание маркированного списка в автоматическом режиме
Использование CSS в маркированных списках
Теперь разберем тот случай, когда мы хотим, чтобы наш список был в виде красивой галочки или «пули» (буллита). Мне понравилась следующая стрелочка
У себя на компьютере я подготовил уменьшенный ее вариант 15×15 пикселей. Разместим ее, чтобы наш список отображался с ней. Здесь мы будем пользоваться элементами стиля css и вставим внутрь тега Ul следующую конструкцию
<ul style=”list-style-image:url(‘https://smarticle.ru/wp-content/uploads/2013/10/strelka.png’);”>
| 1 | <ul style=”list-style-imageurl(‘https//smarticle.ru/wp-content/uploads/2013/10/strelka.png’);”> |
List-style-type это тип нашего стиля, url и ссылка – это источник откуда будет браться стиль. В нашем случае это картинка со стрелкой, которую я закачал к себе на сервер. Вы можете скопировать эту ссылку и прямо у себя в браузере увидеть итог. Не забывайте ставить одинарные кавычки и точку с запятой в конце и конечно закрывать все теги. Тогда все будет хорошо.
Код для вставки:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Использование стилей в маркированном списке</title>
</head>
<body>
<ul style=»list-style-image:url(‘https://smarticle.ru/wp-content/uploads/2013/10/strelka.png’);»>
<li>Декабрь</li>
<li>Январь</li>
<li>Февраль</li>
</ul>
</body>
</html>
|
1 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type»content=»text/html; charset=utf-8″> <title>Использованиестилейвмаркированномсписке</title> </head> <body> <ul style=»list-style-image:url(‘https://smarticle.ru/wp-content/uploads/2013/10/strelka.png’);»> <li>Декабрь</li> <li>Январь</li> <li>Февраль</li> </ul> </body> </html> |
В браузере получится вот так:
Очень красиво и стильно. Можно использовать в продающих текстах например на указание списка выгод и преимуществ. Если стрелка вам приглянулась, то скачать вы ее можете прямо из вложения в коде выше.
И наконец разберем тот случай, когда мы хотим использовать список html без маркеров, т.е оставить просто текст.
Здесь работает вот этот атрибут:
<ul type=»none»> т.е у нашего списка нет стиля
| 1 | <ul type=»none»>т.еунашегосписканетстиля |
Полный код элемента:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Список без стиля</title>
</head>
<body>
<ul type=»none»>
<li>Декабрь</li>
<li>Январь</li>
<li>Февраль</li>
</ul>
</body>
</html>
|
1 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type»content=»text/html; charset=utf-8″> <title>Списокбезстиля</title> </head> <body> <ul type=»none»> <li>Декабрь</li> <li>Январь</li> <li>Февраль</li> </ul> </body> </html> |
Должно получиться вот так:
На этом наш урок закончен.
Урок 8Списки HTML
Содержание урока
Списки HTML
Списки HTML
Этот урок сложнее предыдущего, поэтому советую не отвлекаться и максимально сконцентрироваться на материале. Списки бывают четырех видов. Это нумерованные списки, маркированные, многоуровневые и списки определений. Теперь давайте разберемся с каждым в порядке очереди. Наш урок будет состоять из 4-ех частей. Поехали!
Нумерованный список html.
Нумерованные списки html используются для перечисления позиций (элементов) списка которые располагаются строго по порядку и каждый имеет свой уникальный номер.
Нумерованный список открывается с помощью тега <ol> и закрывается соответственно тегом </ol>. Каждая отдельная позиция (элемент) списка находится внутри тега <li>. Теперь давайте сами создадим нумерованный список, код будет выглядеть так:
Сохраняем внесенные изменения в Notepad и открываем файл в браузере:
По умолчанию нумерация списка всегда начинается с 1. Если Вам необходимо, чтобы нумерация начиналась, например, с 5, то для тега <ol> нужно задать атрибут start и дать ему значение 5.
* С этого момента, когда мне будет нужно продемонстрировать Вам запись html кода — на рисунке будет изображен не весь код со структурой страницы, а только рассматриваемая нами часть кода. Я считаю, что сейчас Вы уже должны понимать, что теги, входящие в структуру html страницы — это обязательная составляющая. Если Вы забыли — смотрите урок 4.
По умолчанию элементы списка нумеруются при помощи цифр, однако стиль нумерации можно изменить используя для тега <ol> атрибут type, которому можно задавать значения 1, A, a, I, i.
1 - 1, 2, 3, 4... (задается по умолчанию) A - A, B, C, D... a - a, b, c, d... I - I, II, III, IV... i - i, ii, iii, iv...
К примеру, если мы хотим, чтобы наш список нумеровался при помощи маленьких латинских букв, то для тега <ol> нужно задать атрибут type со значением a. На практике это будет выглядеть так:
Маркированный список html.
Маркированные списки html используются для перечисления позиций (элементов) списка которые не требуют строгой нумерации и могут располагаться в произвольном порядке.
Маркированный список открывается с помощью тега <ul> и закрывается соответственно тегом </ul>. Каждая отдельная позиция (элемент) списка находится внутри тега <li>, так же, как и в случае с нумерованным списком.
По умолчанию элементы списка всегда маркируются черным кружком, стиль маркировки можно изменить используя для тега <ul> атрибут type, которому можно задавать значения disc, circle, square.
disc — ● (задается по умолчанию)
circle — ○
square — ■
Теперь давайте создадим список используя для маркировки черные квадратики (square).
Многоуровневый список html.
Многоуровневый список html — это список, который содержит в себе еще один или несколько списков. Многоуровневый список может состоять как из нумерованных, так и из маркированных списков. Чтобы его создать нужно один обычный список «вложить» в другой обычный.
Каждый отдельный элемент списка находиться между тегами
и
. Для создания многоуровневого списка нужно между этими тегами, помимо текста вставить еще один списокБез наглядного примера в этом сложно разобраться, так что все внимание на рисунок:
Мы сделали многоуровневый список из сочетания нумерованного и маркированного списка. Как видите в основе лежит нумерованный список, открывающийся тегом <ol> и закрывающийся тегом </ol>. Первый элемент нашего нумерованного списка открывается тегом <li>, затем, как обычно, идет текст, а далее вместо того чтобы закрыть элемент списка тегом </li>, мы вставляем еще один полноценный маркированный список. И только после этого мы закрываем элемент списка тегом </li>. Затем уже идут следующие элементы нашего основного нумерованного списка.
Список определений.
Список определений очень удобен при создании различных словарей или статей, содержащих в себе много терминов.
Список определений открывается тегом <dl> и закрывается тегом </dl>. Каждый отдельный термин заключается между <dt> и </dt>. Далее пишется определение к термину, оно находится между тегами <dd> и </dd>.
Сейчас мы сделаем список определений, состоящий из двух терминов. Код будет следующим:
Сохраняем изменения и смотрим результат в браузере:
* Вот мы и рассмотрели все варианты списков html. Из своего опыта могу сказать, что многоуровневые списки используются не часто, списки определений еще реже. Самое главное, что Вы должны из этого урока усвоить — это принцип составления списков. Настоятельно советую попрактиковаться с многоуровневыми списками.
Следующая страница Списки HTML.mp4
Нумерованный список
Нумерованные или упорядоченные списки представляют собой набор пунктов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов элементов <ol> (от англ. Ordered List), который и применяется для создания списка. Каждый пункт нумерованного списка обозначается элементом <li>, как показано ниже.
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
Если не указывать никаких дополнительных атрибутов и просто написать <ol>, то по умолчанию применяется список с арабскими числами (1, 2, 3,…), как показано в примере 3.
Пример 3. Создание нумерованного списка
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Нумерованный список</title>
</head>
<body>
<p>Бизнес-план</p>
<ol>
<li>Собрать кальсоны</li>
<li>?????</li>
<li>PROFIT</li>
</ol>
</body>
</html>
Результат данного примера показан на рис. 3.
Рис. 3. Вид нумерованного списка
Заметьте, что в нумерованном списке также добавляются автоматические отступы сверху, снизу и слева от текста.
В качестве нумерующих элементов могут выступать следующие значения:
- арабские числа (1, 2, 3, …);
- прописные латинские буквы (A, B, C, …);
- строчные латинские буквы (a, b, c, …);
- прописные римские числа (I, II, III, …);
- строчные римские числа (i, ii, iii, …).
Для указания типа нумерованного списка применяется атрибут type элемента <ol>. Его возможные значения приведены в табл. 1.
| Тип списка | Код HTML | Пример |
|---|---|---|
| Арабские числа | <ol type=»1″> <li>…</li> </ol> | 1. Чебурашка 2. Крокодил Гена 3. Шапокляк |
| Прописные буквы латинского алфавита | <ol type=»A»> <li>…</li> </ol> | A. Чебурашка B. Крокодил Гена C. Шапокляк |
| Строчные буквы латинского алфавита | <ol type=»a»> <li>…</li> </ol> | a. Чебурашка b. Крокодил Гена c. Шапокляк |
| Римские числа в верхнем регистре | <ol type=»I»> <li>…</li> </ol> | I. Чебурашка II. Крокодил Гена III. Шапокляк |
| Римские числа в нижнем регистре | <ol type=»i»> <li>…</li> </ol> | i. Чебурашка ii. Крокодил Гена iii. Шапокляк |
Чтобы начать список с определённого значения, используется атрибут start элемента <ol>. При этом не имеет значения, какой тип списка установлен с помощью type, атрибут start одинаково работает и с римскими и с арабскими числами. В примере 4 показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.
Пример 4. Нумерация списка
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Римские числа</title>
</head>
<body>
<ol type=»I» start=»8″>
<li>Король Магнум XLIV</li>
<li>Король Зигфрид XVI</li>
<li>Король Сигизмунд XXI</li>
<li>Король Хусбрандт I</li>
</ol>
</body>
</html>
Результат данного примера показан на рис. 4.
Рис. 4. Нумерованный список с римскими числами
Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу <li> следующим образом.
В таком случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с пяти.
Для value есть два вполне логичных условия использования:
- значение value должно быть целым числом;
- value можно добавлять только к <li> внутри списка <ol>.
В примере 5 показано использование атрибута value для создания обратной нумерации.
Пример 5. Атрибут value
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>value</title>
</head>
<body>
<ol>
<li value=»5″>Джентльмены удачи (1971)</li>
<li value=»4″>Бриллиантовая рука (1968)</li>
<li value=»3″>В бой идут одни «старики» (1973)</li>
<li value=»2″>Операция «Ы» и другие приключения Шурика (1965)</li>
<li value=»1″>Иван Васильевич меняет профессию (1973)</li>
</ol>
</body>
</html>
Результат данного примера показан на рис. 5.
Рис. 5. Обратный список
Нумерованный список всегда упорядочивается по возрастающей, но в редких случаях нам надо сделать обратный отсчёт и упорядочить нумерацию по убывающей. В таком случае к <ol> можно добавить атрибут reversed, как показано в примере 6.
Пример 6. Обратный список
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>reversed</title>
</head>
<body>
<ol reversed>
<li>Криминальное чтиво</li>
<li>Тёмный рыцарь</li>
<li>Крёстный отец 2</li>
<li>Крёстный отец</li>
<li>Побег из Шоушенка</li>
</ol>
</body>
</html>
Результат данного примера показан на рис. 6.
Рис. 6. Обратный список
Атрибут reversed не поддерживается браузерами IE и Edge.
Список с русскими буквами
Нумерованный список есть с латинскими буквами, а вот русских букв для списка нет. Их можно добавить искусственно, воспользовавшись вышеприведённым приёмом. Поскольку нумерация делается через стили, сам список остаётся исходным, к нему лишь добавляется выбранный класс, назовём его cyrilic (пример 4).
Пример 4. Код для создания списка
Добавление букв осуществляется с помощью псевдоэлемента ::before и свойства content. Поскольку в каждой строке должна быть своя буква, воспользуемся псевдоклассом :nth-child(1), в скобках пишется номер буквы. Первой буквой, естественно, идёт А, второй — Б, третьей — В и т. д. Весь этот набор добавляется к селектору li следующим образом (пример 5).
Пример 5. Применение псевдокласса :nth-child
В этом примере после каждой буквы идёт круглая скобка, все буквы строчные. Вы можете определить собственный вид нумерации списка, к примеру она может содержать заглавные буквы с точкой, с одной или двумя скобками или одни только буквы. В отличие от стандартной нумерации мы здесь вольны делать что угодно. Списка из десяти букв должно хватить практически для всех ситуаций, но если этого внезапно окажется мало, ничего не мешает расширить наш список, включив в него хоть все буквы русского алфавита.
Окончательно настраиваем выравнивание и положение букв, по желанию указываем размер шрифта, цвет и другие параметры (пример 6).
Пример 6. Список с русскими буквами
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Список</title>
<style>
.cyrilic {
list-style-type: none; /* Прячем исходную нумерацию */
}
.cyrilic li::before {
margin-right: 5px; /* Расстояние от буквы до текста */
width: 1em; /* Ширина */
text-align: right; /* Выравнивание по правому краю */
display: inline-block; /* Строчно-блочный элемент */
}
.cyrilic li:nth-child(1)::before { content: ‘а)’; }
.cyrilic li:nth-child(2)::before { content: ‘б)’; }
.cyrilic li:nth-child(3)::before { content: ‘в)’; }
.cyrilic li:nth-child(4)::before { content: ‘г)’; }
.cyrilic li:nth-child(5)::before { content: ‘д)’; }
.cyrilic li:nth-child(6)::before { content: ‘е)’; }
.cyrilic li:nth-child(7)::before { content: ‘ё)’; }
.cyrilic li:nth-child(8)::before { content: ‘ж)’; }
.cyrilic li:nth-child(9)::before { content: ‘з)’; }
.cyrilic li:nth-child(10)::before { content: ‘и)’; }
</style>
</head>
<body>
<ol class=»cyrilic»>
<li>Борщ</li>
<li>Котлеты из щуки</li>
<li>Кулебяка</li>
<li>Грибы в сметане</li>
<li>Блины с икрой</li>
<li>Квас</li>
</ol>
</body>
</html>
Результат данного примера показан на рис. 3.
Рис. 3. Русские буквы в списке
Плюсов у данного метода добавления нумерации много.
- Можно использовать буквы любого алфавита, не только русского.
- Мы сами определяем, включать в список спорные буквы, такие как Ё и Й, или нет.
- Вид нумерации и оформление букв устанавливается через CSS.
- Список легко расширить, а также сделать вложенные списки.
- Можно создать несколько списков разного вида и применять их в требуемых ситуациях или комбинировать между собой.
списки
Создание многоуровневого списка в MS Word
Многоуровневый список — это список, в котором содержатся элементы с отступами разных уровней. В программе Microsoft Word присутствует встроенная коллекция списков, в которой пользователь может выбрать подходящий стиль. Также, в Ворде можно создавать новые стили многоуровневых списков самостоятельно.
Выбор стиля для списка со встроенной коллекции
1. Кликните в том месте документа, где должен начинаться многоуровневый список.
2. Кликните по кнопке “Многоуровневый список”, расположенной в группе “Абзац” (вкладка “Главная”).
3. Выберите понравившийся стиль многоуровневого списка из тех, что представлены в коллекции.
4. Введите элементы списка. Для изменения уровней иерархии элементов, представленных в списке, нажмите “TAB” (более глубокий уровень) или “SHIFT+TAB” (возвращение к предыдущему уровню.
Создание нового стиля
Вполне возможно, что в числе многоуровневых списков, представленных в коллекции Microsoft Word, вы не найдете того, который бы вас устроил. Именно для таких случаев в этой программе предусмотрена возможность создания и определения новых стилей многоуровневых списков.
Новый стиль многоуровневого списка может быть применен при создании каждого последующего списка в документе. Кроме того, новый стиль, созданный пользователем, автоматически добавляется в доступную в программе коллекцию стилей.
1. Кликните по кнопке “Многоуровневый список”, расположенной в группе “Абзац” (вкладка “Главная”).
2. Выберите “Определить новый многоуровневый список”.
3. Начиная с уровня 1, введите желаемый формат номера, задайте шрифт, расположение элементов.
4. Повторите аналогичные действия для следующих уровней многоуровневого списка, определив его иерархию и вид элементов.
Примечание: Определяя новый стиль многоуровневого списка, в этом же списке вы можете использовать и маркеры и номера. К примеру, в разделе “Нумерация для этого уровня” вы можете пролистать перечень стилей многоуровневого списка, выбрав подходящий стиль маркера, который и будет применен к конкретному уровню иерархии.
5. Нажмите “ОК” для принятия изменения и закрытия диалогового окна.
Примечание: Стиль многоуровневого списка, который был создан пользователем, будет автоматически установлен в качестве стиля, используемого по умолчанию.
Для перемещения элементов многоуровневого списка на другой уровень, воспользуйтесь нашей инструкцией:
1. Выберите элемент списка, который нужно переместить.
2. Кликните по стрелке, расположенной около кнопки “Маркеры” или “Нумерация” (группа “Абзац”).
3. В выпадающем меню выберите параметр “Изменить уровень списка”.
4. Кликните по тому уровню иерархии, на который нужно переместить выбранный вами элемент многоуровневого списка.
Определение новых стилей
На данном этапе необходимо пояснить, в чем заключается разница между пунктами “Определить новый стиль списка” и “Определить новый многоуровневый список”. Первую команду уместно использовать в ситуациях, когда необходимо изменить стиль, созданный пользователем. Новый стиль, созданный с помощью этой команды, обнулит все его вхождения в документе.
Параметр “Определить новый многоуровневый список” крайне удобно использовать в случаях, когда нужно создать и сохранить новый стиль списка, который в дальнейшем не будет изменяться или же будет использоваться только в одном документе.
Ручная нумерация элементов списка
В некоторых документах, содержащих нумерованные списки, необходимо обеспечить возможность ручного изменения нумерации. При этом, необходимо, чтобы MS Word правильно изменял номера следующих элементов списка. Один из примеров документов такого типа — юридическая документация.
Для ручного изменения нумерации необходимо воспользоваться параметром “Задание начального значения” — это позволит программе корректно изменить нумерацию следующих элементов списка.
1. Кликните правой кнопкой мышки по тому номеру в списке, который нужно изменить.
2. Выберите параметр “Задать начальное значение”, а затем выполните необходимое действие:
- Активируйте параметр “Начать новый список”, измените значение элемента в поле “Начальное значение”.
Активируйте параметр “Продолжить предыдущий список”, а затем установите галочку “Изменить начальное значение”. В поле “Начальное значение” задайте необходимые значения для выбранного элемента списка, связанного с уровнем заданного номера.
3. Порядок нумерации списка будет изменен согласно заданным вами значениям.
Вот, собственно, и все, теперь вы знаете, как создавать многоуровневые списки в Ворде. Инструкция, описанная в данной статье, применима ко всем версиям программы, будь то Word 2007, 2010 или его более новые версии.
Как сделать списки в Ворде
Итак, как сделать списки в Ворде? Чтобы их успешно создать, будем придерживаться простой инструкции:
- пишете текст в Ворде;
- далее, наводите курсор компьютерной мыши перед любым словом в тексте;
- нажимаете на раздел «Главная» и выбираете виды списков левой кнопки мыши чуть ниже раздела «Рецензирование». Или через меню правой кнопки мыши;
- после этого появятся нужные Вам списки, которые можно установить.
Эту инструкцию в создании списков, мы будем использовать на практике.
Как сделать маркированный список в Ворде
В первую очередь создадим маркированный список. Открываете документ Word с текстом. Далее, нажимаете один раз перед текстом левой кнопкой мыши. Например, в начале предложения. И выбираете правой кнопкой мыши «Маркированный список» (Скрин 1).
На панели управления Ворд он отображается первым из других списков. После его нажатия Вы увидите в тексте точки перед словами (Скрин 2).
Это и будет маркированный список.
Как изменить текст в список
Текст можно изменить в список без использования списков Word. Если у Вас слова написаны в документе сплошным текстом, их можно разделить. Для этого нажимаете один раз мышкой перед словом, которого нужно опустить (Скрин 3).
Далее, жмёте кнопку «Enter» на клавиатуре, чтобы слово опустилось вниз и превратилось в список. Также Вы можете вручную проставить цифры в начале слова или английские буквы.
Как поменять стиль маркированного списка (внешний вид)
Маркированный список можно изменить на другой вид. Чтобы это сделать, нужно выделить текст с маркированным списком. Далее, нажмите на него вверху панели управления списков и выберите подходящий вид списка (Скрин 4).
Там есть разные виды маркированного списка:
- Список в виде галочки.
- Круг.
- Квадрат.
- Множество квадратов.
- Стрелка.
И другие доступные варианты. Если нажать на кнопку «Определить новый маркированный список», в другом окне можно установить параметры списка и загрузить свою картинку с компьютера. Нажимаете на раздел «Рисунок» и загружаете новый вид списка.
Как сделать нумерованный список в Ворде
Приступим к созданию нумерованного списка в тексте. Снова выделяете место в тексте, где нужно установить нумерованный список. Далее, нажимаете вверху текстового редактора Word на нумерованный список (Скрин 5).
Как видно на рисунке 5 нумерованный список успешно установился. Также Вы можете воспользоваться меню правой кнопкой мыши, чтобы выбрать вид списка.
Делаем нумерованный список, порядок работы
Разберём порядок работы с нумерованным списком. Когда Вы его установили, у Вас появится одна цифра в списке. Чтобы проставить все, необходимо нажать поочерёдно перед каждым словом левой кнопкой мыши и нажимать по нумерованному списку. После этого, все слова будут пронумерованы цифрами от 1 до 5 и больше.
После каждой фразы в тексте, можно нажимать кнопку «Enter», чтобы появилась цифра на следующей строке. И после неё написать какое-либо слово, предложение – цифра появится автоматически.
Как изменить номер в списке Ворд
Изменить номер в списке Ворд довольно просто. Выделяете нумерованный список. Далее, его открываете (Скрин 6).
Затем, выбираете из предложенных вариантов тот номер, который Вам нужен. Форматы номеров в документе разные. Внизу списков можно выбрать другие параметры для изменения номеров:
- Изменить уровень списка.
- Определить новый формат номера.
- Задать начальное значение.
Текстовый редактор Word, предлагает пользователям широкий выбор номеров для нумерованного списка.
Как сделать многоуровневый список в Ворде, варианты
Выберем несколько вариантов создания многоуровневого списка и как вернуться в исходное состояние.
Выделяем в документе заранее заготовленный текст. Далее, нажимаем на раздел «Многоуровневый список» и устанавливаем необходимый список (Скрин 7).
Создать многоуровневый список можно вручную. Устанавливаем курсор мыши в самом начале предложения и нажимаем клавишу на клавиатуре – «TAB» и стрелку вправо. После их нажатия, слова будут разделены на разные уровни. Вместе с тем, многоуровневый список будет выглядеть по-другому.
Чтобы вернуть текст или список в исходное состояние, выделите текст левой кнопкой мыши. И нажмите несколько раз горячие клавиши – «CTRL+Z». Все изменения со списком исчезнут и Вы можете заново начать с ним работу.
Как сделать списки в Ворде по алфавиту
В Ворде создаются списки по алфавиту. Они помогут сортировать списки по возрастанию и убыванию. Опять выделяем список в документе. Далее, нажимаем на функцию – «Сортировка» Параметры — «Абзац» и «Текст» оставляем без изменений (Скрин 8).
Затем, выбираете другие значения — «По возрастанию» или «По убыванию». После чего, нажимаем «ОК». Тогда Ваш список будет отсортирован по алфавиту.
Создание собственных маркеров
Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.
Синтаксис свойства следующий:
ol {
list-style-image : url('images/primer.png'); /* указываем относительный путь к изображению */
}
ul {
list-style-image : url('http://basicweb.ru/images/mini5.png'); /* указываем абсолютный путь к изображению */
}
Значение в скобках соответствует пути к изображению, которое вы планируете использовать в роли маркера. Путь к изображению может быть как абсолютный, так и относительный. При указании относительного пути, важным моментом является то, что его необходимо указывать относительно размещения таблицы стилей, а не страницы.
Если вы планируете оформить собственные маркеры, то вам придется использовать программу для редактирования графики, либо воспользоваться уже готовыми наборами
Обратите внимание на такой момент, который может произойти, даже если Вы все сделали правильно, изображение может не загрузиться на страницу, в этом случае необходимо отредактировать изображение таким образом, чтобы его фон стал прозрачным
Давайте рассмотрим пример использования собственных маркеров в документе:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования CSS свойства list-style-image</title>
.test {
list-style-image : url('http://basicweb.ru/images/mini5.png'); /* указываем абсолютный путь к изображению, которое будет использовано в качестве маркера */
}
</style>
</head>
<body>
<ul class = "test">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
</body>
</html>
В данном примере мы указываем абсолютный путь к изображению, которое будет использовано в качестве маркера.
Результат нашего примера:
Рис. 72 Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).
Создание маркированного списка в автоматическом режиме
Автоматическая функция маркирования упрощает задачу писателю, экономит время на выполнение лишних действий.
Настройка включения/выключения автоматической функции:
- Нажмите кнопку «Файл» и выберите параметры. В версии Word 2007 года вместо «Файл» находится кнопка «Office».
Нажимаем на кнопку «Файл» или «Office», переходим в «Параметры Word»
- Во вкладке «Правописание» нажмите на «Параметры автозамены».
Во вкладке «Правописание» нажимаем на «Параметры автозамены»
- Найдите раздел «Применять при вводе» и выберите стили маркированных списков.
Находим раздел «Применять при вводе», ставим галочки на нужные параметры, нажимаем «ОК»
- Подтвердите действие нажатием «ОК».
Для начала автоматического списка:
- Установите курсор на месте будущего списка.
Ставим курсор в начале строки
- Поставьте пробел или звездочку.
Ставим пробел или звездочку
- Нажмите пробел.
Единоразовая отмена функции возможна при нажатии выпадающей панели «Параметры автозамены».
