Маркеры для списка html. Маркированные списки

22.06.2019

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 дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.

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

    Результат :

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

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

      , а каждый пункт списка начинается с тега
    • , как показано ниже.

      • Первый пункт
      • Второй пункт
      • Третий пункт

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

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

    В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

    Пример 11.1. Создание маркированного списка

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

    • Чебурашка
    • Крокодил Гена
    • Шапокляк
    • Крыса Лариса

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

    Рис. 11.1. Вид маркированного списка

    Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.

    Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега

      . Допустимые значения приведены в табл. 11.1

      Табл. 11.1. Стили маркеров списка
      Тип списка Код HTML Пример
      Список с маркерами в виде круга

      • Первый
      • Второй
      • Третий
      Список с маркерами в виде окружности

      • Первый
      • Второй
      • Третий
      Список с квадратными маркерами

      • Первый
      • Второй
      • Третий

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

      Создание списка с квадратными маркерами показано в примере 11.2.

      Пример 11.2. Вид маркеров

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

      Изменение убеждений

      • изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение - иудаизм и мусульманство вместе;
      • изменение веры в непогрешимость любимой партии;
      • убеждение в том, что инопланетяне существуют;
      • предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).

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

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

      В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

      Табл. 1. Свойства CSS для управления видом списка
      Свойство Значение Описание Пример
      list-style-type disc
      circle
      square
      decimal
      lower-roman
      upper-roman
      lower-alpha
      upper-alpha
      none       		Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. LI {list-style-type: circle}
      LI {list-style-type: upper-alpha}
      list-style-image none
      URL       		Устанавливает символом маркера любую картинку. LI {list-style-image: url(check.gif)}
      list-style-position outside
      inside       		Выбор положения маркера относительно блока строк текста. LI {list-style-position: inside}
      list-style Универсальное свойство, включает одновременно все вышеперечисленные свойства.

      Поскольку тег

    • наследует стилевые свойства тега
        или
          , который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL , так и для селектора LI . Так, в примере 1 используется селектор UL , для него и задаются стилевые параметры.

          Пример 1. Создание маркированного списка

          Списки

          Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

          Рис. 1. Вид списка, измененого с помощью стилей

          Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

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

          Списки

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

          Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

          Рис. 2. Изображения в качестве маркеров

          Некоторые примеры создания различных списков приведен в табл. 2.

          Табл. 2. Возможные виды списков
          Код HTML Пример
          • работоспособность всех ссылок
          • поддержку разных браузеров
          • читабельность текста
          		• Что следует учитывать при тестировании сайта:
          • работоспособность всех ссылок
          • поддержку разных браузеров
          • читабельность текста
          		• Что следует учитывать при тестировании сайта:
          • работоспособность всех ссылок
          • поддержку разных браузеров
          • читабельность текста

          • Нумерованный список с арабскими цифрами:

          1. первый
          2. второй
          3. третий

          • Нумерованный список со строчными римскими цифрами:

          1. первый
          2. второй
          3. третий

          • Нумерованный список с заглавными римскими цифрами:

          1. первый
          2. второй
          3. третий

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

          1. первый
          2. второй
          3. третий

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

          1. первый
          2. второй
          3. третий

          Доброго всем времени суток, мои дорогие друзья и читатели. Вчера я справлял и хочу сказать, что прошло всё хорошо, как и планировалось — в семейном кругу. Ну это так и должно было быть. Всё таки сидели в семейном кругу. Ну 19 июня буду отмечать уже с друзьями, так что будет продолжение банкета. Но сегодня мы наконец можем вернуться в рабочие будни (правда я в отпуске) и продолжить изучение html языка.

          Вы знаете? Вчера мы как раз с супругой составляли список того, что нужно покупать в дом, на день рождения, на отдых, и мне как раз пришло в голову: «О. А следующую статью я как раз посвящу спискам в html.» Вообще существует два основных типа, поэтому каждому типу я захотел посвятить отдельную статью. И вот сегодня мы будем изучать маркированный список html.

          Что такое маркированный список? Это специальный список, который не содержит в себе каких-либо упорядоченных действий, но тем не менее содержит схожие по смыслу элементы. И выделяются такие списочки какими либо значками, например маркерами, дефисами и т.д. Вот у меня на блоге они у меня представлены в виде указательного пальца и использую я его, когда перечисляю что-либо. Давайте посмотрим не примере.

          Компьютерные комплектующие:

          • Материнская плата
          • Оперативная память
          • Жесткий диск
          • Видеокарта
          • И т.д.

          Давайте теперь посмотрим как это всё воспроизвести в html

          Чтобы делать такие списки, нам нужно будет использовать два парных .

            • — unordered list (неупорядоченный список). Этот тег ставится в начале списка и закрывается в самом конце. Он сообщает нам, что здесь будет находиться маркированный неупорядоченный список.
            • — list item (пункт списка). В эти теги заключается каждый элемент списка.

            На деле процедура создания маркированного списка очень легкая и я покажу вам на примере:

            • Peugeot
            • Opel

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

            Атрибуты

            Ну и конечно я не могу не рассказать вам про , относящиеся к данным тегам. Правда на самом деле эти атрибуты в html уже не используются, так как всё тоже самое проще и удобнее проделывать через стили, то есть CSS. Но я всё равно хотел бы рассказать вам для общего развития, поэтому я познакомлю вас с атрибутом type и его значениями.

            Атрибут type ставится для того, чтобы изменить вид маркера, но как я и говорил в сегодняшних реалиях его уже не принято ставить, хотя он всё равно является рабочим.

              • — это значение стоит по умолчанию, так что его вообще нет смысла прописывать. Маркеры выглядят как черные закрашенные кружочки;
                • — благодаря этому значению маркер останется круглым, но будет уже не закрашенным;
                  • — в данном случаем маркеры превратятся в маленькие черные квадратики.

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

                  Вложенный список

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

                  Сделать это абсолютно несложно, просто в тот тег

                • , который мы хотим расширить добавляем новый контейнер списка
                    , и уже туда вставляем очередной набор тегов
                  • между которыми и будут написаны модели автомобилей. Все понятно? Если нет, то смотрим, как это выглядит в коде.

                    Теперь сохраняем и запускаем всё это дело в браузере. Смотрите, что у нас получилось: теперь в каждом элементе списка есть еще один новый cписок. Этого-то мы и добивались. И если вы заметили, то маркеры по умолчанию ставятся другие, нежели родительские. Это сделано специально, чтобы не путаться, но вы можете поставить нужный атрибут и выбрать свой маркер. Я думаю, что тут всё должно быть понятно.

                    Но в дальнейшем мы изучим CSS и будем делать уже всё в соответствии, как и надо. Благодаря стилям можно намного улучшить отображение списка и даже сделать собственный маркер. Видите меню у меня на блоге (Главная, Все статьи, Об авторе и т.д.)? Да и вообще можно зайти практически на любой сайт и увидеть подобное меню. Так вот, все эти пункты меню — это элементы списка, только он обработаны через CSS.

                    Ну в общем я думаю, что суть вы уловили. Но если вы хотите хорошо разбираться в HTML и CSS, то я вам настоятельно рекомендую посмотреть курс "HTML5 и CSS3 с нуля до профи ". Благодаря этому курсу вы с легкостью изучите все основы html и css, а также научитесь самостоятельно верстать несколько типов сайтов: сайты-визитки, блоги, интернет-магазины, и даже лендинги. Курс действительно потрясающий.

                    С уважением, Дмитрий Костин.



                    Похожие статьи
    Типы
    • Роутеры
    • Жесткие диски
    • Не включается
    • Принтеры
    • Тормозит
    • Зависает
    • Вирусы
    • Планшеты
    Популярные статьи
    Новые статьи