Списки HTML | Оформление маркеров (буллетов)
Бу́ллет (англ. bullet) – типографский знак маркера списка
По внешнему виду бу́ллетов, cписки в HTML делятся на стандартные маркированные и нумерованные списки, списки без маркировки (бу́ллеты-маркеры отсутствуют) и списки с нестандартными бу́ллетами-картинками, взятыми со стороны
- Месторасположение бу́ллетов списка
- Расстояние от бу́ллета до текста списка
- Расстояние от бу́ллета до соседнего объекта
- Внешний вид бу́ллета (маркера) списка
Месторасположение бу́ллетов списка
Оформление внешнего вида бу́ллетов (маркеров) списка начинается с указания их месторасположения относительно текста списка. Бу́ллеты (маркеры) списка располагаются, либо в тексте списка, либо за его пределами. За местоположение бу́ллетов отвечает CSS-свойтво элемента списка list-style-position. Этот малоприменяемый тег может наделать много проблем, например – с обтеканием картинки списком. Свойство list-style-position имеет два значения, outside – маркер (бу́ллет) находится за границей элементов списка и inside – маркер расположен внутри элемента и обтекается его текстом. По-умолчанию, list-style-position равен outside – маркер за пределами текста списка. К этому все давно привыкли и забыли про list-style-position:inside; Для наглядности происходящего, я взял текст элемента списка в рамку (свойство border:2px solid #000;).
list-style-position:outside;
list-style-position:inside;
Расстояние от бу́ллета (маркера) до текста списка
Расстояние от бу́ллета (маркера) до текста элемента списка задаётся дефолтными настройками у каждого браузера. Отступы от маркера до текста элемента могут отличаться для разных видов и версий браузеров. Небольшой css-код позволяет добиться кроссбраузерного отображения списков и изменить значение дефолтных отступов на свои собственные. Примечательно, что внешний вид списка разительно меняется, в зависимости от назначенного свойства outside/inside. Тут самое время для смелых опытов и экспериментов:
Расстояние от бу́ллета до соседнего объекта
При попытке отрегулировать зазор между маркером и текстом списка (Расстояние от бу́ллета до текста списка), было замечено, что внешний вид списка сильно изменяется, в зависимости от назначенного свойства outside/inside. Вернее, меняется не сам вид списка, а его контакт с соседними объектами. Попробуем разобраться, почему так происходит и откуда такая беда.
Зависимость кода от местоположения буллета (outside/inside) объясняется тем, что по-
Внешний вид бу́ллета
Буллеты html-списков могут принимать числовой вид, простых маркеров, не отображаться совсем или иметь вид произвольной картинки-изображения.
Маркеры списка
ffffffffffff
Номерация списка
sssssssssssss
Списки без бу́ллетов
(Немаркированные и ненумерованные списки)
Наиболее важные и применяемые атрибуты тега <li> и <dd> в XHTML
start – задает число, с которого будет начинаться нумерованный список. Используется, для начала нумерованного списка с заданного номера.
value – задает число, с которого будет начинаться или продолжаться нумерованный список. Используется для разрыва нумерованного списка и нового начала нумерации с заданного номера.
title – добавляет всплывающую подсказку при наведении курсора
style – устанавливает таблицу стилей (для CSS)
id – задает уникальный идентификатор (для CSS)
class – определяет имя используемого класса (для CSS)
type – устанавливает вид маркера для нумерованного или маркированного списка. Атрибут type считается устаревшим и поддерживается не всеми браузерами. Для задания вида маркера рекомендуется использовать атрибут style и каскадные таблицы стилей CSS, где и прописывать нужный вид маркера. Поэтому, ниже приведенные примеры могут отображаться некорректно.
Значения type для маркированного списка
disc – маркер-диск (по умолчанию)
circle – маркер-круг
square – маркер-квадрат
Значения type для нумерованного списка
A – заглавные латинские буквы
a – строчные латинские буквы
I – заглавные римские цифры
i – строчные римские цифры
1 – арабские цифры (по умолчанию)
Примитивный пример использования вышеописанных атрибутов:
(взят для примера вложенный список, чтобы побольше вариантов вошло за один раз)
<ul title="Пример РАСПРОСТРАНЕНИЯ СВОЙСТВ РОДИТЕЛЬСКОГО ЭЛЕМЕНТА НА ДОЧЕРНИЕ ЭЛЕМЕНТЫ. Эта строка записана в тайтле списка, но отсвечивает на каждом его элементе">
<li type="A">Раз элемент (основной список)</li>
<li type="A">Два элемент (основной список)</li>
<li type="A">Три элемент (основной список)</li>
<li>
<ol type="i">
<li>Раз элемент (вложенный список)</li>
<li>Два элемент (вложенный список)</li>
<li>Три элемент (вложенный список)</li>
<li>Четыре элемент (второй вложенный список)</li>
<li value="49" >Пять элемент (второй вложенный список)</li>
<li>Шесть элемент (второй вложенный список)</li>
<li>Семь элемент (второй вложенный список)</li>
<li>Восемь элемент (второй вложенный список)</li>
</ol>
</li>
<li>
<ul>
<li type="disc">Раз элемент ( второй вложенный список)</li>
<li type="circle">Два элемент (второй вложенный список)</li>
<li type="square">Три элемент (второй вложенный список)</li>
<li>Четыре элемент (второй вложенный список)</li>
<li>Пять элемент (второй вложенный список)</li>
<li>Шесть элемент (второй вложенный список)</li>
<li>Семь элемент (второй вложенный список)</li>
<li>Восемь элемент (второй вложенный список)</li>
</ul>
</li>
</ul>
Выглядит в браузере, примерно так:
Раз элемент (основной список)
Два элемент (основной список)
Три элемент (основной список)
Раз элемент (вложенный список)
Два элемент (вложенный список)
Три элемент (вложенный список)
Четыре элемент (второй вложенный список)
Пять элемент (второй вложенный список)
Шесть элемент (второй вложенный список)
Семь элемент (второй вложенный список)
Восемь элемент (второй вложенный список)
Раз элемент (второй вложенный список)
Два элемент (второй вложенный список)
Три элемент (второй вложенный список)
Четыре элемент (второй вложенный список)
Пять элемент (второй вложенный список)
Шесть элемент (второй вложенный список)
Семь элемент (второй вложенный список)
Восемь элемент (второй вложенный список)
Теперь вспомним про вложенные списки и подкорректируем код <br /> брейком, чтобы избежать повторения и наезда пунктов.
Получится, примерно такой код:
<ul title="Пример РАСПРОСТРАНЕНИЯ СВОЙСТВ РОДИТЕЛЬСКОГО ЭЛЕМЕНТА НА ДОЧЕРНИЕ ЭЛЕМЕНТЫ. Эта строка записана в тайтле списка, но отсвечивает на каждом его элементе">
<li type="A">Раз элемент (основной список)</li>
<li type="A">Два элемент (основной список)</li>
<li type="A">Три элемент (основной список)<br />
<br />
<br />
<ol type="i">
<li>Раз элемент (вложенный список)</li>
<li>Два элемент (вложенный список)</li>
<li>Три элемент (вложенный список)</li>
<li>Четыре элемент (второй вложенный список)</li>
<li value="49" >Пять элемент (второй вложенный список)</li>
<li>Шесть элемент (второй вложенный список)</li>
<li>Семь элемент (второй вложенный список)</li>
<li>Восемь элемент (второй вложенный список)
<br />
<br />
<ul>
<li type="disc">Раз элемент ( второй вложенный список)</li>
<li type="circle">Два элемент (второй вложенный список)</li>
<li type="square">Три элемент (второй вложенный список)</li>
<li>Четыре элемент (второй вложенный список)</li>
<li>Пять элемент (второй вложенный список)</li>
<li>Шесть элемент (второй вложенный список)</li>
<li>Семь элемент (второй вложенный список)</li>
<li>Восемь элемент (второй вложенный список)</li>
</ul>
</li>
</ol>
</li>
</ul>
Выглядит в браузере:
Раз элемент (основной список)
Два элемент (основной список)
Три элемент (основной список)
Раз элемент (вложенный список)
Два элемент (вложенный список)
Три элемент (вложенный список)
Четыре элемент (второй вложенный список)
Пять элемент (второй вложенный список)
Шесть элемент (второй вложенный список)
Семь элемент (второй вложенный список)
Восемь элемент (второй вложенный список)
Раз элемент (второй вложенный список)
Два элемент (второй вложенный список)
Три элемент (второй вложенный список)
Четыре элемент (второй вложенный список)
Пять элемент (второй вложенный список)
Шесть элемент (второй вложенный список)
Семь элемент (второй вложенный список)
Восемь элемент (второй вложенный список)
В девятой главе учебника HTML мы с Вами уже знакомились с таким немаловажным элементом как список и действительно хорошее средство для структуризации данных. Однако списки организованные одними средствами HTML весьма убоги в плане дизайна и не радуют глаз человека.
В этой главе мы немного поколдуем над списками с помощью свойств CSS. Так мы будем говорить о стиле списка, то для обучения Вам понадобится базовая информация о тегах: <ul> <ol> <li> <dl> <dt> <dd> - изложенная в учебнике HTML глава 9 "Списки" - рекомендую освежить в голове информацию о данных элементах, прежде чем приступать к работе.
Ну а если в голове и так свежо тогда начнем!
Вид маркера в списке.
Если Вы помните, то в чистом HTML вид маркера в списке определял атрибут type и одно из его возможных значений, в CSS данную задачу берёт на себя свойство: list-style-type которое, в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного "пункта".
Значения list-style-type:
disc - Диск. (по умолчанию для <ul>)
circle - Полый круг.
square - Квадрат.
decimal - Арабские цифры. (по умолчанию для <ol>)
lower-roman - Строчные римские цифры.
lower-alpha - Строчные буквы.
upper-roman - Заглавные римские цифры.
upper-alpha - Заглавные буквы.
none - Маркер отсутствует.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Вид маркера в списке</title>
</head>
<body>
<ul style="list-style-type: square">
<li>Пункт 1.
<li>Пункт 2.
<li style="list-style-type: circle">Пункт 3 (особенный).
</ul>
<ul style="list-style-type: upper-roman">
<li>Пункт 1.
<li>Пункт 2.
<li>Пункт 3.
</ul>
</body>
</html>
смотреть пример
Пользовательский маркер рисунок.
Наиболее интересным CSS инструментом для работы со стилем списка является, на мой взгляд, возможность вместо стандартных "скучных" маркеров описанных выше использовать свои собственные нестандартные изображения - небольшие рисунки, вписывающиеся в общий дизайн Вашего сайта.
Эту задачу выполняет свойство list-style-image которое определяет в качестве маркера списка некое графическое изображение с указанием пути к нему.
Значений данного свойства всего два:
none - Отменяет графическое изображение маркера.
url - Путь к файлу с рисунком маркера.
Путь к рисунку после url указывается в круглых скобках.
Вот так:
list-style-image: url(graphics/marker.gif)
- Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: " " - под названьем marker.gif
Теперь попрубуем сделать так, что бы каждый пункт нашего списока был промаркерован этим рисунком. Смотрим пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Нестандартный маркер-рисунок</title>
</head>
<body>
<ul style="list-style-image: url(graphics/marker.gif)">
<li>Первый любимый пункт.
<li>Второй любимый пункт.
<li>И не менее любимый третий пункт.
</ul>
</body>
</html>
смотреть пример
Стиль обтекания маркера списком.
Свойство list-style-position указывает браузеру на то, как следует отображать текст в списке относительно его маркеров. По умолчанию маркеры находятся в стороне от текста списка, но можно сделать так, что они будут обтекаться текстом.
Возможных значений свойства list-style-position всего два:
outside - Маркер находится в стороне от списка.(по умолчанию)
inside - Маркер обтекается текстом.
Пример для наглядности:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Обтекание маркера текстом</title>
<style type="text/css">
body {
margin: 0px;
background: #e8e8e8
}
div {
width: 300px;
height: 200px;
float:left;
margin: 10px;
padding: 10px;
border: RGB(25, 125, 25) 2px ridge;
background: #fff
}
h3 {
text-align: center
}
</style>
</head>
<body>
<div>
<h3>Здесь маркер обтекается текстом:</h3>
<ul style="list-style-position:inside">
<li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
<li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
</ul>
</div>
<div>
<h3>А здесь нет:</h3>
<ul style="list-style-position:outside">
<li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
<li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
</ul>
</div>
</body>
</html>
смотреть пример
list-style
Базовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от одного до трёх значений из свойств применяемых к стилю списка, в любой последовательности через пробел.
Все три свойства и их возможные значения мы рассмотрели выше, поэтому повторятся не буду, а просто выложу внутри страничную навигацию:
list-style-type - Вид маркера в списке
list-style-image - Нестандартный маркер рисунок
list-style-position - Стиль обтекания маркера списком
Если в голове остались какие то пробелы можете вернуться и перечитать.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Стиль списка</title>
</head>
<body>
<div style="width: 250px;">
<ul style="list-style: url(graphics/marker.gif) inside">
<li>- Этот список использует в качестве маркера рисунок.
<li>- Текст этого списка обтекает маркер.
</ul>
</div>
</body>
</html>
смотреть пример
Полезные советы:
Списки наряду с заголовками, выделенным текстом и картинками, являются элементами, которые приковывают взгляд посетителя при беглом просмотре страницы. Умелое и ненавязчивое размещение таковых элементов залог того, что посетитель окунётся в чтение Вашего документа более глубоко.
Так как списки являются великолепным инструментом для структуризации данных, а свойства CSS позволяют создать практически любой их дизайн, используйте списки, помимо их основного назначения, в качестве "меню" - навигации по сайту, где каждый пункт является ссылкой на ту или иную страницу Вашего сайта.
<div style="width: 250px;">
<ul style="list-style: url(graphics/marker.gif) inside">
<li>- Этот список использует в качестве маркера рисунок.
</li><li>- Текст этого списка обтекает маркер.
</li>
</ul>
</div>
Картинка вместо бу́ллета (маркера) списка
аааааааа