Ol ul

Продолжим наши разговоры о началах html. В этой статье я хочу поговорить о том, как создавать абзацы, списки и заголовки в тексте. А так же, об одиночных тегах <br /> и <hr />.

Настоятельно советую ознакомиться с первым уроком этой серии, а так же, с вводной статьей о начале изучения html тем, кто еще не ознакомлен с ними.

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

Как всегда, план работы:

  1. Абзацы <p></p>
  2. Разрывы строк <br />
  3. Списки <ul></ul>, <ol></ol> и элементы списков <li></li>
  4. Заголовки
  5. Горизонтальные линейки <hr />

Абзацы <p></p>

Текст почти всегда состоит из абзацев. Абзац — это элемент текста, несущий законченную мысль.

В html абзац, как можно судить из заголовка, обозначается <p></p>. Буква «p» взята из слова «paragraph», что как-раз обозначает «абзац».


Рассмотрим пример:

<p>
Текст первого абзаца. Он содержит мысль. Но вот мысль закончилась.
</p>
<p>
Вот уже началась другая мысль и мы пишем ее в другом абзаце.
</p>

Как видно, применение абзацев очень просто и не требует особых комментариев. Если посмотреть этот код в браузере, то мы увидим две строки, между которыми есть одна пустая строка. В русских текстах, абзац принято отделять не пустой строкой, а смещением первой строки вправо. Но в Интернете часто применяется именно такое форматирование, поэтому часто его оставляют и в русскоязычных текстах. Однакое, если такое поведение не устраивает, его можно поменять при помощи CSS.

Разрывы строк <br />

Иногда требуется перевести строку, не заканчивая при этом мысль, не закрывая абзац. То есть, просто перейти на новую строку. Для этого есть одиночный тег <br />. Вот пример его применения:

<p>
Ветер весело гуляет<br/>
И кораблик подгоняет<br/>
Он бежит себе в волнах<br/>На поднятых парусах.
</p>

Этот фрагмет стихотворения А.С. Пушкина помог нам проиллюстрировать действие тега <br/>. Я специально последние две строки этого четверостишия разместил в одной строке кода, чтобы показать, что строки переносятся на новую строку не из-за того, что мы расставили переносы строк, а из-за того, что мы расставили теги <br/>. Этот тег совсем простой и не нуждается в подробных пояснениях, поэтому на этом мы закончим его обсуждать.


Списки <ul></ul>, <ol></ ol>и элементы списков <li></li>

Иногда в тексте нужно перечислить что-то. Для этой цели применяются три тега: ul, ol, li. Все эти теги контейнерные, но тег <li></li> всегда содержится в одном из контейнеров <ul></ul> или <ol></ol>, и не имеет смысла вне них. Контейнер ul применяется, когда нам не важен порядок перечисляемых позиций, и мы не хотим акцентировать внимание на порядке, в котором они идут. А тег ol, наоборот, акцентирует внимание на последовательности следования элементов, автоматически нумеруя каждую строку. Рассмотрим пример:

<ul>
   <li>Булка</li>
   <li>Пирожок</li>
   <li>Буханка</li>
   <li>Пирог</li>
</ul>

На экране браузера этот код будет выглядеть так:

  • Булка
  • Пирожок
  • Буханка
  • Пирог

Если мы просто заменим тег ul на тег ol, то получим нумерованый список:

<ol>
   <li>Булка</li>
   <li>Пирожок</li>
   <li>Буханка</li>
   <li>Пирог</li>
</ol>

Теперь это выглядит так:

  1. Булка
  2. Пирожок
  3. Буханка
  4. Пирог

Никто не запрещает вкладывать один список в другой, формируя вложенные списки с подсписками:

<ul>
Инструменты:
   <li>Пила</li>
   <li>Отвертки
      <ol>
         <li>Прямая</li>
         <li>Крестовая</li>
      </ol>
   </li>
   <li>Дрель</li>
</ul>

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

Конечно, как и все остальное, внешний вид этих элементов может быть изменен до неузнаваемости при помощи CSS.

Заголовки

Конечно, абзацы помогают в структурировании документов. Но для того, чтобы разбить большой текст на меньшие логические части, можно озаглавить каждую из них. Каждая часть может содержать еще подчасти, со своими заголовками нижнего уровня, и так далее. Для задания заголовка, служат теги <hx></hx>, где «x» — число от 1 до 6. Заголовок тем ниже уровнем, чем больше это число.
есть, заголовок самого верхнего уровня будет называться h1, а самого нижнего — h6. По-умолчанию, текст, находящийся в этих заголовках, отображается большим шрифтом с отступами. Этот текст отображается на всю строку, то есть теги hx являются блочными. У тега h1 шрифт самый крупный, а у тега h6 — самый мелкий. Как правило, на странице один, максимум — два тега верхнего уровня h1. С понижением уровня, количество тегов возрастает. Но редко какой веб-мастер сможет разбить текст так, что ему понадобятся заголовки 5 или 6 уровня. Даже 4 уровень применяется редко.

Меньше слов, больше дела!

<h1>Все меньше</h1>
<h2>и меньше</h2>
<h3>и меньше</h3>
<h4>и меньше</h4>
<h5>и меньше</h5>
<h6>и меньше…</h6>

Надеюсь, ситуация с заголовками теперь прояснилась.

dayte2.com

Как оформляются списки в HTML?

Списки бывают нумерованными и ненумерованными.

Нумерованные списки выводятся кодом:

<ol>Список с цифрами  	<li>пункт 1</li>  	<li>пункт 2</li>  	<li>пункт 3</li>  </ol>

Не нумерованные списки выводятся кодом:

<ul>Список с галочками или другими символами  	<li> пункт 1</li>  	<li> пункт 1</li>  	<li> пункт 1</li>  </ul>

Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей.


Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста.

Для нумерованного списка прописываются стили нумерации для каждого пункта.

Стандартные арабские цифры описываются значением decimal.

list-style-type: decimal; /*арабские цифры*/

Для маркерованного списка указывается стиль символов — квадратики или кружочки.

list-style-type: circle; /*кружки*/
list-style-type: square; /*квадраты*/

Каждому пункту меню можно назначить изображение.

list-style-image: url(‘путь к изображению’);

Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим.

Где стили списков прописаны в шаблоне Twenty Eleven?

Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */

Стандартный код выглядит вот так:

Ol ul

Как оформить нумерованный список?

Нумерованный список с использованием фона

Посмотрите вот на такое симпатичное оформление нумерованного списка.


Ol ul

Нравится? Давайте повторим.

Найдите стили для тега ol. Пропишите к нему новые свойства.

ol {  padding: 0px 0 0 20px;  margin: 0.5em 0 1.571em 1.9em;  color: #2E2E2E;  list-style-type: none;  font: 15px/17px Verdana, Arial, Helvetica, sans-serif;  z-index: 2;  counter-reset: point;  }     ol li {  margin-bottom: 4px;  line-height: 1.6;  color: #2E2E2E;  position: relative;  }     ol li:before {  margin-bottom: 4px;  counter-increment: point 1;  line-height: 1.6;  height: 24px;  margin-left: -36px;  left: 0px;  width: 24px;  margin-top: 1px;  background: #BDC3C7;  content: counter(point);  text-align: center;  position: absolute;  font-weight: bold;  }

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

list-style-type: none; — отключает вывод стандартных цифр
counter-reset: point; — задает переменную для счетчика нумерации
position: relative; — размещает нумерацию возле самих пунктов

before — псевдоэлемент для тега ol li. Имеет следующие стили:
content: counter(point); — выводит значение переменной
counter-increment: point 1; — увеличивает счетчик на 1
position: absolute;
background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
margin – внешние отступы
padding – внутренние отступы
color – цвет текста элемента
background – фон
text-align – выравнивание текста
font-weight – толщина (насыщенность) шрифта


В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы.

Нумерованный список с уникальным изображением для каждого пункта

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

Ol ul

Как это реализовано? Давайте рассмотрим следующий код:

/*первый номер*/  ol li:first-child {  list-style-image: url(путь к изображению с цифрой 1);  }     /*второй номер*/  ol li:nth-child(2n) {  list-style-image: url(путь к изображению с цифрой 2);  }     /*третий номер*/  ol li:nth-child(3n) {  list-style-image: url(путь к изображению с цифрой 3);  }     /*четвертый номер*/  ol li:nth-child(4n) {  list-style-image: url(путь к изображению с цифрой 4);  }  /*Далее прописываем точно также только для следующих номеров пунктов*/

В коде такого нумерованного списка нужно перечислить все номера пунктов и для каждого из них назначить уникальную иконку.

Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n).

Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li).


Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов.

Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой.

Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.

Как оформить маркированный (ненумерованный) список?

Маркированный список ul li с чередующимися иконками

Мне очень понравился вот такой маркированный список

Ol ul

ul {  padding: 11px 0 5px 0;  }     ul li {  padding-left: 32px;  margin-bottom: 10px;  font: normal 15px Verdana, sans-serif;  color: #2E2E2E;  line-height: 1.6;  border-bottom: 1px dashed #ccc;  padding-bottom: 10px;  }     ul li:before {  content: "";  position: absolute;  width: 27px;  height: 24px;  margin-left: -35px;  margin-top: -2px;  background: url('images/sprite.jpg') 0px 2px no-repeat;  list-style-type: circle;  }     ul li:nth-child(2n):before {  content: "";  position: absolute;  width: 27px;  height: 43px;  margin-left: -35px;  margin-top: -2px;  background: url('images/sprite.jpg') 0px -17px no-repeat;  list-style-type: circle;  }

Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента.


Для эксперимента можно назначить отступы:

ul li{  list-style-image: url(images/radio.png);  margin-left: 30px;  }

Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.

В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты.

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

Также каждому пункту можно назначить рамочки, фон, иконки. Только не перемудрите. Наша задача — не сразить всех наповал навороченным дизайном, а улучшить качество восприятия контента.

Как вывести на странице несколько списков с разным оформлением?

Иногда нужно разместить несколько списков с разными стилями.

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

Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили.

Вот, например, один симпатичный вариант оформления содержания:


Ol ul

В HTML вы пропишите список так:

<ol id="sod">Содержание  	<li>пункт 1</li>  	<li>пункт 2</li>  	<li>пункт 3</li>  </ol>

В CSS вы пропишите стили так:

ol#sod{  padding: 0px 20px 10px 51px;  margin: 0.5em 0 0em 1em;  color: #2E2E2E;  list-style-type: none;  background: #f1f4f5;  border-left: #BDC3C7 4px solid;  display: inline-block;  }     ol#sod li{}     ol#sod li:before{  font-weight:normal !important  }

Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого.

Используя в тексте несколько разных по оформлению списков, вы сделаете подачу информации еще интереснее. При перечислении каких-либо предметов можно задать одни иконки, а при перечислении действий — другие. Здесь уже дизайн ограничивается только вашей фантазией.

Эти методы применимы и в дизайне пунктов меню, рубрик и любых других элементов сайта.

foxyforex.ru

Предисловие

По умолчанию, в большинстве шаблонов данные списки имеют оформление простых цифр (нумерованный список ol li) и обыкновенных квадратиков и кружков черного цвета (ненумерованный, маркерованный список ul li).

«>

«>

Такие списки хорошо воспринимаются посетителями, ведь они структурируют контент на сайте. Но было бы гораздо лучшее, если вместо простых точек и квадратиков были полноценные иконки, которые в последнее время используются на продающих сайтах для повышение конверсии посетителя в покупателя.

С обычным сайтом ситуация аналогичная, ведь при использовании хорошо оформленных списков, конверсия посетителя в постоянного читателя и время проведенное на ресурсе увеличивается. Если вы посмотрите на большинство новых ресурсов, которые хорошо оформляют свой контент и достигают больших результатов в кратчайшие сроки, увидите у них красиво оформленные списки с индивидуальными иконками.

На моем блоге также списки оформлены. Ненумерованные имеют вид чек-боксов в рамке с чередованием цветов через один пункт.

«>

И сегодня я еще оформил нумерованный список, который имеет теперь не просто вид цифр, а они оформленные фоном, что значительно проще воспринимается и сразу замечается посетителем.

«>

Конечно, можно сделать нумерацию более привлекательной, но я остановился на таком варианте. Также можно делать не просто цифры на фоне, а для каждого номера списка назначит свою индивидуальную иконку. Это мы также рассмотрим. Теперь перейдем к практике.

Оформление нумерованного списка ol li

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

Например, если мы берем нумерованный список, то он будет иметь такую структуру с использованием тега ol.

Ненумерованный же список заключается в общий тег ul.

Каждому тегу присваиваются свои стили оформления, в которых обязательно прописаны отступы от обычного текста, ведь списки всегда имеют свои отступы слева, в отличии от обычного текста. Это общие правила оформления списков.

Также прописаны стили нумерации для каждого пункта списка.

Для маркерованного списка прописывают стиль в виде квадратиков или кружочков.

Для нумерованного списка применяется значение decimal для вывода стандартных арабских цифр (1, 2, 3…)

Все значения данного тега вы можете найти на сайте-учебнике по HTML.

Также имеется и свойство для назначения изображения к каждому пункту списка, а именно:

Именно его мы и будем использовать в первом варианте (их будет 2) для оформления ненумерованного списка, а сейчас перейдем к оформлению нумерованного.

Способ 1

Как мы уже выяснили, то нумерованный список создается с помощью тегом ol li. К тегу ol могут быть прописаны любые стили (выравнивание, фон, отступы), а вот с тегом li имеются некоторые сложности, так как при стандартной верстке шаблона, в большинстве случаев не получится просто так сделать фон для цифр или наложить на них иконки. Практически во всех шаблонах со стандартной версткой, номера пунктов никак не выводятся в исходном коде и выводятся с помощью стилей. Это затрудняет задачу, так приходится идти сложным путем.

Если бы каждый номер пункта выводился в исходном коде и был заключен в тег span (например), то можно было бы просто к тегу span в списке пунктов добавить с помощью стилей какое-то изображение или фон.

«>

В моем и в массе других шаблонов нет такой верстки, из-за чего не видно цифр в исходном коде, они не заключены ни в какой тег, а значит мы не сможет назначить тегу никаких стилей, так как его попросту не существует.

«>

На изображении моей верстки для списка вы видите, что номер не выводится. Цифры отображаются в стилях с помощью свойства list-style-type: decimal.

Придется заменить данное свойство на list-style-image. Тогда вместо цифр будут иконки, но вся загвоздка в том, что если мы пропишем данное свойство к общему тегу li, то будет отображаться одна и та же иконка для всех пунктов, а нам же необходимо своя иконка с цифрой на каждый пункт?

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

В первой строке кода к тегу li добавлен псевдокласс first-child, который обозначает первый номер. Далее к каждому следующему тегу добавлено свойство nth-child(An), где A — номер пункта в списке.

Таким образом нужно добавить в данный код все остальные номера пунктов и к каждому назначить свою уникальную иконку. Если в своих материалах вы иногда использовали 20 нумерованных пунктов в списках, то придется добавить минимум 20 раз псевдокласс nth-child(An). То есть последним псевдоклассом в стилях у вас будет nth-child(20n).

Данный способ действительно мудреный, так как придется много стилей добавить и найти очень много иконок с цифрами для каждого номера в списке. Но метод рабочий. Иконки можно найти в интернете или же самому создать.

Итак, плагин действий для реализации такого способа следующий:

  1. Находите в файле стилей строки, отвечающие за оформление нумерованного списка. Необходимо найти теги ol li;
  2. Дописываете в него псевдокласс first-child, как показано в коде выше. Копируете один раз, изменяете данное свойство на nth-child(An) и копируете то количество раз, скольким номерам необходимо назначить свою иконку. Затем проставляете номера для пунктов;
  3. К каждому номеру прописываете свойство list-style-image (см. выше) со своей уникальной иконкой.

После этого все должно работать, но имеется один момент. Иконки могут располагаться сильно далеко от пунктов или же накладываться. Тогда придется вам поработать с выравниванием и отступами иконок цифр или самого текста пунктов.

Теперь перейдем ко второму способу, который стоит у меня.

Способ 2

В данном случае мы можем использовать как иконки, так и фон. тут уже на порядок проще, так как не придется прописывать уникальное изображение для каждого пункта.

Будем использовать псевдоэлемент before, который выводит определенное содержимое перед элементом (в нашем случае пункт списка).

«>

Кстати, с помощью before у меня выводится слово «содержание» в оглавлении. Таким образом оно нигде не отображается в исходном коде и не повторяется в каждой статье.

Реализация похожа с предыдущей:

  1. Находим стили для общего тега таблицы стилей нумерованного списка (тег ol) и прописываем к нему свойства:
  2. Для тега каждого пункта внутри общей таблицы стилей (тег ol li) прописываем свойство для размещение нумерации возле самих пунктов — position: relative;
  3. Последним шагом дописываем псевдоэлемент before (смотрите пример ниже) для тега ol li и прописываем к нему следующие стили:

На практике у вас должен получится примерно следующий код. В ваших стилях будет и другое содержимое (выравнивание, отступы, размер шрифта, цвет и так далее). Я же показал лишь то, что необходимо добавить или изменить в ваших стилях.

Также в пример вам дам еще и свою часть стилей, которая прописана у меня для нумерованного списка. Может пригодится вам в том случае, если захотите использовать, просто изменив свои отступы и другие данные.

В принципе, эти стили могут подойти, но под себя вы должны отредактировать отступы, цвет шрифта, его размер, жирность, выравнивание и так далее.

Вот эти 2 способа я сам протестировал и все получилось. Если у вас возникнут вопросы, то обращайтесь в комментариях, а сейчас переходим к ненумерованному (маркерованному) списку.

Оформление ненумерованного списка ul li

Долго говорить здесь не буду, так как принцип абсолютно тот же. Ранее рассмотренные способы работают и тут, только стоит прописывать их к тегам ul li, а не ol li.

Вы можете просто назначит свойство list-style-image:url(путь к иконке) вместо стандартных стилей list-style-type. Но тогда проследите, чтобы были прописан внешний левый отступ от краев сайта, так как без него иконки попросту могут не отобразиться, а быть где-то вне зоны области контентной части. Можно для начала взять экспериментальные отступы, которые я даю в пример ниже.

Если хотите к каждой строке назначит чередование иконок, то смотрите в п.2 выше, как реализовать это с помощью свойства nth-child(An). Можно также назначит нижние подчеркивания для каждого пункта в маркерованном списке и так далее.

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

В коде вы можете видеть, что имеется всего лишь один псевдокласс nth-child(2n) со значением 2. Это означает, что к каждому четному пункту у меня другая иконка. Если же изменить значение 2n на 2n+1, то другая иконка будет у нечетных пунктов. Более подробно узнайте о данном псевдоклассе здесь.

Можете и для каждого пункта назначить фон, рамки, иконки и т.д. Все на ваше усмотрение. Но не стоит сильно мудрить. Сделайте все просто. Задача в оформлении списков не выпендриться и убить глаза, а сделать все отлично от других сайтов, чтобы увеличивать качество восприятия контента вашими посетителями.

Переходим к последнему пункту сего материала.

Несколько разно-оформленных списков на одной странице

Бывает, когда требуется не просто оформить списки, а разместить несколько разных по оформлению список на одной странице.

Если мы назначим общие стили, то одно оформление будет назначаться ко всем спискам. Ну, а допустим, что нам нужно разместить 2 списка, но, чтобы у одного были иконки чек-боксов, а у другого иконки в виде полноценных картинок. Как такое реализовать?

Все просто. Если вы посмотрите на мои материалы, то в начале каждого имеется содержание, оформленное с помощью фона и левой бордюры, но по сути, это тот же нумерованный список. Просто я ему назначил отдельный id, прописав его в html режиме.

«>

Затем в файл стилей прописал отличные стили от общих для всех списков.

Как видим, то просто необходимо скопировать стили для общего оформления списков, затем в скопированном варианте дописать название того ID, который добавили к тегу ul или ol, и изменить стили, чтобы оформление различалось.

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

Таким образом вы можете сделать материалы еще более интересней для чтения. Например, для пунктов, в которых идет перечисления каких-то предметов, сделать одни иконки. А для пунктов с перечислением действий, другие.

Итак, друзья! Данный материал можно заканчивать. Я не пытался вас научить премудростям CSS. Целью было лишь показать варианты индивидуального оформления списков, так как с этим имееются сложности и я сам когда-то помучился.

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

Напоследок хотел бы попросить вас оставить свой комментарий и оценить данный материал с помощью звездочек ниже. Если конечно вам данная статья помогла.

А на этом все. В следующей статье про дизайн мы поговорим об основных ошибках дизайна на сайте и о том, что вам сейчас пытаются «впарить» в мозг, некоторые блоггеры по поводу дизайна сайтов и блогов. Не пропустите.

Все. Пока.

С уважением, Константин Хмелев!

Ol ul

kostyakhmelev.ru

Создание HTML-списков

  • Содержание:
  • 1. Маркированный список <ul>
  • 2. Нумерованный список <ol>
  • 3. Список определений <dl>
  • 4. Вложенный список
  • 5. Многоуровневый нумерованный список

1. Маркированный список

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ul>
unordered list
Рис. 1. Маркированный список

2. Нумерованный список

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol>
Атрибут Описание, принимаемое значение
reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
<ol>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ol>
ordered list
Рис. 2. Нумерованный список

3. Список определений

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {margin-top: 1em; margin-bottom: 1em;}

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>   <dt>Режиссер:</dt>   <dd>Петр Точилин</dd>   <dt>В ролях:</dt>   <dd>Андрей Гайдулян</dd>   <dd>Алексей Гаврилов</dd>   <dd>Виталий Гогунский</dd>   <dd>Мария Кожевникова</dd>  </dl>
dl
Рис. 3. Список определений

4. Вложенный список

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

<ul>   <li>Пункт 1.</li>   <li>Пункт 2.   <ul>   <li>Подпункт 2.1.</li>   <li>Подпункт 2.2.    <ul>   <li>Подпункт 2.2.1.</li>   <li>Подпункт 2.2.2.</li>   </ul>   </li>    <li>Подпункт 2.3.</li>   </ul>   </li>   <li>Пункт 3.</li>  </ul>
ul ul ul
Рис. 4. Вложенный список

5. Многоуровневый нумерованный список

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

<ol>   <li>пункт</li> <!-1.->   <li>пункт    <ol>   <li>пункт</li> <!-2.1.->   <li>пункт</li> <!-2.2.->   <li>пункт   <ol>   <li>пункт</li> <!-2.3.1.->   <li>пункт</li> <!-2.3.2.->   <li>пункт</li> <!-2.3.3.->    </ol>   </li> <!-2.3.->   <li>пункт</li> <!-2.4.->    </ol>   </li> <!-2.->   <li>пункт</li> <!-3.->    <li>пункт</li> <!-4.->   </ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

ol {  /* убираем стандартную нумерацию */  list-style: none;   /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */   counter-reset: li;   }  li:before {  /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */  counter-increment: li;   /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */  content: counters(li,".") ". ";   }
numeric list
Рис. 5. Многоуровневый нумерованный список

html5book.ru

Традиционно топорный способ.

Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none;.

Далее в начало каждого элемента списка добавляется <span> с жестко забитым туда числом. После таких манипуляций можно легко задать css-свойства для вышеупомянутых span-ов.

css

li{  list-style: none; }  .num{  color: white;  background: #2980B9;  display: inline-block;  text-align: center;  margin: 5px 10px;  line-height: 40px;  width: 40px;  height: 40px; } 

html

<ol>  <li><span class="num">1</span> Посадить дерево </li>  <li><span class="num">2</span> Построить дом </li>  <li><span class="num">3</span> Вырастить сына </li> </ol> 

стилизованный список ol span

Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.

Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент ::before и css-свойства content, counter-increment, counter-reset.

Красивый и правильный способ.

Вначале мы приведем код и демку, а потом разберемся, что к чему.

css

ol{  counter-reset: myCounter; }  li{  list-style: none; }  li:before {  counter-increment: myCounter;  content:counter(myCounter);  color: white;  background: #2980B9;  display: inline-block;  text-align: center;  margin: 5px 10px;  line-height: 40px;  width: 40px;  height: 40px; } 

html

<ol>  <li> Посадить дерево </li>  <li> Построить дом </li>  <li> Вырастить сына </li> </ol> 

стилизованный список ol before

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

Давайте разберем по пунктам:

  • li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
  • counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого <ol>.
  • counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента ::before.
  • content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента ::before.

подробнее о css-счетчиках можно посмотреть в спецификации.

Вложенные списки и неограниченные возможности стилизации номеров строк.

Вот более интересный пример, сделанный по тому же принципу. Мы не будем приводить в статье html и сss, просто загляните в исходный код.

стилизованный список ol рецепт

html5.by

Поддержка браузерами

Описание

Нумерованный (упорядоченный) список — это HTML список, в котором порядок элементов имеет существенное значение. Примером может служить инструкция по установке веб-сервера, рецепты, оглавления книг и т.д., всё это относится к упорядоченным спискам.

Для создания нумерованного списка в HTML используется тег <ol> (ol сокращение от англ. ordered list — упорядоченный список), который информирует браузер, что все его содержимое, вплоть до закрывающего тега </ol>, представляет собой нумерованный список. Тег <ol> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.

Элементы для нумерованных списков определяются с помощью тега <li>, каждый такой элемент, помимо текстового содержимого, может включать в себя практически любые HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию нумерация элементов списка начинается с единицы и каждый следующий элемент, получает номер на одну единицу больше, чем предшествующий. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Маркированные (неупорядоченные) списки определяются с помощью тега <ul>.

Атрибуты

reversed:
Указывает, что элементы списка будут идти в порядке убывания (вместо порядка по возрастанию). Возможные значения логического атрибута:

  <ol reversed>  <ol reversed="reversed">  <ol reversed="">  

Примечание: атрибут reversed поддерживается только браузерами Chrome и Safari.

start:
Устанавливает начальное целочисленное значение, с которого будет начинаться нумерация элементов в списке. Пример »
type:
Определяет вид маркера, который будет использоваться для элементов списка:

  • 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> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

  ol {   display: block;   list-style-type: decimal;   margin-top: 1em;   margin-bottom: 1em;   margin-left: 0;   margin-right: 0;   padding-left: 40px;  }   

Пример

  <ol>    <li>Кофе</li>    <li>Чай</li>    <li>Молоко</li>  </ol>    <ol start="50">    <li>Кофе</li>    <li>Чай</li>    <li>Молоко</li>  </ol>  

Результат данного примера в окне браузера:

Пример использования тега <ol>

puzzleweb.ru

Списки в HTML (XHTML)

 Списки в HTML (XHTML) используются для оформления и форматирования видимой текстовой части html-документа. Дополнительно, на основании кодов списков, в HTML-разметке веб-страницы создаются и группируются элементы управления и навигации – кнопочки и менюшки (простые и выпадающие). Коды списков языка гипертекстовой разметки HTML ничем не отличаются от кодов списков XHTML…

  1. Код и видимая часть списков HTML
  2. Виды списков в HTML
    • Маркированный список
    • Нумерованный список
    • Список определений
    • Многоуровневые (вложенные) списки
    • Ненумерованные и немаркированные списки
    • Выпадающие списки
  3. Теги списков в HTML
    <ul>,<ol>,<li>,<dl>, dt>,<dd>
  4. Как создать список в html
  5. Примеры списков html
    • Маркированный | Теги <ul> и <li>
    • Нумерованный | Теги <ol> и <li>
    • Многоуровневые (вложенные) списки
    • Список определений | Теги <dl>, <dt> и <dd>
    • Ненумерованные и немаркированные списки

Код и видимая часть списков HTML

Равно как и все объекты веб-страницы, списки в HTML имеют две составляющие – код списка и его видимую часть (интерпретацию кода). Код списка HTML невидим пользователю. Код записывается в HTML-разметку веб-документа и интерпретируется браузером непосредственно на экран монитора пользователя – это будет видимая часть списка.

Виды списков в HTML

В HTML существует три вида списков – маркированный, нумерованный и список определений. Все виды списков могут быть многоуровневыми и содержать вложенные списки. Степень и вложенность списков определяется их кодом – порядком записи тегов.

Теги списков в HTML

Для создания кода списков в HTML используются теги:
<ul>, <ol> и <li>, а также <dl>, <dt> и <dd>
Все теги парные – закрывающий тег обязателен.
Теги списков в HTML создают и обозначают:

  • <ul> – маркированный список
  • <ol> – нумерованный список
  • <li> – элементы (строки) маркированного и нумерованного списков
  • <dl> – список определений
  • <dt> – элемент-термин в списке определений
  • <dd> – элемент-описание в списке определений

Как создать список в html

Чтобы создать список в веб-документе, нужно в его HTML-разметке написать html-код списка. Код любого html-списка начинается и заканчивается обрамляющими (оборачивающими) тегами (ol, ul, dl) которые указывают браузеру на вид списка. Между оборачивающими (обрамляющими) тегами располагаются элементы списка, обёрнутые, в свою очередь – тегами элементов списка (li, dd, dt).

Существует множество визуальных html-редакторов, облегчающих работу по созданию разнообразных списков. В этой статье, речь – непосредственно про коды списка на веб-странице. Выбор способа создания кода, в Notepad-е (блокноте) или в хитрющем html-редакторе – личное дело юзера. Практически все текстовые html-редакторы слишком упрощённо подходят к созданию html-списков.

Маркированный html-список | Теги <ul> и <li>

Код маркированного списка начинается с открывающего тега <ul>. Потом идут элементы, обрамлённые парными тегами <li></li>. Код маркированного списка заканчивается закрывающим тегом </ul>. Пример кода маркированного списка:

Маркированный (неупорядоченный) список по-англицки звучит, как Unordered List. Становится понятной аббревиатура его обрамляющего тега – <ul> (Unordered List). Написание тега <ul> заглавными литерами – <UL>. В спецификации HTML нет верхнего регистра. Правильно писать – <ul>

Нумерованный html-список | Теги <ol> и <li>

Код нумерованного списка ничем не отличается от кода маркированного списка, с той разницей, что обрамляющие список теги <ul> заменяются на <ol> (анг. Ordered List – нумерованный, упорядоченный список). Код нумерованного списка открывает тег <ol>. Внутри находятся элементы, обрамлённые парными тегами, вида <li>элемент</li>. Закрывается код нумерованного списка тегом </ol>. Пример кода нумерованного списка:

Многоуровневые (вложенные списки)

Вложенные (многоуровневые, ступенчатые) списки в HTML представляют наибольший интерес. Чтобы создать многоуровневый вложенный список в HTML, нужно в код одного списка вставить код другого списка. Код вложенного списка вставляется в виде отдельного элемента, между тегами <li></li>. Порядок и степень вложения не имеет значения. Допускается вкладывать маркированный список в нумерованный и наоборот, на любую глубину и пока не надоест. Браузер всё вытерпит. Пример кода многоуровневого списка со вложенными списками (код основного списка обозначен синим цветом, первого вложенного – жёлтым, второго вложенного – зелёным):

Список определений | Теги <dl>, <dt> и <dd>

Список определений (описаний, объяснений) – перечень терминов и пояснений к ним. Этот вид текстовой записи списка специально придуман для объяснения и описания терминов и определений, например – описания списка товаров. Список определений отличается от обычных списков. Элементы списка определений разделены на две части – слово (термин) и его описание (определение, пояснение для этого слова или термина).

Код списка определений начинается открывающим тегом <dl> (анг. Definition Lists – список определений). После него идёт элемент-термин списка, который требуется объяснить – этот элемент обрамлён парным тегом <dt></dt>. Дальше идёт текстовый объясняющий элемент списка, он обрамлён парным тегом <dd></dd>. Код списка определений заканчивается закрывающим тегом </dl>. Пример кода списка определений:

Для усиления визуального эффекта использован CSS,
который к данному коду не имеет никакого отношения.

Элементы списка определений не имеют бу́ллетов – специальных типографских знаков. В HTML, списки определений существует исключительно для создания описаний и оформления текстовой видимой части веб-документа. Маркированный и нумерованный списки значительно универсальней и разнообразней. Управление их внешним видом производится при помощи атрибутов тегов списка и атрибутов тегов элементов (строк) списка. Дополнительно, маркированный и нумерованный списки используются в html-разметке веб-страниц для создания и группирования элементов управления и навигации.

Ненумерованные и немаркированные списки

Список без ничего – без нумерации, маркировки и прочих списочных причиндалов (бу́ллетов), получится из маркированного или нумерованного списка, после присвоения последнему свойства list-style:none;

Более сложный способ скрыть/убрать бу́ллеты (маркеры) у списка – это добавить ему свойство overflow: hidden;, которое обрезает выступающую за пределы списка маркировку (нумерацию, или что там у него есть). Прим. Обрезание маркеров (overflow: hidden;) работает только за пределами списка – свойство list-style-position: outside; Это свойство устанавливается дефолтными настройками по-умолчанию для всех видов браузеров и, если специально нигде не указано другое (list-style-position:inside;) то тогда добавляем просто overflow: hidden;. Пример кода немаркированного и ненумерованного списка (<ul> или <ol>, не важно):

tehnopost.info

Нумерованные списки. Теги <ol> и <li>,

В HTML 5 используется три вида списков: нумерованный, маркированный и список определения.

Нумерованный список формируется парным тегом <ol> (от англ. ordered list). Сам элемент ‘ol’ используется, как контейнер для пунктов списка, которые формируются парными тегами <li> и располагаются друг за другом.

По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется атрибут start, который задает число, с которого будет начинаться нумерованный список. В качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут reversed, который используется без значений. Атрибут введен в HTML 5 и работает во всех браузерах, кроме IE.

Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут type, который может принимать значения «A | a | I | i | 1», которые, соответственно, означают:

  • заглавные латинские буквы,
  • строчные латинские буквы,
  • заглавные римские цифры,
  • строчные римские цифры,
  • арабские цифры.

Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS, использование атрибута type, по мнению автора, не целесообразно, хотя и допускается в HTML 5.

Использование нумерованного списка показано в примере 2.10.

 <!DOCTYPE html> <html> <head> 	<meta charset="utf-8">	 	<title>Нумерованный список</title> </head> <body> 	<em style="color: green">Весенние месяцы по порядку:</em> 	 	<ol start="3" title="Весенние месяцы"> 		<li>март</li> 		<li>апрель</li> 		<li>май</li> 	</ol> 	 	<em style="color: red">Летние месяцы в обратном порядке:</em> 	 	<!-- Перечисляем в обратном порядке. В IE не работает! --> 	<ol start="8" reversed> 		<li>август</li> 		<li>июль</li> 		<li>июнь</li> 	</ol> </body> </html> 

Пример 2.10. Использование элемента ‘ol’

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

Маркированные списки. Теги <ul> и <li>,

Маркированный список формируется парным тегом <ul> (от англ. unordered list). Сам элемент ‘ul’ используется, как контейнер для пунктов списка, которые формируются, как и в случае с нумерованными списками, парными тегами <li> и располагаются друг за другом.

Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей CSS. Что касается атрибута type, то его в HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события.

Код, содержащий элемент ‘ul’, показан в примере 2.11.

 <!DOCTYPE html> <html> <head> 	<meta charset="utf-8">	 	<title>Маркированный список</title> </head> <body> 	<em style="color: green">Весенние месяцы:</em> 	<!-- Задаем фон, чтобы визуально увидеть область,  	занимаемую списком, как блочным элементом --> 	<ul style="background-color: yellow"> 		<li>март</li> 		<li>апрель</li> 		<li>май</li> 	</ul> </body> </html> 

Пример 2.11. Использование элемента ‘ul’

Списки определений. Теги <dl>, <dt>, <dd>

Список определений формируется парным тегом <dl> (от англ. definition list). Сам элемент ‘dl’ используется, как контейнер для пунктов списка. Каждый такой пункт, в свою очередь, состоит из элементов ‘dt’ (от англ. definition term) и ‘dd’ (от англ. definition description), сформированных, соответственно, парными тегами <dt> и <dd>. Первый из них содержит определяемый термин, а второй – определение термина.

Давайте для наглядности посмотрим пример 2.12.

 <!DOCTYPE html> <html> <head> 	<meta charset="utf-8">	 	<title>Список определений</title> </head> <body> 		 	<dl title="Список из двух определений"> 		<dt>HTML</dt> 			<dd>Стандартный язык гипертекстовой разметки веб-документов, <br> 			который повсеместно используется во Всемирной паутине.</dd> 		 		<dt>CSS</dt> 			<dd>Формальный язык описания внешнего вида документа, <br> 			написанного с использованием языка разметки.</dd> 	</dl> </body> </html> 

Пример 2.12. Использование элемента ‘dl’

Вложенные списки

Иногда возникает необходимость создания вложенных списков, которые представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере 2.13.

 <!DOCTYPE html> <html> <head> 	<meta charset="utf-8">	 	<title>Вложенные списки</title> </head> <body> 	<!-- Пусть будет нумерованный список -->	 	<ol> 		<!-- В каждый пункт помещаем новый список --> 		<li>Три сорта яблок: 			<ul> 				<li>Антоновка,</li> 				<li>Штрефель,</li> 				<li>Кубань.</li> 			</ul> 		</li> 		<!-- А сюда поместим нумерованный список --> 		<li>Три сорта груш: 			<ol> 				<li>Чижовская,</li> 				<li>Вильямс,</li> 				<li>Дюшес.</li> 			</ol> 		</li> 	</ol> </body> </html>	 

Пример 2.13. Использование вложенных списков

Как видим, создавать вложенные списки совсем не трудно. Для этого нужно внимательно между открывающим тегом <li> и закрывающим тегом </li> для нумерованных и маркированных списков расположить вложенный список требуемого вида. Что касается списков определений, то вложенный список следует располагать между открывающим тегом <dd> и закрывающим тегом </dd>. Это может понадобиться, например, если нужно дать термину несколько определений.

belarusweb.net


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector