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

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 пропишите

list-style-type: none;

Пример :

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

Результат :

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

list-style-image

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

Пример :

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

Результат :

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

Пример :

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

Результат :

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

Пример :

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

Результат :

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

Пример :

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

Результат :

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

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

Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки .

Нумерованный список

Нумерованный список - это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее.

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

Для создания нумерованных списков в HTML используется тег

, внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега
1. :

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

   1. Кофе
   2. Чай
   3. Молоко
   Попробовать »

   Примечание: тег

   в качестве дочерних элементов может содержать только теги
   1. , то есть всё содержимое нумерованного списка должно размещаться внутри элементов
   2. . Тег
   3. , в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.

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

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

      Для создания маркированных списков в HTML применяется тег

      , внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками используется тег
      • , который содержит в себе всё отображаемое содержимое списка):

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

        • Кофе
        • Чай
        • Молоко
        Попробовать »

        Виды маркеров

        Виды маркеров нумерованного списка можно изменить с помощью атрибута type . Данный атрибут поддерживает пять видов маркеров:

        Маркированные списки не имеют атрибута type , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type , с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square .

        Изменение маркеров у списков:

        Нумерованный список c атрибутом type="a":

        1. Яблоки
        2. Бананы
        3. Лимоны

        Нумерованный список c атрибутом type="I":

        1. Яблоки
        2. Бананы
        3. Лимоны

        Виды маркеров маркированных списков:

        • Яблоки
        • Бананы
        • Лимоны
        • Яблоки
        • Бананы
        • Лимоны
        Попробовать »

        CSS свойство list-style-type , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть .

        Горизонтальный список

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

        Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block , в зависимости от того, какие ещё свойства вы собираетесь использовать.

        Нумерованный список

        1. Яблоки
        2. Бананы
        3. Лимоны

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

        • Яблоки
        • Бананы
        • Лимоны
        Попробовать »

        После этого все пункты списка выстроятся в одну строку. Обратите внимание, что у пунктов списка пропадут маркеры и между ними не будет даже пробела, но отступ слева у списка останется.

        Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть .

        С помощью 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	Пример
        	работоспособность всех ссылок поддержку разных браузеров читабельность текста
        	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
        	Что следует учитывать при тестировании сайта: работоспособность всех ссылок поддержку разных браузеров читабельность текста
        	Нумерованный список с арабскими цифрами: первый второй третий
        	Нумерованный список со строчными римскими цифрами: первый второй третий
        	Нумерованный список с заглавными римскими цифрами: первый второй третий
        	Нумерованный список со строчными буквами латинского алфавита: первый второй третий
        	Нумерованный список с заглавными буквами латинского алфавита: первый второй третий

        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

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

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

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

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

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

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

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

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

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

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

          • Peugeot
          • Opel

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

          

          Атрибуты

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

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

          

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

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

                

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

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

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

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

                  

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

                  

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

                  

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

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