CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка , добавить изображение для маркера , а также изменить местоположение маркера . Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.
list-style-type | |
---|---|
Значения: | |
disc | Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок. |
armenian | Традиционная армянская нумерация. |
circle | В качестве маркера выступает незакрашенный кружок. |
cjk-ideographic | Идеографическая нумерация. |
decimal | 1, 2, 3, 4, 5, … |
decimal-leading-zero | 01, 02, 03, 04, 05, … |
georgian | Традиционная грузинская нумерация. |
hebrew | Традиционная еврейская нумерация. |
hiragana | Японская нумерация: a, i, u, e, o, … |
hiragana-iroha | Японская нумерация: i, ro, ha, ni, ho, … |
katakana | Японская нумерация: A, I, U, E, O, … |
katakana-iroha | Японская нумерация: I, RO, HA, NI, HO, … |
lower-alpha | a, b, c, d, e, … |
lower-greek | Строчные символы греческого алфавита. |
lower-latin | a, b, c, d, e, … |
lower-roman | i, ii, iii, iv, v, … |
none | Маркер отсутствует. |
square | В качестве маркера выступает закрашенный или незакрашенный квадрат. |
upper-alpha | A, B, C, D, E, … |
upper-latin | A, B, C, D, E, … |
upper-roman | I, II, III, IV, V, … |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Синтаксис
Ul {list-style-image: url("images/romb.png");}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.
Использование
Внутрь каждого элемента
создаем конструкцию
При этом цвет маркеров определяется стилевым свойством color для селектора li , а цвет текста - для селектора span (пример 1).
Пример 1. Использование вложенных тегов
- Скрипка
- Гитара
- Волынка
- Шарманка
- Челеста
Результат данного примера показан ниже (рис. 1).
Рис. 1. Маркеры, отличающиеся по цвету от основного текста
Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять .
Использование::before
Смысл в следующем - убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента ::before и свойства content . Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае
Пример 2. Использование псевдоэлемента::before
- Север
- Юг
- Запад
- Восток
Результат данного примера показан на рис. 2.
Изменить цвет маркеров в HTML-списке без использования диапазона (6)
Для меня лучшим вариантом является использование псевдоэлементов CSS, поэтому для disc пули disc это будет выглядеть так:
ul { list-style-type: none; } li { position: relative; } li:before { content: ""; display: block; position: absolute; width: 5px; /* adjust to suit your needs */ height: 5px; /* adjust to suit your needs */ border-radius: 50%; left: -15px; /* adjust to suit your needs */ top: 0.5em; background: #f00; /* adjust to suit your needs */ }
- first
- second
- third
- width и height должны иметь равные значения, чтобы удерживать указатели округлыми
- вы можете установить border-radius равным нулю, если вы хотите иметь square пули
Для более стилей пули вы можете использовать другие css-формы https://css-tricks.com/examples/ShapesOfCSS/ (выберите это, для которого не требуются псевдоэлементы, например, треугольники)
Мне было интересно, есть ли способ изменить цвет на пули в списке.
У меня есть список:
- House
- Garden
Невозможно вставить что-либо в li, например, «span» и «p». Могу ли я изменить цвет пуль, но не текст каким-то умным способом?
Если вы можете использовать изображение, вы можете это сделать. И без изображения вы не сможете изменить цвет только пули, а не текст.
Использование изображения
Li { list-style-image: url(images/yourimage.jpg); }
Без использования изображения
Затем вам нужно отредактировать разметку HTML и включить пролет внутри списка и покрасить ли и диапазон с разными цветами.
Мне тоже очень понравился ответ Марка - мне нужен набор разных цветных UL, и, очевидно, было бы проще просто использовать класс. Вот что я использовал для апельсина, например:
Ul.orange { list-style: none; padding: 0px; } ul.orange > li:before { content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px; line-height: 15px; }
Кроме того, я обнаружил, что шестнадцатеричный код, который я использовал для «content:», был другим, чем у Marc"s (этот шестигранный круг казался слишком высоким). Тот, который я использовал, кажется, сидит совершенно посередине. Я также нашел несколько других фигур (квадраты, треугольники, круги и т. Д.)
Мы можем комбинировать list-style-image с svg s, который мы можем встроить в css ! Этот метод предлагает невероятный контроль над «пулями», которые могут стать чем угодно.
Чтобы получить красный круг, просто используйте следующий css:
"); }
Но это только начало. Это позволяет нам делать любую сумасшедшую вещь, которую мы хотим с этими пулями. круги или прямоугольники легко, но все, что вы можете нарисовать с помощью svg , можете зайти туда! Посмотрите пример яблочного яблока ниже:
ul { list-style-image: url("data:image/svg+xml,"); } ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul ul ul ul { list-style-image: url("data:image/svg+xml,"); } ul.bulls-eye { list-style-image: url("data:image/svg+xml,"); } ul.multi-color { list-style-image: url("data:image/svg+xml,"); }
-
Big circles!
- Big rectangles!
- b
- Small circles!
- c
- Small rectangles!
- Bulls
- eyes.
- Multi
- color
Ширина / высота атрибутов
Для некоторых браузеров требуются атрибуты width и height которые должны быть установлены на
Кодировки
Построение обоих решений @Marc и @jessica - это решение, которое я использую:
Li { position:relative; } li:before { content:""; display: block; position: absolute; width: 6px; height:6px; border-radius:6px; left: -20px; top: .5em; background-color: #000; }
Я использую em для размеров шрифта, поэтому, если вы установили top значение в.5em оно всегда будет помещено в середину вашей первой строки текста. Я использовал left:-20px потому что это позиция left:-20px по умолчанию в браузерах: parent padding/2
Я знаю, что это действительно, действительно, старый вопрос, но я играл с этим и придумал способ, которого я не видел. Дайте списку цвет, а затем перезапишите цвет текста с помощью::first-line селектора::first-line . Я не эксперт, поэтому, возможно, что-то не так с этим подходом, что мне не хватает, но, похоже, он работает.
li { color: blue; } li::first-line { color: black; }
- House
- Garden
- Изменение вида стандартного маркера для нумерованных списков
- Установка типа маркера для маркированных списков
- Установка изображения вместо маркера для элементов списка
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные . По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type , в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
CSS Свойство:
list-style-type:
Результат:
- Кликните на значение свойства list-style-type
- Наблюдайте за сменой маркеров
- Используйте для своих списков наиболее подходящие маркеры
Ol#myList {
list-style-type: decimal
;
}
Кликните на любое значение свойства, чтобы увидеть результат
Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:
- Кофе
- Чай
- Кофе
- Чай
Замена маркеров картинками
Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image , в значении которого нужно прописать путь к выбранному изображению.
Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:
- Кофе
- Чай
- Кофе
- Чай
Отступ списка
При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left , которое позволяет регулировать внутренний отступ:
- Кофе
- Чай
- Кофе
- Чай
В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах - по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов
Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:
- outside - маркер располагается слева от содержимого (является значением по умолчанию)
- inside - маркер располагается внутри пункта списка вместе с содержимым
Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
В примере к каждому пункту списка была добавлена рамка, чтобы визуально показать границы пунктов списка.
В этой статье учебника речь пойдет о работе со списками в CSS, вы научитесь изменять тип маркера, расположение маркера относительно элемента списка, создавать собственные маркеры и даже изменять цвет маркера.
Думаю, вы уже знаете, что в HTML 5 применяется два основных вида списков (если не брать в расчет списки описаний и элементы меню):
- нумерованный (упорядоченный) список – HTML элемент
- маркированный (неупорядоченные) список – HTML элемент
CSS предоставляет нам широкие возможности форматирования внешнего вида этих списков, давайте рассмотрим основные из них.
Изменение типа маркера
Первое свойство, которое хотелось бы рассмотреть это свойство list-style-type , оно задает тип маркера элемента списка.
Меню навигации, к примеру, часто составляется из обычных маркированных списков (HTML элемент
- ), по умолчанию маркер которых, отображается в форме закрашенного круга, чтобы его убрать необходимо, воспользоваться CSS свойством list-style-type со значением none
:
ul
{
list-style-type
: none
; /* убираем маркер у списка */
}
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
Для маркированных (неупорядоченных) списков (HTML элемент
- ) предусмотрено три типа маркеров: в форме закрашенного кружка (disc
- это значение по умолчанию), маркер в форме полого круга (сircle
) и в форме квадрата (square
), а для нумерованных (упорядоченных) списков (элемент
- ) все оставшиеся варианты. Полный перечень размещен в следующей таблице:
Значение Описание none Маркер не отображается. disc Маркер в форме закрашенного кружка. Это значение по умолчанию. armenian Числовой маркер (традиционная Армянская нумерация). circle Маркер в форме круга. cjk-ideographic Простые идеографические числа. decimal Числовой маркер (десятеричные арабские числа, начинающихся с 1). decimal-leading-zero Числовой маркер (десятеричные арабские числа, начинающихся с 1 и дополненные начальным нулем - 01, 02, 03...). georgian Числовой маркер (традиционная Грузинская нумерация - an, ban, gan, ..., he, tan, in, in-an...). hebrew Числовой маркер (традиционная Еврейская нумерация.). hiragana Числовой маркер (японская слоговая азбука Хирагана - a, i, u, e, o, ka, ki...). hiragana-iroha Числовой маркер (японская слоговая азбука Хирагана ироха - i, ro, ha, ni, ho, he, to, ...). katakana Числовой маркер (японская слоговая азбука Катакана - A, I, U, E, O, KA, KI, ...). katakana-iroha Числовой маркер (японская слоговая азбука Катакана ироха - I, RO, HA, NI, HO, HE, TO, ...). lower-alpha Буквы ascii нижнего регистра (a, b, c, d...z). lower-greek Строчные греческие буквы (α, β, γ, δ, и т.д.). lower-latin Строчные латинские буквы (a, b, c, d,...z). lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v и т.д.). square Маркер в форме квадрата. upper-alpha Буквы ascii верхнего регистра (A, B, C, D,...Z). upper-latin Заглавные латинские буквы (A, B, C, D,...Z). upper-roman Римские цифры в верхнем регистре (I, II, III, IV, V и т.д.). Обращаю Ваше внимание, что значения hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha не поддерживаются браузером Internet Explorer .
Давайте рассмотрим пример использования свойства list-style-type в тексте:
Пример использования свойства list-style-type - /* список со значением типа маркера по умолчанию (disc). */
- /* нумерованный список с типом маркера lower-roman */
- Элемент списка
- Элемент списка
- Элемент списка
- /* маркированный список с типом маркера circle */
- Элемент списка
- Элемент списка
- Элемент списка
В данном примере мы создали два стиля, первый устанавливает тип маркера - римские числа в нижнем регистре (значение lower-roman ), мы его применили к нумерованном списку (HTML элемент
- ), а к маркированному списку (HTML элемент
- ), чтобы установить свой тип маркера, либо создать стили, которые будет применять определённый маркер к чётным, либо нечетным элементам списка, как рассмотрено в следующем примере:
Пример чередования стилей свойства list-style-type - Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
В этом примере мы стилизовали все нечетные элементы списка - указали тип маркера квадрат , а цвет текста указали зеленый . Четные элементы списка получили следующий стиль: красный цвет текста и отсутствие маркера.
Результат нашего примера:
Расположение маркера относительно элемента списка
Результат нашего примера:
Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).
Создание собственных маркеров
Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.
Синтаксис свойства следующий:
ol { list-style-image : url("images/primer.png") ; /* указываем относительный путь к изображению */ } ul { list-style-image : ; /* указываем абсолютный путь к изображению */ }Значение в скобках соответствует пути к изображению, которое вы планируете использовать в роли маркера. Путь к изображению может быть как абсолютный, так и относительный. При указании относительного пути, важным моментом является то, что его необходимо указывать относительно размещения таблицы стилей, а не страницы .
Если вы планируете оформить собственные маркеры, то вам придется использовать программу для редактирования графики, либо воспользоваться уже готовыми наборами. Обратите внимание на такой момент, который может произойти, даже если Вы все сделали правильно, изображение может не загрузиться на страницу, в этом случае необходимо отредактировать изображение таким образом, чтобы его фон стал прозрачным.
Давайте рассмотрим пример использования собственных маркеров в документе:
Пример использования CSS свойства list-style-image .test { list-style-image : url("http://сайт/images/mini5.png") ; /* указываем абсолютный путь к изображению, которое будет использовано в качестве маркера */ } - Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- ) вставляем псевдоэлементом (:before) сгенерированный контент (CSS свойство content), который идентичен по внешнему виду маркеру в маркированном списке (HTML элемент
- ), только уже необходимого для нашей задачи цвета
.
- ). Если в данном случае не применять это свойство, то маркер будет находится в упор к тексту, что зрительно некрасиво.
Работа с внутренними и внешними отступами элементов будет подробно рассмотрена в следующей статье учебника " ".
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com
Обращаю Ваше внимание, что в данном примере использовано свойство padding-right , которое нам позволило сделать внутренний отступ справа в каждом элементе списка (HTML элемент
- ). Если в данном случае не применять это свойство, то маркер будет находится в упор к тексту, что зрительно некрасиво.
Работа с внутренними и внешними отступами элементов будет подробно рассмотрена в следующей статье учебника " ".
- ) мы применили стиль, который устанавливает тип маркера в форме полого круга (значение circle
).
Результат нашего примера:
Обращаю Ваше внимание, что вы можете применить свойство list-style-type даже к отдельно взятому элементу списка (HTML элемент
В данном примере мы указываем абсолютный путь к изображению, которое будет использовано в качестве маркера.
Результат нашего примера:
Изменение цвета маркера в CSS
В завершении этой статьи давайте рассмотрим продвинутый способ изменения цвета маркера без изменения цвета элемента, с использованием CSS свойства content и ранее рассмотренного псевдоэлемента :before :
Суть этого способа заключается в том, что мы перед каждым элементом списка (HTML элемент