list-style-position в CSS


Содержание

List style ( type, image, position) — Css правила для настройки внешнего вида списков в Html коде

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

Чуть раньше мы уже успели узнать как задается фон через background, как оформляется текст с помощью text-decoration, vertical-align, align и indent и как можно работать со шрифтами с помощью Font (Weight, Family, Size, Style). Ну, а еще чуть раньше мы во всех подробностях рассмотрели всевозможные селекторы CSS и их различные комбинации для указания именно того элемента Html кода, для которого нужно будет применить определенные свойства стилевого оформления.

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

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

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

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

Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про валидатор W3C по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «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. Вот так будет выглядеть размещение области маркера с ins >

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

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

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

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

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

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

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

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

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

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

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

list-style-position

Свойство CSS list-style-position используется для изменения положения маркеров в нумерованном и маркированном списках, устанавливая их внутри блока или за его пределами. Когда маркеры находятся вне блока списка (по умолчанию), то они всегда располагаются на некотором расстоянии от содержимого пунктов списка. Если же маркеры расположены внутри, то они становятся первыми инлайн-элементами в пунктах списка, которые, к тому же, всплываю влево. То есть содержимое этих пунктов обтекает маркеры справа.

Список с разными значениями свойства list-style-position.

Вместо list-style-position можно использовать универсальное свойство list-style.

Тип свойства

Применяется: к тегам , , и элементам с display: list-item .

Значения

Значением свойства list-style-position является одно из ключевых слов определяющих положение маркеров.

  • outs >list-style-position от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: outside.

Синтаксис

Пример CSS: использование list-style-position

Результат. Использование свойства CSS list-style-position.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .


CSS list-style-position Property

Example

Specify the position of the list-item markers:

ul.a <
list-style-position: outside;
>

ul.b <
list-style-position: inside;
>

Definition and Usage

The list-style-position property specifies the position of the list-item markers (bullet points).

list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically:

  • Coffee — A brewed drink prepared from roasted coffee beans.
  • Tea
  • Coca-cola

list-style-position: inside; means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

  • Coffee — A brewed drink prepared from roasted coffee beans.
  • Tea
  • Coca-cola
Default value: outside
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.listStylePosition=»inside» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

СSS Свойство list-style-position

Пример

Укажите положение элемента списка маркеров:

ul.a <
list-style-position: outside;
>

ul.b <
list-style-position: inside;
>

Определение и использование

Свойство list-style-position определяет положение элемента списка маркеров (пункты).

Свойство list-style-position: outside; означает, что пуля точки будут вне элемента списка. В начале каждой строки элемент списка будет выровнен по вертикали:

  • Кофе — Варится напиток, приготовленный из обжаренных кофейных зерен.
  • Чай
  • Кока-кола

Свойство list-style-position: inside; означает, что пуля точки будут внутри элемента списка. Так как он является частью элемента списка, это будет часть текста и сдвинет текст:

  • Кофе — Варится напиток, приготовленный из обжаренных кофейных зерен.
  • Чай
  • Кока-кола
Значение по умолчанию: outside
Унаследованный: да
Анимируемый: нет. Прочитать о animatable
Версия: CSS1
JavaScript синтаксис: object.style.listStylePosition=»inside» Попробовать

Поддержка браузеров

Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.

list-style-position

The list-style-position property is used to specify the position of markers (bullets or images used as markers) of a list item with respect to the item’s principal block box.

That is, it defines whether the markers should be positioned inside the element’s box or outside of it.

The list style is applied to list items and elements that have display: list-item , and therefore the position of the list style specifies the position of the marker inside any of these boxes.

Official Syntax

  • Syntax:
  • Initial: outside
  • Applies To: elements with display: list-item
  • Animatable: no
  • Values

    The marker box is fixed with respect to the principal block box’s border and does not scroll with the principal block box’s content. In CSS 2.1, a browser may hide the marker if the element’s overflow is other than visible . (This is expected to change in the future.)

    inside The marker box is placed as the first inline box in the principal block box, before the element’s content and before any :before pseudo-elements. inherit The list item inherits its marker position from its parent.

    Examples


    The following sets an image as a list marker using the list-style-image property. property, and sets the position of that image inside the block box of the items.

    The following sets the marker image using the list-style shorthand property, leaving the list-style-position unset, which will default to the value outside .

    Live Demo

    The list items in the following demo have a light gray background to highlight the boundaries of their principal block box. The first example shows the default markers position ( outside ), and the second one shows the markers positioned inside the list items’ box using list-style-position . The third and fourth examples show the same positions but using an image as a marker, that is applied using the list-style-image property.

    Browser Support

    The list-style-position property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

    Further Reading

    Written by Sara Soueidan. Last updated February 4, 2015 at 3:36 pm by Mary Lou.

    Do you have a suggestion, question or want to contribute? Submit an issue.

    list-style-position

    Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
    Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
    Поддерживается Да Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да Да

    Краткая информация

    CSS (ЦСС) CSS (ЦСС)1
    Значение по умолчанию outside
    Наследуется Да
    Применяется К тегам , ,
    ,

      и

        , а также ко всем элементам, у которых указано свойство стиля display: list-item
    Аналог ШТМЛ Нет
    Ссылка на спецификацию http://www.w3.org/TR/CSS21/generate.ШТМЛ#propdef-list-style-position

    Описание

    Определяет, как будет размещаться маркер относительно контента. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается контентом (рис. 2).

    Рис. 1. Значение outside

    Рис. 2. Значение inside

    Синтаксис

    list-style-position: inside | outside

    Аргументы

    ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

    Рис. 3. Применение параметра list-style-position

    Объектная модель

    [window.]document.getElementBy >elementID «).style.listStylePosition

    Примечание

    В браузере Internet Эксплорер 6 при использовании нумерованного списка


      и значения inside параметра list-style-position , числа идущие с 10, начинают накладываться на контент списка.

    List-style-position в CSS

    Свойство list-style-position задает положение маркера в списке.

    Свойство применимо к тегам , ,
    ,

      и
        .

    Значение

    — outside — маркер располагается за пределами списка,

    — inside – маркер располагается внутри границ списка — его обтекает текст,

    — inherit — принимает значение свойства родительского элемента.

    Значение по умолчанию

    Пример

    Пример — Свойство list-style-position

    «-//W3C//DTD HTML 4.01 Transitional//EN»
    «http://www.w3.org/TR/html4/loose.dtd» >

    «Content-Type» content= «text/html; charset=windows-1251» >
    Свойство list-style-position

      : inside ; w >: 250px «>
    • Маркеры располагаются внутри списка.
    • Текст обтекает маркеры.

      : outside ; w >: 250px «>
    • Маркеры вынесены за пределы границ списка!
    • Вот так!

    CSS-свойство List

    Двумя наиболее распространенными типами HTML-списков являются упорядоченный и неупорядоченный. Для их стилизации списков мы будем использовать свойство list-style CSS .

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

    list-style-type

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

    Стандартное значение этого свойства – disc , но можно использовать и другие значения: circle , square , none . Кроме этого можно использовать такие значения, как upper-alpha , lower-alpha , upper-roman , lower-roman , decimal и т. д.


    В приведенном ниже примере свойство list-style-type имеет значение square :

    Если вам вообще не нужны маркеры, то CSS list style type необходимо присвоить значение none :

    Поля и отступы

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

    В приведенном ниже примере использования CSS ul li list style мы прибавляем поля по 30px над и под списком:

    В следующем примере мы полностью исключаем поля:

    В примере CSS ul list style мы убираем отступы:

    Здесь мы задаем списку фиксированную ширину:

    List-style-position

    Это свойство отвечает за то, как текст внутри list style CSS будет переходить на следующую строку. Стандартное значение outside означает, что при переносе строки текст также получит выравнивание по левому краю. Если выставлено значение inside , то строка будет перенесена под маркер списка.

    В примере, приведенном ниже, представлен список, в котором свойство list-style-position выставлено на outside ( значение по умолчанию ):

    В следующем примере показано, что будет, если свойство list-style-position будет иметь значение inside . Таким образом, текст на новой строке будет начинаться прямо под маркером:

    List-style-image

    Свойство list-style-image позволяет использовать собственную пиктограмму в качестве маркера.

    В примере CSS ul list style мы используем изображение звезды вместо маркера списка:

    Сокращение list-style

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

    Список inline

    По умолчанию, все пункты списка перечисляются с новой строки, то есть, вертикально. Если нужно выводить список горизонтально или строчно ( inline ), нужно присвоить элементам списка display inline .

    В приведенном ниже примере представлен строчный список:

    Стилизация упорядоченного списка

    Теперь пришло время задать стиль для CSS ol list style . По умолчанию, list-style-type для упорядоченного списка установлен при помощи десятичного числа:

    Чтобы изменить тип, можно поменять значение на upper-alpha , lower-alpha , upper-roman , lower-roman .

    Ниже приведен пример, где list-style-type имеет значение upper-alpha :

    В следующем примере list-style-type имеет значение lower-roman :

    Данная публикация представляет собой перевод статьи « CSS List » , подготовленной дружной командой проекта Интернет-технологии.ру

    CSS для списков: свойство list-style и его производные

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

    List-style-type: изменение маркера / нумерации

    Если вам требуется заменить стандартные маркеры в виде точки либо арабских цифр на что-то другое, вы можете воспользоваться свойством CSS list-style-type и дополнительными значениями для него (см. таблицу):

    Вид маркера / нумерации Подходящее значение
    Маркер-точка (по умолчанию) disc
    Маркер-окружность circle
    Маркер-квадрат square
    Нумерация арабскими цифрами (по умолчанию) decimal
    Нумерация арабскими цифрами (перед числами 1-9 добавляется 0) decimal-leading-zero
    Нумерация прописными буквами латинского алфавита upper-latin
    Нумерация строчными буквами латинского алфавита lower-latin
    Наследование значений родителя inherit
    Удаление маркеров / нумерации none

    Примечание: в таблице приведены только основные значения. Более обширный список (грузинская и армянская нумерации, нумерация римскими числами, греческими буквами и т. д.) доступен здесь.

    Пример написания кода CSS:

    Скриншот: варианты маркеров / нумерации списков

    List-style-image: маркер-картинка

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

    Скриншот: примеры собственных графических маркеров

    List-style-position: расположение маркеров / нумерации

    Для CSS свойства list-style-position, которое задает расположение маркеров / нумерации относительно текста, есть два значения – outside и inside . По умолчанию используется значение outside – это значит, что маркер / число отображается как бы отдельно от текста списка, тогда как при значении inside маркер / число располагается внутри текстового блока и обтекается текстом.

    Ниже показан пример записи стиля:

    Скриншот для лучшего понимания значений outside и inside

    List-style: все вместе

    Используя одно-единственное свойство CSS list-style, можно записать все вышеперечисленное в одной строке – то есть, сразу же задать вид маркеров / нумерации и их расположение относительно текста. Такой код будет более кратким и удобным. Ниже показано два примера, как пишется подобный стиль:

    Далее в учебнике: что такое блоки.

    list-style-position

    Поддержка браузеров

    IE Opera Chrome Firefox Safari
    IE до 7.0 (включ.) не поддерживает значение inherit. В IE6 числа нумерованного списка при list-style-position:inside могут накладываться на текст + + + +

    Пример

    Определяем позицию маркера для элементов списка:

    Описание и использование

    Свойство list-style-position определяет место расположение маркера списка.

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

    Илон Маск рекомендует:  Style таблицы стилей (нет в html 2 0)
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL