Добрый день всем на wmbn.ru! Продолжаем Уроки HTML, CSS, Div и в данной записи поговорим о Создание различных списков с помощью HTML и CSS (Советую почитать записи о Создании своего блока с помощью CSS и Div, а так же о Способах выравнивания данных в блоке). Еще в школе, на уроке информатики нас учили создавать нумерованные и маркированные списки в блокноте с помощью тегов Ol, Li, Ul, но постараемся как можно подробнее разобрать их и немного их видоизменить в CSS. Так же разберем интересные списки определений, которые создаются с использованием тегов Dl, Dt, Dd.

Создание нумерованного, маркированного и списка вложений с помощью HTML и CSS

Список — структурированная последовательность данных в столбчатом виде, которая отмечается различными символами (нумерация, маркировка и т.д.). То есть это данные, расположенные сверху вниз с отметками. Они нужны для того, чтобы показать последовательность действий в очень кратком формате, указать количество предметов или чего-нибудь, или просто предоставить информацию в столбчатом виде для облегчения восприятия информации, когда это необходимо.

Создание нумерованного списка — HTML теги Ol и Li

Нумерованный список создается с помощью тега Ol, внутри которого помещаются тег Li, задающий пункты (номера) для каждого подсписка. Этот тип чаще всего используется для перечисления объектов (в особенности их порядка), где более менее важна структуризация или знание численности объектов. Самый простой пример использования нумерованного списка:

<ol>
 <li>Один</li>
 <li>Два</li>
 <li>Три</li>
</ol>

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

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

<ol START=3>
 <li>Первый пункт начинается с числа 3</li>
 <li>Второй пункт - 4</li>
 <li>Третий пункт - 5</li>
</ol>

Нумерованный список без порядка

Так же можно поменять вид нумерации, задав другие обозначения для определения последовательности. Делается это заданием атрибута Type, который помещается внутри тега Ol. Есть несколько видов использования (замены стандартных цифр) данного атрибута:

<ol TYPE="A">
 <li TYPE="A">Нумерованный список задается</li>
 <li TYPE="B">Буквами Английского алфавита</li>
 <li TYPE="C">С помощью атрибута TYPE</li>
</ol>

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

В данном случае создаются нумированные пункты с использованием заглавных букв английского алфавита — это указано в теге Ol TYPE=»A», можно указать буквы в Li точно также — на вид это не повлияет. Чтобы использовать строчные буквы, достаточно указать в теге Ol атрибут TYPE=»a». Кроме того, можно задать и другие символы — I (для использования римских заглавных цифр) и i (для использования римских строчных цифр).

Создание маркированного списка с помощью Ul и Li

Маркированный список создается с помощью тегов Ul, внутри которого помещаются пункты, которые заключены в Li. Он используется (как я заметил) чаще лишь для перечисления без какой-либо последовательности и структуризации — достаточно лишь показать что находится и не более. Принцип построения маркированного списка такой же, как и в нумерованном — открываем тег Ul, который создает список и создаем строки с помощью Li:

<ul>
 <li>Первая строка</li>
 <li>Вторая строка</li>
 <li>Третья строка</li>
</ul>

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

Как и в случае с нумерованным списком, маркированный также имеет свои типы — disc (круг), square (квадрат), circle (окружность), которые пишутся после TYPE= .Для примера создадим список, пункты которого помечены кругами:

<ul TYPE="circle">
 <li>Первая строка</li>
 <li>Вторая строка</li>
 <li>Третья строка</li>
</ul>

Маркированный список с использованием circle

Если требуется для каждого пункта выделить свой маркер, то тип уже указываем не в теге Ul, а в li, то есть:

<ul>
 <li TYPE="circle">Первая строка - используется окружность</li>
 <li TYPE="square">Вторая строка - используется квадрат</li>
 <li TYPE="disc">Третья строка - используется круг</li>
</ul>

Типизированные маркированные списки

Создание списка определений тегами Dl, Dt и Dd

Следующий тип — список определений, который создается с помощью HTML тегов Dl, Dt, Dd. Название может ввести в заблуждение, поняв что это простое определение, которое в русском языке используется в виде Термин — пояснение. Но это не так, в данном случае определение имеет некий ступенчатый вид:

<dl>
<dt>Главная часть</dt>
<dd>Принадлежность к главной</dd>
</dl>

Список определений в HTML

На примере наглядно видно, что из себя представляет список определений. Создается он с использвоанием тега Dl, главная часть — Dt (она может быть не одна), а «принадлежащая» к главной — Dd. Удобно использовать такой тип, если нужно указать все главные категории (материнские) и прикрепить или показать второстепенные (дочерние).

Редактирование внешнего вида списка в CSS коде

Создать такие списки для простого HTML сайта не составит труда, однако для блога, который работает на WordPress это будет немного заковыристее, то есть — можно создать как нумерованный, так и маркированный прямо из WYSYWIG редактора TinyMCE, который уже установлен на WordPress или из автономных продуктов, допустим из Microsoft Live Writer. Но подвох заключается в файле style.css, в котором уже прописаны стили для каждого из типа списков (чаще всего для маркированного, но и бывает для нумерованного).

Приступим к редактированию стиля списков (файла style.css) — откройте Редактор файлов в меню Внешний вид на панели администратора. Откроется файл style.css — проанализируйте его и найдите в нем стили для ul, ol, li, но в данном случае нам потребуется лишь теги ul и li. В моем случае я нашел чуть ли не с десяток описания для маркированного списка, но пока пригодился только этот участок кода:

.entry ul li {
border-bottom:1px solid #d4dcdd;
background:url(/zoonews/code/kak-sozdat-spisok-s-pomoshhyu-tegov-ul-li-ol-tipy-spiskov/images/ico_entry.gif) no-repeat left 13px;
padding:7px 0 7px 15px;
}

Данный участок делает каждый пункт маркированного списка со своей маркировкой, которая указана в background:url файлом ico_entry.gif, следовательно, создавая список, то по умолчанию будет использоваться данный маркер (файл). Можно изменить его, назначив другой файл или просто удалить, тем самым сделав маркировку каждого пункта стандартными пометками HTML. Кроме этого после каждого пункта создается граница border-bottom шириной 1 пиксель и цвета, который указан в цифровом формате HEX.
Теперь про сам список, то есть про тег ul, который устанавливает начало маркированного списка:

.entry ul {
margin: 0 10px 15px 30px;
list-style: none;
padding:15px 15px 15px 20px;
background:#fff;
border:2px solid #d4dcdd;
}

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

Сделав изменения (программой Notepad++ или в панели администратора, управления Web хостингом), не забудьте сделать копию файла style.css, чтобы избежать неприятных последствий — не всегда возможно запомнить все параметры, которые установлены объекту.

Комментариев: 2

  1. West Blogger

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

  2. writer

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>