НТВ плюс 

Html и css оформление списков. Оформление списков: группа свойств list-style в CSS. Тип маркера списка list-style-type

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

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

Свойство List style — оформление списка на html странице

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

Все эти свойства допустимо использовать как для html элементов li, так и для элементов ul и ol. Единственное отличие, если правила прописать для конкретного значения списка li, то оно только для него и применится. А если эти же css правила прописать для контейнеров ul или ul, то они применятся для всех элементов li заключенных в этих контейнерах.

Начнем с атрибута list-style-type , который задает вид маркеров или нумерации у пунктов списка:

list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit

Как видно, свойство list-style-type имеет много доступных значений, которые могут задавать как вид маркера, так и различные виды нумерации.

  • disc - маркер в виде черного кружка (значение по умолчанию для маркированных списков).
  • circle - маркер в виде не закрашенного кружка.
  • square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от браузера.
  • decimal - нумерация арабскими цифрами (значение по умолчанию для нумерованных списков).
  • decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.
  • lower-roman - нумерация маленькими римскими цифрами.
  • upper-roman - нумерация большими римскими цифрами.
  • lower-greek - нумерация маленькими греческими буквами.
  • lower-alpha и lower-latin - нумерация маленькими латинскими буквами.
  • upper-alpha и upper-latin - нумерация большими латинскими буквами.
  • armenian - нумерация традиционными армянскими цифрами.
  • georgian - нумерация традиционными грузинскими цифрами.
  • none - маркерация и нумерация осуществляться вообще не будет.

Так примерно будут выглядеть элементы списка в браузере с различными значениями list-style-type:

При использовании CSS стилей не важно какой элемент (OL или UL) используется для создания списка. OL и UL отличаются только поведением по умолчанию и с помощью свойства list-style-type вы можете легко превратить один вид списка в другой.

Атрибут стиля list-style-image позволяет задавать в качестве маркера пунктов списка графическое изображение . При использовании атрибута list-style-image значение атрибута list-style-type игнорируется:

list-style-image: none|<интернет-адрес файла изображения>|inherit

Значение none убирает маркер изображение и устанавливает обычный, не графический. Это поведение по умолчанию.

При указании адреса файла изображения, на место маркера будет вставлена картинка. Как и при использовании , в качестве адреса картинки можно использовать как абсолютные так и относительные адреса. В случае если браузер не сможет подгрузить изображение, то будет использоваться маркер или нумерация по умолчанию или то, что прописано в свойстве в list-style-type.

Пример списка с картинкой в качестве маркера:


  • первый пункт списка;

  • второй пункт списка;

  • третий пункт списка.

А вот как это выглядит:

  • первый пункт списка;
  • второй пункт списка;
  • третий пункт списка.

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

И последнее свойство CSS из серии list-style — list-style-position, которое позволяет указать местоположение маркера или нумерации в пункте списка. В качестве значения может быть два варианта:

list-style-position: inside|outside

В случае значения inside маркер или нумерация помещается как бы внутри списка, а в случае outside за пределами элементов li. По умолчанию используется значение outside и маркер выносится за пределы.

Пример списка с различными значениями list-style-position:

  • в первом пункте все по умолчанию;
  • во втором пункте list-style-position установлен в inside. В этом случае, обратите внимание, вторая строка размещается на одном уровне с маркером;
  • в этом пункте list-style-position равен outside.

Сборное CSS правило list-style

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

Разделять значения в сборном правиле list-style следует пробелами:

list-style: list-style-type list-style-image list-style-position;

Реальное CSS правило для оформления списков может выглядеть примерно вот так:

list-style: circle url (http://сайт/images/marker.png) outside;

Таким образом свойство list-style позволяет значительно сократить объем кода, ведь вместо трех правил достаточно задать лишь одно.

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

list-style: none;

Тоже самое можно сделать используя свойство list-style-type:

list-style-type: none;

На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!

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

    Результат :

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

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

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

    List style — оформление списков в Html коде

    Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода. Но обо всем по порядку.

    То, что мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI, так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения list-style для этих тегов?

    Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:

    Давайте начнем с list-style-type , которое позволяет задать тип маркирации для отдельных элементов Html списка. Для этого правила допустимы следующие значения:

    1. None — маркирация осуществляться вообще не будет (list-style-type:none; применено для этого пункта и поэтому у него нет маркера)
    2. Disc — закрашенный кружок (для этой строки как раз применено list-style-type:disc;)
    3. Circle — окружность в качестве маркера
    4. Square — квадратик в качестве маркера
    5. Decimal — арабские цифры (list-style-type:decimal;)
    6. lower-alpha — латинские буквы в нижнем регистре
    7. upper-alpha — латинские буквы в верхнем регистре
    8. lower-roman — римские цифры в нижнем регистре
    9. upper-roman — римские цифры в верхнем регистре

    Как вы думаете, с помощью каких элементов Ul или Ol был создан расположенный чуть выше список? Вопрос на засыпку. Оказывается, что это уже не важно, хотя в данном конкретном случае я использовал Ol, но изменив его на Ul — внешний вид останется прежним, ибо он задается для каждого элемента своим значением CSS правила list style type.

    По сути Ul и Ol отличаются только поведением по умолчанию (Ul — маркирует, а Ol — нумерует). Но если вы захотите, то сможете легко превратить один вид списка в другой с помощью list-style-type. Шрифт для маркирования цифрами или буквами используется точно такой же, какой был вами определен для содержимого тегов LI. Например, поменяв цвет шрифта для списка мы поменяем и цвет маркеров :

    1. Поменяли цвет текста (list-style-type:lower-roman;color:red) и поменялся цвет маркера

    Давайте перейдем с следующему CSS свойству — list-style-position . С помощью него можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:

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

    Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:

    1. Здесь все по умолчанию
    2. Вот так будет выглядеть размещение области маркера с inside. Обратите внимание, что вторая строка в этом элементе и маркер расположены на одном уровне
    3. Здесь все по умолчанию

    List-style-image и сборное Css правило

    Далее у нас на очереди List-style-image — позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но вы можете прописать функционал Url (), указав в нем путь до изображения, которое в последствие будет выполнять роль маркера в этом списке:

    Выглядеть это может так:

    List-style-image: url(https://сайт/images/list_star.png);

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

    Как вы помните, в статье про я говорил, что картинки относятся к строчным элементам (собственно, для браузера эта та же самая буква, но иногда очень большого размера).

    Вот картинка и встает на место маркера (буквы или цифры). При этом высота строки с элементом списка будет увеличена, если вы вставите в качестве маркера большую картинку (как это произошло во втором элементе приведенного чуть выше примера).

    В функционале для list style image можно указывать как на изображения. Если картинка не подгрузится, то будет использоваться маркер или нумерация по умолчанию, либо то, что прописано в list-style-type для этого элемента списка.

    Чтобы записать все три описанных выше CSS правила в одно единое, можно будет использовать List-style, которое является сборным для оформления списков. Порядок указания значений в нем не имеет никакого значения. Те значения, которые вы не зададите в List-style, в явном виде будут интерпретированы браузером со значениями принятыми по умолчанию.

    Где посмотреть значения по умолчанию? Да все там же — в спецификации CSS валидатора W3C в столбце «Initial value» напротив интересующих вас свойств:

    Значения для отдельных свойств в сборном правиле List-style разделяются пробелами. Места расположения, как уже упоминал, не важны:

    На практике это может выглядеть, например, так:

    List-style:inside upper-roman url(https://сайт/images/list_star.png);

    Можно использовать значения в любом порядке и любом количестве (начиная от одного). Кстати говоря, с помощью списков чаще всего формируются на сайтах меню и свойство List-style при этом используется для того, чтобы убрать маркеры из списков меню , которые там совершенно не нужны:

    List-style-type:none;

    List-style:none;

    Удачи вам! До скорых встреч на страницах блога сайт

    посмотреть еще ролики можно перейдя на
    ");">

    Вам может быть интересно

    Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
    Float и clear в CSS - инструменты блочной верстки
    Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
    Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
    Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
    CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в 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

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