Маркированные и нумерованные списки: как сделать в html, css, как применить в копирайтинге

Форматирование

Тег Описание
<acronym> Не поддерживается в HTML5. Использовать <abbr> Вместо.Определяет акроним
<abbr> Определяет аббревиатуру или акроним
<address> Определяет контактные данные автора/владельца документа/статьи
<b> Определяет полужирный текст
<bdi> Изолирует часть текста, которая может быть отформатирована в другом направлении от другого текста за его пределами
<bdo> Переопределяет текущее направление текста
<big> Не поддерживается в HTML5. Вместо этого используйте CSS.Определяет большой текст
<blockquote> Определяет раздел, который цитируется из другого источника
<center> Не поддерживается в HTML5. Вместо этого используйте CSS.Определяет центрированный текст
<cite> Определяет название работы
<code> Определяет часть кода компьютера
<del> Определяет текст, который был удален из документа
<dfn> Представляет определяющий экземпляр термина
<em> Определяет подчеркнутый текст 
<font> Не поддерживается в HTML5. Вместо этого используйте CSS.Определяет шрифт, цвет и размер текста
<i> Определяет часть текста в альтернативный голос или настроение
<ins> Определяет текст, вставленный в документ
<kbd> Определяет ввод с клавиатуры
<mark> Определяет выделенный/выделенный текст
<meter> Определяет скалярное измерение в пределах известного диапазона (датчика)
<pre> Определяет предварительно отформатированный текст
<progress> Представляет ход выполнения задачи
<q> Определяет краткое предложение
<rp> Определяет, что отображать в обозревателях, не поддерживающих аннотации Ruby
<rt> Определяет объяснение/произношение символов (для восточно-азиатских типографии)
<ruby> Определяет аннотацию Ruby (для восточно-азиатских типографий)
<s> Определяет текст, который больше не является правильным
<samp> Определяет выборку выходных данных из компьютерной программы
<small> Определяет меньший текст
<strike> Не поддерживается в HTML5. Использовать <del> or <s> Вместо.Определяет текст зачеркивания
<strong> Определяет важный текст
<sub> Определяет текст с подстрочным текстом
<sup> Определяет текст с надписью
<template> Определяет шаблон
<time> Определяет дату и время
<tt> Не поддерживается в HTML5. Вместо этого используйте CSS.Определяет телетайп текст
<u> Определяет текст, который должен быть стилистически отличается от обычного текста
<var> Определяет переменную
<wbr> Определяет возможный разрыв строки

Маркированные списки

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента <ul> (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега <li>. Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры. Тег <ul> имеет следующий синтаксис:

В следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка:


Пример: Маркированный список

  • Результат
  • HTML-код
  • Попробуй сам »
  • Windows Movie Maker
  • Pinnacle VideoSpin
  • AviSynth
  • Avidemux

Внутри тега <li> не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.)

Написание чисел

По умолчанию нумерованный список имеет определённый вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 2 или нечто подобное.

Рис. 2. Вид нумерованного списка со скобкой

Стили позволяют поменять вид нумерации списков с помощью свойств content и counter-increment. Вначале для селектора ol требуется задать counter-reset: item, это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счётчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none.

Свойство content, как правило, работает в сочетании с псевдоэлементами ::after и ::before. Так, конструкция li::before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 2).

Пример 2. Создание своей нумерации

Свойство content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. counter-increment необходим для увеличения номера списка на единицу

Обратите внимание, что везде используется один и тот же идентификатор с именем item. Окончательный код показан в примере 3

Пример 3. Изменение вида списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Списки</title> <style> ol { list-style-type: none; /* Убираем исходные маркеры */ counter-reset: item; /* Обнуляем счетчик списка */ } li::before { content: counter(item) ‘) ‘; /* Добавляем к числам скобку */ counter-increment: item; /* Задаём имя счетчика */ } </style> </head> <body> <ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> </ol> </body> </html>

Приведённым способом можно делать любой вид нумерованного списка, например, брать число в квадратные скобки, в стилях при этом изменится только одна строка.

HTML Ссылки

HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши

HTML Теги

<!—> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> — <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

Виды маркеров

Виды маркеров нумерованного списка можно изменить с помощью атрибута . Данный атрибут поддерживает пять видов маркеров:

Значение Описание
1 Десятичные числа (1, 2, 3..)
a Список в алфавитном порядке, строчные буквы (a, b, c..)
A Список в алфавитном порядке, заглавные буквы (A, B, C..)
i Римские цифры, строчные (i, ii, iii, iv..)
I Римские цифры, заглавные (I, II, III, IV..)

Маркированные списки не имеют атрибута , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type, с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: или .

Изменение маркеров у списков:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>	
  <body>

    <h4>Нумерованный список c атрибутом type="a":</h4>
    <ol type="a">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>

    <h4>Нумерованный список c атрибутом type="I":</h4>
    <ol type="I">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>
	
	<h4>Виды маркеров маркированных списков:</h4>
	
    <ul style="list-style-type: circle;">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>
	
	<ul style="list-style-type: square;">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>

  </body>
</html>

Попробовать »

CSS свойство , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать 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 или его более новые версии.

Горизонтальное отображение списка

Иногда мы хотим отобразить списки горизонтально, а не вертикально. Возможно, мы желаем разделить список на несколько колонок, чтобы построить список навигации или разместить несколько пунктов списка в один ряд. В зависимости от содержания и желаемого внешнего вида есть несколько способов для отображения списков в виде одной строки, например, путём принятия значения свойства display для элементов <li> как inline или inline-block или через свойство float.

Отображение списка

Самый быстрый способ отобразить список на одной строке — это задать элементам <li> свойство display со значением inline или inline-block. Это поставит все элементы <li> в одну строку с одинаковым промежутком между каждым пунктом списка.

Если промежутки между элементами <li> доставляют проблемы, то они могут быть удалены с помощью тех же методов, что мы обсуждали в уроке 5, «Позиционирование содержимого».

Намного чаще мы будем использовать значение inline-block вместо значения inline. Значение inline-block позволяет легко добавлять вертикальные отступы и другое пространство к элементам <li>, в то время как значение inline нет.

При изменении значения свойства display на inline или inline-block, маркер списка, будь то точка, число или другое, удаляется.

HTML

CSS

Списки с float

Изменение значение свойства display на inline или inline-block быстро, однако это удаляет маркеры списка. Если они необходимы, то добавление float к каждому элементу <li> является лучшим вариантом, чем изменение свойства display.

Установка для всех элементов <li> свойства float как left выровняет горизонтально все элементы <li> непосредственно рядом друг с другом без каких-либо промежутков между ними. Когда мы используем float для <li>, маркер списка отображается по умолчанию и будет располагаться поверх элемента <li> рядом с ним. Чтобы предотвратить отображение маркера списка поверх других элементов <li>, должны быть добавлены горизонтальный margin или padding.

HTML

CSS

Демонстрация списка с float

Как и с любыми обтекаемыми элементами это нарушает поток страницы. Мы не должны забывать очищать float и возвращать страницу в обычный поток — наиболее распространённым методом через clearfix.

Пример навигационного списка

Мы часто разрабатываем и находим навигационные меню, в которых применяются неупорядоченные списки. Эти списки, как правило, располагаются горизонтально с помощью одного из двух методов, упомянутых ранее. Вот, к примеру, горизонтальное навигационное меню, размеченное с помощью неупорядоченного списка, в котором элементы <li> отображаются как inline-block.


HTML

CSS

Одноуровневый и многоуровневый список

(1) маркированный список (2) нумерованный список (3) многоуровневый список

На уроке 21 мы знакомились с этими кнопками

Но сейчас нам важно понять разницу при создании этих списков

Откройте скачанный документ. Я создала в документе таблицу из двух ячеек. В ячейках два абсолютно одинаковых текста. Ну просто старый знакомый текст! Приступим?

Можно выделить перетаскиванием, но я считаю, что это очень вредно для лучезапястной мышцы. Поступим следующим образом:

  1. Щёлкнем ЛМ перед словом «Отец» в первой ячейке
  2. Нажмём клавишу Shift на клавиатуре
  3. Щёлкнем ЛМ в конце слова «Йогурт»

Я рассказывала о различных видах выделения на уроке 2, но повторить никогда не помешает.

Кстати, вы обратили внимание, что зелёный кружок (похож на каракатицу) после слова «Йогурт» не выделился вместе с остальным текстом?

Вы обратили внимание, что положение отступа и выступа изменились? Я даже могу сказать на какую величину. Номер «отскочил» на 0,63 см (четверть дюйма), а текст «отскочил» на 1,27 см (половина дюйма)

На уроке 22 я подробно об этом говорила.

Шаг 3. Выделите текст во второй ячейке.

  1. Аккуратно подведём курсор к границе ячейки, пока курсор не превратиться в толстенькую наклонную стрелку, окрашенную чёрным цветом
  2. Щёлкнем ЛМ

Посмотрите: зелёный кружок после слова «Йогурт» выделен вместе со всем текстом.

  1. ЛМ+ Shift – выделяем часть текста в ячейке (ведь мы можем щёлкнуть ЛМ в любом месте текста, но в данном случае нам надо было выделить весь текст, вот мы щёлкнули после слова «Йогурт»)
  2. А вот чёрная толстенькая стрелочка выделяет всё (!) содержимое ячейки.

Давайте сделаем отметочку в памяти. Нам эта отметочка ещё пригодится, когда мы с вами доберёмся до таблиц.

Итак, мы имеем два абсолютно одинаковых списка. Ну разве что отступы у них разные

Вспомнили это окно? Мы подробно о нём говорили на уроке 22. Полюбовались на это диалоговое окно и нажали кнопку «Отмена».

И появляется диалоговое окно «Определение нового многоуровневого списка». Мы с этим окном знакомились на уроках 23, 24, 25. Скажете, что всё правильно? Разные списки – разные диалоговые окна?

Полюбовались на это диалоговое окно и нажали кнопку «Отмена».

Вывод В программе Word нет одноуровневого списка.

Все списки многоуровневые!

Напоминаю вам Урок 26. Уменьшить отступ или увеличить отступ. На самом деле эти кнопки повышают или понижают уровень в списке.

Разница между генератором и функцией в Python

Чтобы разобраться в различиях между генераторами и функциями, давайте сначала разберем разницу между ключевыми словами return и yield.

Когда интерпретатор доходит до ключевого слова return, выполнение функции полностью прекращается. Но когда он доходит до ключевого слова yield, программа приостанавливает выполнение функции и возвращает значение в итерируемый объект. После этого интерпретатор возвращается к генератору, чтобы повторить процесс для нового значения.

Кроме того, при прекращении выполнения функции ее локальные переменные стираются. В генераторах ситуация другая. Взгляните:

def mygen():
    i=7
    while i>0:
        yield i
        i-=1

for i in mygen():
    print(i)

Вывод:

7 6 5 4 3 2 1


С этим читают