Главная » Без рубрики » Маркированные списки. Как в css у элементов ul li убрать маркеры

Маркированные списки. Как в css у элементов ul li убрать маркеры

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

CSS стили списка маркера.

list-style-type

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;

Значение :

disk – маркированный список в виде закрашенного кружка

circle – маркированный список в виде не закрашенного кружка

square – маркированный список в виде закрашенного квадратика

decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

none – без маркера.

Пример :

Свойства списков в css

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь, со смертельным исходом.
  • Никогда не говори никогда.

Результат :

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

list-style-type: none;

Пример :

Свойства списков в css

  • Верь в лучшее, ожидай худшее.
  • Никогда не говори никогда.

Результат :

Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .

list-style-image

list-style-image: url(картинка.png);

Пример :

Свойства списков в css

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь со смертельным исходом.
  • Никогда не говори никогда.

Результат :

Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

Пример :

Свойства списков в css

  • Верь в лучшее, ожидай худшее.
  • Жизнь - это болезнь со смертельным исходом.
  • Никогда не говори никогда.

Результат :

Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:

  • текст

    • Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.
    • Жизнь - это болезнь со смертельным исходом.
    • Никогда не говори никогда.

    Результат :

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

    Пример :

    Свойства списков в css

    • Верь в лучшее, ожидай худшее.Пункт 1
    • Жизнь - это болезнь со смертельным исходом.Пункт 2
    • Никогда не говори никогда.Пункт 3
    • Это все что я знал. Пункт 4

    Результат :

    Вот и подошла к завершению тема .

    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

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

    Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка CSS. Для этого есть свойство list-style-type . У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка.

    Для маркированного списка:

    list-style-type: disc - в виде диска (по умолчанию)

    list-style-type: circle - в виде круга

    list-style-type: square - в виде квадрата

    Для нумерованного списка

    list-style-type: decimal - арабские цифры (по умолчанию)

    list-style-type: decimal-leading-zero - арабские цифры c 0 впереди для чисел 1-9

    list-style-type: upper-roman - заглавные римские цифры

    list-style-type: lower-roman - строчные римские цифры

    list-style-type: upper-latin - заглавные латинские буквы

    list-style-type: upper-alpha - то же, что и upper-latin

    list-style-type: lower-latin - строчные латинские буквы

    list-style-type: lower-alpha - то же, что и lower-latin

    list-style-type: lower-greek - строчные греческие буквы

    list-style-type: armenian - армянские числа

    list-style-type: georgean - грузинские числа

    list-style-type: none - позволяет убрать маркеры списка. Для обоих списков

    list-style-type: inherit - значение принимается от родительского элемента. Для обоих списков

    Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

    Стиль:

    1
    2
    3
    4
    5
    6

    		 Страница
    • Сепульки
    • Сепулькарии
    • Сепуление

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

  • не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым
  • добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.

    Пример 2. Использование::before

    Списки

    • Сепульки
    • Сепулькарии
    • Сепуление

    Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача - переместить текст левее на один символ.

    Рис. 2. Произвольные маркеры в списке

    Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

    Рис. 3. Выбор символа в LibreOffice

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

    Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image . В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3.

    Пример 3. Использование изображения в качестве маркера

    Списки

    • Сепульки
    • Сепулькарии
    • Сепуление

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

    Рис. 4. Рисунок в качестве маркера

    Применение list-style-image обладает некоторыми недостатками:

    • рисунок нельзя сдвинуть вверх или вниз;
    • в разных браузерах положение рисунка относительно текста может отличаться.

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

  • мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

    Пример 4. Использование background

    Ul { margin-left: -1em; } li { list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; }

    Положение текста и маркера

    Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).
    inside outside

    Рис. 5. Размещение маркеров относительно текста

    Чтобы управлять положением маркеров, применяется свойство list-style-position . Оно имеет два значения: outside - маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside - маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).

    Пример 5. Изменение положения маркеров

    Списки

    • Перед началом работы проверьте наличие оборудования, входящего в комплект 3BM.
    • При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу ВЦ.
    • После осмотра визуальными методами своего рабочего места можно осторожно включить питание 3BM.

    Результат данного примера показан на рис. 6.

    Доброго времени суток!

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

    Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

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

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

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

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

    А вот так выглядит в браузере:

    Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере

    1.1 Стандартные маркеры для маркированного списка

    На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

    1.2 Маркер списка в виде пустого круга

    Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение "circle" для атрибута type и задали его нашему маркированному списку:

    <html > <head > <title > Пример маркированного списка с маркером в виде пустого круга</ title > </ head > <body > <p > Звезды:</ p > <ul type = "circle" > <li > Сириус</ li > <li > Арктур</ li > <li > Поллукс</ li > <li > Бетельгейзе</ li > <li > Солнце</ li > </ ul > </ body > </ html >

    Сразу смотрим как этот код будет выглядеть в браузере:

    Рис. 1.2. Вид маркера для списка в виде окружности в браузере

    1.3 Маркер списка в виде квадрата

    Посмотрим также и последний пример с квадратным маркером для HTML списка:

    Обратите внимание на маркер, он стал квадратным:

    Рис. 1.3. Вид маркера для списка в виде квадрата в браузере

    Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.

    Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (""), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .

    Ошибка будет следующая:

    Рис. 1.4. Ошибка на валидаторе при использовании атрибута "type" у списка

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

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

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

    Пример нумерованного списка:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html > <head > <title > Пример стандартного нумерованного списка</ title > </ head > <body > <p > От одного до пяти:</ p > <ol > <li > Первый</ li > <li > Второй</ li > <li > Третий</ li > <li > Четвертый</ li > <li > Пятый</ li > </ ol > </ body > </ html >

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

    Рис. 2.1. Нумерованный список в браузере со стандартными настройками

    Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

    2.1 Стандартные маркеры для нумерованного списка

    Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

    Название маркера Значение атрибута "type" Пример списка
    Маркеры в виде арабских чисел 1
    • Бадминтон
    • Бейсбол
    Маркеры в виде строчных латинских букв a
    • Джомолунгма
    • Чогори
    • Канченджанга
    Маркеры в виде заглавных латинских букв A
    • Summit Plummet
    • Tantrum Alley
    • Insano
    Маркеры в виде римских цифр в нижнем регистре i
    • Филиппинское море
    • Аравийское море
    • Коралловое море
    Маркеры в виде римских цифр в верхнем регистре I
    • Красный
    • Зеленый
    • Синий

    2.2 Своя нумерация в списке HTML

    Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут "start" . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html > <head > <title > Произвольная нумерация для нумерованного списка</ title > </ head > <body > <p > Начинаем нумерацию с двенадцати:</ p > <ol type = "a" start = "12" > <li > Двенадцать</ li > <li > Тринадцать</ li > <li > Четырнадцать</ li > <li > Пятнадцать</ li > <li > Шестнадцать</ li > </ ol > </ body > </ html >

    Вот как это будет отображаться на реальном сайте:

    Рис. 2.2. Нумерация с произвольного числа в нумерованном списке

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

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

    3. Как сделать многоуровневый (вложенный) список в HTML

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

    На примере моделей автомобилей мы построим многоуровневый список в HTML:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html > <head > <title > Вложенный маркированный список HTML</ title > </ head > <body > <ul > <li > Citroen <ul > <li > Berlingo</ li > <li > C1</ li > <li > C2</ li > <li > C3 Picasso</ li > <li > C4 Grand Picasso</ li > </ ul > </ li > <li > KIA</ li > <li > Toyota</ li > <li > Audi</ li > <li > Lexus</ li > </ ul > </ body > </ html >

    Обратите внимание, как выглядит многоуровневый список в браузере:

    Рис. 3.1. Пример многоуровневого списка в HTML

    Мы делали многоуровневый список с помощью маркированного (тег