Маркер списка – Можно ли сдвинуть маркер списка относительно самого пункта в CSS? — Хабр Q&A

Содержание

‣ — Треугольный маркер списка (U+2023)

Начертание символа «Треугольный маркер списка» в разных шрифтах

Ваш браузер

Описание символа

Треугольный маркер списка. Знаки пунктуации.

Кодировка

Кодировкаhexdec (bytes)decbinary
UTF-8E2 80 A3226 128 1631484406711100010 10000000 10100011
UTF-16BE20 2332 35
8227
00100000 00100011
UTF-16LE23 2035 32899200100011 00100000
UTF-32BE00 00 20 230 0 32 35822700000000 00000000 00100000 00100011
UTF-32LE23 20 00 0035 32 0 0589299712
00100011 00100000 00000000 00000000

◦ — Прозрачный маркер списка (U+25E6)

Начертание символа «Прозрачный маркер списка» в разных шрифтах

Ваш браузер

Описание символа

Прозрачный маркер списка. Геометрические фигуры.

Кодировка

Кодировкаhexdec (bytes)decbinary
UTF-8E2 97 A6226 151 1661484995811100010 10010111 10100110
UTF-16BE25 E637 230970200100101 11100110
UTF-16LEE6 25230 375891711100110 00100101
UTF-32BE00 00 25 E60 0 37 230970200000000 00000000 00100101 11100110
UTF-32LEE6 25 00 00 230 37 0 0386118451211100110 00100101 00000000 00000000

Наборы с этим символом:

Маркер списку — Вікіпедія

Матеріал з Вікіпедії — вільної енциклопедії.

·


Пунктуація

апостроф(‘ , ’)
дужки([ ], ( ), { }, ⟨ ⟩)
двокрапка(:)
кома
(,)
тире(‒, –, —, ―)
три крапки(…, …)
знак оклику(!)
крапка(.)
дефіс(-, ‐)
знак питання(?)
лапки(‘ ’, « », « », « »)
крапка з комою(;)
Скісна риска(/)
Розділювачі
пробіл( ) ( ) ( ) (␠) (␢) (␣)
інтерпункт(·)
Основні друкарські знаки
амперсанд(&)
равлик(@)
зірочка(*)
обернена скісна риска (\)
маркер списку(•)
циркумфлекс(^)
макрон(¯)
хрестик(†, ‡)
символ градуса(°)
перевернутий знак оклику(¡)
перевернутий знак питання(¿)
октоторп(#)
символ номера(№)
порядковий індикатор(º, ª)
відсоток(%)
проміле(‰)
базисний пункт(‱)
символ абзацу(¶)
штрих(′, ″, ‴)
символ параграфа(§)
тильда(~)
підкреслення(_)
вертикальна риска(|, ¦)
Інтелектуальна власність
знак охорони авторського права(©)
символ правової охорони товарного знаку(®)
символ знаку обслуговування(℠)
знак охорони суміжних прав
для фонограми
(℗)
символ товарного знаку(™)
Символи валют
символ валюти(¤)
символи валют
₳ ฿ ฿ ₵ ¢ ₡ ₢ R$ ₠ $ ₫ Indian Rupee symbol.svg ₯ € £ ƒ ₣ ₲ ₴ ₭ ℳ ₥ ₦ ₧ ₱ ₰ £ ₨ ₪ Kazakhstani tenge symbol.svg ₮ ₩ ¥ ៛

Ма́ркер спи́ску (бу́лліт) — типографський знак, що використовується для виділення елементів списку, як показано на прикладі нижче:

  • Це перший елемент списку. Зверніть увагу на булліт ліворуч.
  • Це наступний елемент списку і перед ним стоїть ще один булліт.
    Це другий рядок другого елемента списку, а отже перед ним булліт не ставиться.

Звичайно булліти використовуються в довідкових і технічних матеріалах, щоб позначити послідовність зв’язаних елементів. Цими елементами можуть бути короткі уривки тексту або повноцінні абзаци; у будь-якому випадку прийнято завершувати всі елементи, крім останнього, крапкою з комою, і тільки останній — крапкою. Іноді крапкою завершують всі елементи списку, як показано на прикладі вище, а іноді їх не завершують зовсім. Крім того, елементи прийнято починати з малої літери.

Спосіб 1 (основний)Спосіб 2Спосіб 3
  • перший;
  • другий;
  • третій.
  • Перший.
  • Другий.
  • Третій.
  • перший
  • другий
  • третій

У Юнікоді визначені кілька графічних варіантів буллітів:

СимволКодНазва
U+2022Bullet
U+2023Triangular Bullet
U+2043Hyphen Bullet
U+25E6White Bullet

Першому з цих варіантів в HTML відповідає іменована сутність &bull;, але для розмітки маркованих списків краще використовувати спеціальний елемент <ul>.

У Windows булліт можна набирати сполученням Alt+0149 (натиснути й утримувати Alt, а в цей час набрати на цифровому блоці клавіатури 0149). Також булліт можливо набрати за допомогою Alt+7 (7 на цифровому блоці клавіатури). У MacOS булліт можна набирати клавіатурним сполученням Option+8 (натиснути й утримувати Option, в цей час натиснути 8).

У CSS для створення маркованих списків використовується атрибут list-style-type, що допускає три графічних варіанти булліта: disc (чорний круг), circle (чорне кільце) і square (чорний квадрат). Крім того, атрибут list-style-image дозволяє використовувати булліт довільного вигляду через URL графічного файлу з його зображенням. Наприклад, у наведеному вище прикладі використання CSS дозволило задати для буллитів вгляд сіро-блакитних квадратиків.

При наборі тексту на друкарській машинці булліти часто замінялися зірочками. Цей спосіб позначення маркованих списків зберігся у вікі-розмітці. Деякі текстові процесори самі перетворять рядки, набрані з зірочкою на початку, у марковані списки.

⁍ — Жирный правосторонний маркер списка (U+204D)

Начертание символа «Жирный правосторонний маркер списка» в разных шрифтах

Ваш браузер

Описание символа

Жирный правосторонний маркер списка. Знаки пунктуации.

Кодировка

Кодировкаhexdec (bytes)decbinary
UTF-8E2 81 8D226 129 1411484430111100010 10000001 10001101
UTF-16BE20 4D32 77826900100000 01001101
UTF-16LE4D 2077 321974401001101 00100000
UTF-32BE00 00 20 4D0 0 32 77826900000000 00000000 00100000 01001101
UTF-32LE4D 20 00 0077 32 0 0129394278401001101 00100000 00000000 00000000

◘ — Инвертированный маркер списка (U+25D8)

Начертание символа «Инвертированный маркер списка» в разных шрифтах

Ваш браузер

Описание символа

Инвертированный маркер списка. Геометрические фигуры.

Кодировка

Кодировкаhexdec (bytes)decbinary
UTF-8E2 97 98226 151 1521484994411100010 10010111 10011000
UTF-16BE25 D837 216968800100101 11011000
UTF-16LED8 25216 375533311011000 00100101
UTF-32BE00 00 25 D80 0 37 216968800000000 00000000 00100101 11011000
UTF-32LED8 25 00 00
216 37 0 0
362630348811011000 00100101 00000000 00000000

Наборы с этим символом:

⁃ — Дефис маркер списка (U+2043)

Начертание символа «Дефис маркер списка» в разных шрифтах

Ваш браузер

Описание символа

Дефис маркер списка. Знаки пунктуации.

Похожие символы

Кодировка

Кодировкаhexdec (bytes)decbinary
UTF-8E2 81 83226 129 1311484429111100010 10000001 10000011
UTF-16BE20 4332 67825900100000 01000011
UTF-16LE43 2067 321718401000011 00100000
UTF-32BE00 00 20 430 0 32 67825900000000 00000000 00100000 01000011
UTF-32LE43 20 00 0067 32 0 0112617062401000011 00100000 00000000 00000000

Наборы с этим символом:

Оформление маркеров (буллетов) html-списков

Оформление маркеров (буллетов) html-списков

 Бу́ллет (англ. bullet) – типографский знак маркера списка
По внешнему виду бу́ллетов, cписки в HTML делятся на стандартные маркированные и нумерованные списки, списки без маркировки (бу́ллеты-маркеры отсутствуют) и списки с нестандартными бу́ллетами-картинками, взятыми со стороны

  1. Месторасположение бу́ллетов списка
  2. Расстояние от бу́ллета до текста списка
  3. Расстояние от бу́ллета до соседнего объекта
  4. Внешний вид бу́ллета (маркера) списка
Месторасположение бу́ллетов списка

Оформление внешнего вида бу́ллетов (маркеров) списка начинается с указания их месторасположения относительно текста списка. Бу́ллеты (маркеры) списка располагаются, либо в тексте списка, либо за его пределами. За местоположение бу́ллетов отвечает 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:outside;

list-style-position равен inside
list-style-position:inside;


Для наглядности, элементы списка взяты в рамку (border:2px solid #000;).
list-style-position:outside;
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>

Выглядит в браузере:

  1. Элемент 1
  2. Элемент 2
  3. Элемент 3
list-style-position:inside;
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>

Выглядит в браузере:

  1. Элемент 1
  2. Элемент 2
  3. Элемент 3
Индивидуальный подход к оформлению каждого элемента позволяет создавать совершенно несуразные виды списков:
list-style-position:outside;
list-style-position:inside;
(немыслисый список)
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
</ol>

Выглядит в браузере:

  1. Элемент 1
  2. Элемент 2
  3. Элемент 3
  4. Элемент 4
Как видно на «живых» примерах, ширина списка и его левый отступ остаются неизменными. Бу́ллеты списка, находясь за его пределами (outside) могут «налезать» на соседние элементы веб-страницы (блоки, изображения). Часто, при обтекании картинки списками – именно так и происходит.
Расстояние от бу́ллета (маркера) до текста списка

Расстояние от бу́ллета (маркера) до текста элемента списка задаётся дефолтными настройками у каждого браузера. Отступы от маркера до текста элемента могут отличаться для разных видов и версий браузеров. Небольшой css-код позволяет добиться кроссбраузерного отображения списков и изменить значение дефолтных отступов на свои собственные. Примечательно, что внешний вид списка разительно меняется, в зависимости от назначенного свойства outside/inside. Тут самое время для смелых опытов и экспериментов:

li {
  margin-left: .9em;
  padding-left: 1,9em;
  list-style-position: inside;
  text-indent: -1em;
  }

 

Расстояние от бу́ллета до соседнего объекта

При попытке отрегулировать зазор между маркером и текстом списка (Расстояние от бу́ллета до текста списка), было замечено, что внешний вид списка сильно изменяется, в зависимости от назначенного свойства 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>
<li>Пункт 1.
<li>Пункт 2.
<li>Пункт 3 (особенный).
</ul>
<ul>
<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>
<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
}
h4 {
text-align: center
}
</style>
</head>
<body>
<div>
<h4>Здесь маркер обтекается текстом:</h4>
<ul>
<li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
<li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
</ul>
</div>
<div>
<h4>А здесь нет:</h4>
<ul>
<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>
<ul>
<li>- Этот список использует в качестве маркера рисунок.
<li>- Текст этого списка обтекает маркер.
</ul>
</div>
</body>
</html>
смотреть пример
Полезные советы:

Списки наряду с заголовками, выделенным текстом и картинками, являются элементами, которые приковывают взгляд посетителя при беглом просмотре страницы. Умелое и ненавязчивое размещение таковых элементов залог того, что посетитель окунётся в чтение Вашего документа более глубоко.

Так как списки являются великолепным инструментом для структуризации данных, а свойства CSS позволяют создать практически любой их дизайн, используйте списки, помимо их основного назначения, в качестве «меню» — навигации по сайту, где каждый пункт является ссылкой на ту или иную страницу Вашего сайта.

<div>
<ul>
<li>- Этот список использует в качестве маркера рисунок.
</li><li>- Текст этого списка обтекает маркер.
</li>
</ul>
</div>

Картинка вместо бу́ллета (маркера) списка

аааааааа

 

Списки в HTML (XHTML)
Обтекание картинок html-списками

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

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