Square list style type: symbols() — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

Содержание

CSS list-style-type Property

❮ Предыдущая Следующая ❯


пример

Установите несколько различных стилей списка:

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}

Попробуй сам «

Больше «Try it Yourself» примеры ниже.

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

Список стиле типа определяет тип элемента списка маркер в списке.

Значение по умолчанию:disc
Наследование:yes
Animatable:no. Read about animatable
Версия:CSS1
Синтаксис JavaScript: object .style.listStyleType=»square» Try it

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

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

Имущество
list-style-type 1,0 4.0 1,0 1,0 3.5

Note: Internet Explorer и Opera 12 и более ранние версии не поддерживают значения: CJK-идеографическая, Hebrew, хирагана, хирагана-Ироха, катакана, и катакана-Ироха.

Note: IE8 и ранее, поддерживают только значения свойств: десятичного ведущих-ноль, низший греческий, низший латина, верхний латинский, армянский, грузинский, и наследовать , если указан! DOCTYPE

CSS Синтаксис

list-style-type:value;

Значения свойств

Стоимость Описание Сыграй
disc Значение по умолчанию. Маркер представляет собой заполненный круг Сыграй »
armenian Маркер традиционная армянская нумерация Сыграй »
circle Маркер представляет собой круг Сыграй »
cjk-ideographic Маркер скольжения Идеографические номера Сыграй »
decimal Маркер представляет собой число Сыграй »
decimal-leading-zero Маркер представляет собой число с ведущими нулями (01, 02, 03 и т. д.) Сыграй »
georgian Маркер является традиционной грузинская нумерация Сыграй »
hebrew Маркер является традиционной нумерации иврит Сыграй »
hiragana Маркер является традиционной нумерации хирагана Сыграй »
hiragana-iroha Маркер является традиционной хирагана нумерации Ироха Сыграй »
katakana Маркер является традиционной нумерации катакана Сыграй »
katakana-iroha Маркер является традиционной катакана нумерации Ироха Сыграй »
lower-alpha Маркер ниже-альфа (a, b, c, d, e, etc.) Сыграй »
lower-greek Маркер нижнего греческого Сыграй »
lower-latin Маркер представляет собой низший Latin (a, b, c, d, e, etc.) Сыграй »
lower-roman Маркер низший романский (i, ii, iii, iv, v, etc. ) Сыграй »
none Ни один маркер не отображается Сыграй »
square Маркер представляет собой квадрат Сыграй »
upper-alpha Маркер верхнего альфа (A, B, C, D, E, etc.) Сыграй »
upper-latin Маркер верхнего Latin (A, B, C, D, E, etc.) Сыграй »
upper-roman Маркер верхнего романский (I, II, III, IV, V, etc.) Сыграй »
initial Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный Сыграй »
inherit Наследует это свойство от своего родительского элемента. Читайте о унаследовать

Еще примеры

пример

Этот пример демонстрирует все различные маркеры элемента списка:

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul. c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}

ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}

Попробуй сам «

пример

Как добавить пули цвета для <ul> или <ol> путем удаления их пуль по умолчанию и добавление HTML — объект , который выглядит , как пули (&bull;) :

ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li:before {
    content: «•»; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: blue; /* Or a color you prefer */
}

Попробуй сам «

Похожие страницы

Учебник CSS: Список CSS

Справка CSS: list-style property

HTML DOM ссылка: listStyleType property

❮ Предыдущая Следующая ❯

list-style-type

«list-style-type» — это свойство css, которое меняет вид маркера для элемента списка.

Маркеры бывают двух типов: маркированного списка (тег <ul>) и нумерованного (тег <ol>).

Скопировать ссылку


  • Что такое «

    list-style-type» + синтаксис. Как уже выше было сказано о то, «что такое list-style-type» :

    «list-style-type» — это свойство css для создания двух типов списков.

    Пример синтаксиса «

    list-style-type«.

    ul.class { list-style-type: circle }

    Объяснение синтаксиса «

    list-style-type«.

    ul.class — элемент списка(класс приведен в качестве примара универсального атрибута).

    list-style-type — свойство.

    circle — значение свойства(в данном примере круг).

    Пример «

    list-style-type» по умолчанию.

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

    Не буду повторять как это делать — см.здесь

    Скопировать ссылку


  • Значения свойства «

    list-style-type«.

    Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

    «

    list-style-type» для тега <ul>

    list-style-type : disc

    Маркер в виде точки.


    list-style-type : circle

    Маркер в виде кружка.


    list-style-type : square

    Маркер в виде квадрата.


    armenian — Традиционная армянская нумерация.


    list-style-type : decimal

    Арабские числа (1, 2, 3, 4,…).


    list-style-type : decimal-leading-zero

    Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,…).


    georgian : Традиционная грузинская нумерация.


    «

    list-style-type» для тега <ol>

    list-style-type : lower-alpha

    Это значение аналогично lower-alpha.


    list-style-type : lower-greek

    Строчные греческие буквы (α, β, γ, δ,. ..).


    list-style-type : lower-roman

    Римские числа в нижнем регистре (i, ii, iii, iv, v,…).


    list-style-type : upper-roman

    Римские числа в верхнем регистре (I, II, III, IV, V,…).


    list-style-type : lower-latin

    Строчные латинские буквы (a, b, c, d,…).


    list-style-type : upper-latin[p]

    Заглавные латинские буквы (A, B, C, D,…).


    list-style-type : upper-alpha

    Это значение аналогично upper-latin.


    list-style-type : none

    Отменяет маркеры для списка.


    list-style-type : inherit

    Наследует значение родителя.


    Скопировать ссылку


  • Для «list-style-type» значение по умолчанию — «disc»(тег <ul>)

    Для того, чтобы показать начертание свойства «ist-style-type» со значением «disc», нам потребуется:

    Тег: <ul>

    Тег: <li>

    Далее возьмем выше приведенный пример из синтаксиса:

    <ul>
    <li>list-style-type = disc</li>

    <li>list-style-type = disc</li>
    </ul>

    И далее поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ul> по умолчанию.

    То получим вот такой пример «list-style-type = disc»:
    • list-style-type = disc
    • list-style-type = disc

    Скопировать ссылку


  • Пример свойства «

    list-style-type» = circle(тег <ul>).

    В этом пункте, для того, чтобы показать начертание свойства «ist-style-type» со значением «circle», нам опять потребуется:

    Тег: <ul>

    Тег: <li>

    Код с вшитым list-style-type по умолчанию…

    Добавим в наш тег <ul> класс — «example_circle» и наш код будет иметь новый вид:

    <ul>
    <li>list-style-type = circle</li>
    <li>list-style-type = circle</li>
    </ul>

    Есть «3 способа css» — используем один из них, пропишем новые свойства для list-style-type:

    <style>

    ul.example_circle {
    list-style-type: circle;
    }
    </style>

    Всё соберем вместе и поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ul>= circle.

    • list-style-type = circle
    • list-style-type = circle

    Скопировать ссылку


  • Пример c «

    list-style-type» = square(тег <ul>).

    Возьмем предыдущий пункт и заменим circle на square…

    Нам опять потребуется:

    Тег: <ul>

    Тег: <li>

    Код с вшитым list-style-type по умолчанию…

    Добавим в <ul> класс — «example_square» и новый вид:

    <ul>
    <li>list-style-type = square</li>
    <li>list-style-type = square</li>
    </ul>

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

    <style>
    ul.example_square {
    list-style-type: square;
    }
    </style>

    Всё соберем вместе и поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ul>= square.

    • list-style-type = square
    • list-style-type = square

    Скопировать ссылку


  • Пример c «

    list-style-type» = decimal(тег <ol>).

    С тегом <ul> покончили приходим к тегу <ol>

    Нам нужно:

    Тег: <ol>

    Тег: <li>

    Код с вшитым list-style-type по умолчанию…

    Добавим в <ol> класс — «example_decimal» и новый вид:

    <ol>
    <li>list-style-type = decimal</li>
    <li>list-style-type = decimal</li>
    </ol>

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

    <style>
    ol.example_decimal {
    list-style-type: decimal;
    }
    </style>

    Всё соберем вместе и поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ol>= decimal.

    1. list-style-type = decimal
    2. list-style-type = decimal

    Скопировать ссылку


  • Пример c «

    list-style-type» = decimal-leading-zero(тег <ol>).

    Нам нужно:

    Тег: <ol>

    Тег: <li>

    Код с вшитым

    list-style-type по умолчанию. ..

    Добавим в <ol> класс — «example_decimal_leading_zero» и новый вид:

    <ol>
    <li>list-style-type = decimal-leading-zero</li>
    <li>list-style-type = decimal-leading-zero</li>
    </ol>

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

    <style>
    ol.example_decimal_leading_zero{
    list-style-type: decimal-leading-zero;
    }
    </style>

    Всё соберем вместе и поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ol>= decimal-leading-zero.

    1. list-style-type = decimal-leading-zero
    2. list-style-type = decimal-leading-zero

    Скопировать ссылку


  • Пример c «

    list-style-type» = lower-greek(тег <ol>).

    Нам нужно:

    Тег: <ol>

    Тег: <li>

    Код с вшитым list-style-type по умолчанию…

    Добавим в <ol> класс — «lower-greek» и новый вид:

    <ol>
    <li>list-style-type = lower-greek</li>
    <li>list-style-type = lower-greek</li>
    </ol>

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

    <style>
    ol. lower-greek{
    list-style-type: lower-greek;
    }
    </style>

    Всё соберем вместе и поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ol>= lower-greek.

    1. list-style-type = lower-greek
    2. list-style-type = lower-greek

    Скопировать ссылку


  • Пример c «

    list-style-type» = lower-roman(тег <ol>).

    Нам нужно:

    Тег: <ol>

    Тег: <li>

    Код с вшитым list-style-type по умолчанию…

    Добавим в <ol> класс — «lower-roman» и новый вид:

    <ol>
    <li>list-style-type = lower-roman</li>

    <li>list-style-type = lower-roman</li>
    </ol>

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

    <style>
    ol.lower-roman{
    list-style-type: lower-roman;
    }
    </style>

    Всё соберем вместе и поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ol>= lower-roman.

    1. list-style-type = lower-roman
    2. list-style-type = lower-roman

    Скопировать ссылку


  • Пример c «

    list-style-type» = upper-roman(тег <ol>).

    Нам нужно:

    Тег: <ol>

    Тег: <li>

    Код с вшитым list-style-type по умолчанию…

    Добавим в <ol> класс — «upper-roman» и новый вид:

    <ol>
    <li>list-style-type = upper-roman</li>
    <li>list-style-type = upper-roman</li>
    </ol>

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

    <style>
    ol.upper-roman{
    list-style-type: upper-roman;
    }
    </style>

    Всё соберем вместе и поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ol>= upper-roman.

    1. list-style-type = upper-roman
    2. list-style-type = upper-roman

    Скопировать ссылку


  • Пример c «

    list-style-type» = lower-latin(тег <ol>).

    Возьмем предыдущий пункт и заменим значение на lower-latin… и тег <ol>

    Нам потребуется:

    Тег: <ol>

    Тег: <li>

    Код с вшитым list-style-type по умолчанию…

    Добавим в <ol> класс — «example_lower_latin» и новый вид:

    <ol>
    <li>list-style-type = lower-latin</li>
    <li>list-style-type = lower-latin</li>
    </ol>

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

    <style>
    ol.example_lower_latin {
    list-style-type: lower-latin;
    }
    </style>

    Всё соберем вместе и поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ol>= lower-latin.

    1. list-style-type = lower-latin
    2. list-style-type = lower-latin

    Скопировать ссылку


  • Пример c «

    list-style-type» = upper-latin(тег <ol>).

    Нам нужно:

    Тег: <ol>

    Тег: <li>

    Код с вшитым list-style-type по умолчанию. ..

    Добавим в <ol> класс — «upper-latin» и новый вид:

    <ol>
    <li>list-style-type = upper-latin</li>
    <li>list-style-type = upper-latin</li>
    </ol>

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

    <style>
    ol.upper_latin {
    list-style-type: upper-latin;
    }
    </style>

    Всё соберем вместе и поместим приведенный код прямо здесь и получим:

    Пример свойства «list-style-type» тега <ol>= upper-latin.

    1. list-style-type = upper-latin
    2. list-style-type = upper-latin

    Тип стиля списка

    Опубликовано: 21 ноября 2014 г. Автор: brooklynwriters

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

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

        Значение Описание
        круг Маркер круг
        диск Маркер представляет собой закрашенный кружок. Это по умолчанию
        квадрат Маркер квадратный
        Армянский Маркер с традиционной армянской нумерацией
        десятичный Маркер представляет собой число
        десятичный начальный ноль Маркер представляет собой число, дополненное начальными нулями (01, 02, 03 и т. д.)
        грузинский Маркер — традиционная грузинская нумерация (ан, бан, ган и др.)
        нижний альфа-канал Маркер нижний альфа-канал (а, б, в, г, д и т.д.)
        нижний греческий Маркер нижний греческий (альфа, бета, гамма и т.д.)
        нижний латинский Маркер нижний латинский (a, b, c, d, e и т. д.)
        строчный Маркер строчный (i, ii, iii, iv, v и т.д.)
        верхний-альфа Маркер верхний-альфа (A, B, C, D, E и т.д.)
        заглавная латиница заглавная латиница Маркер заглавная латиница (A, B, C, D, E и т.д.)
        прописной Маркер прописной (I, II, III, IV, V и т.д.)
        cjk-идеографический Маркер простой идеографический номер
        иврит Маркер имеет традиционную еврейскую нумерацию
        хирагана Маркер с традиционной нумерацией хираганы
        хирагана-ироха Маркер традиционная хирагана ироха с номером
        катакана Маркер катакана традиционная с цифрой
        катакана-ироха Маркер — традиционная катакана-ироха с нумерацией
        нет

        Themeover Справочник по CSS

        Онлайн-ссылки по CSS: Тип стиля списка

        • Могу ли я использовать? — Тип стиля списка
        • CSS-трюки — тип стиля списка
        • Mozilla — Тип стиля списка
        • Quackit — тип стиля списка
        • W3Schools — Тип стиля списка

        Онлайн-руководства по CSS: Список

        • CSS-дизайн: приручение списков
        • CSS-списки
        • Listutorial: простые руководства по спискам на основе CSS
        • Создание списков

        CSS LIST-STYLE-TYPE : CSS3.

        com — Руководство по каскадным таблицам стилей

        Это свойство используется, когда автор хочет изменить внешний вид маркеров списка по умолчанию в структурах списков HTML. Если также задано свойство ‘list-style-image’ со значением ‘none’ или URL-адрес не может быть загружен, вместо него будет использоваться значение свойства ‘list-style-type’. Это свойство всегда должно быть указано в случае, если URL-адрес, указанный в ‘list-style-image’, не может быть загружен. Если значение этого свойства непонятно, следует использовать значение «десятичное»

        Пример

        ул { тип стиля списка: квадрат }

        • текст

        Возможные значения

        inherit: Явно устанавливает значение этого свойства в родительское
        none: Маркер списка не будет отображаться для каждого элемента списка
        диск | круг | квадрат: Указывает стандартные символы для использования в качестве маркеров ненумерованного списка. Для каждого последующего элемента списка символ останется прежним. — «диск»: сплошной маркер, — «круг»: полый маркер, — «квадрат»: сплошной квадрат.
        десятичный: указывает стандартный набор символов для использования в качестве маркеров упорядоченного списка. Значения увеличиваются с каждым последующим элементом списка, используя числовую последовательность, например: десятичные целые числа — 1, 2, 3, 4, 5,…
        десятичный-начальный-ноль: Указывает стандартный набор символов для использования в качестве маркеры упорядоченного списка. Значения увеличиваются с каждым последующим элементом списка с использованием числовой последовательности, например: десятичные целые числа, дополненные начальными нулями — 01, 02, 03, 04, 05,…
        нижний латинский | верхний роман: Указывает стандартный набор символов для использования в качестве маркеров упорядоченного списка. Значения увеличиваются с каждым последующим элементом списка с использованием буквенно-цифровой последовательности, например:

        нижний латинский — i, ii, iii, iv, v,. ..

        верхний латинский — I, II , III, IV, V,…
        нижняя альфа | upper-alpha: Указывает стандартный набор систем символов для использования в качестве маркеров упорядоченного списка. Значения увеличиваются с каждым последующим элементом списка с использованием алфавитной последовательности, например: нижняя буква — a, b, c, d, e,… верхняя буква — A, B, C, D, E,…
        нижнегреческий | нижний латинский | upper-latin: Указывает стандартный набор систем символов для использования в качестве маркеров упорядоченного списка. Значения увеличиваются с каждым последующим элементом списка с использованием алфавитной последовательности, например: нижний греческий — [альфа], [бета], [гамма], [дельта],… нижний латинский — строчные латинские буквы верхний латинский — заглавные латинские буквы
        армянский | грузинский | иврит: Указывает стандартный набор систем символов для использования в качестве маркеров упорядоченного списка. Значения увеличиваются с каждым последующим элементом списка с использованием алфавитной последовательности, например:  armenian – традиционная армянская нумерация, georgian – традиционная грузинская нумерация, иврит – традиционная еврейская нумерация
        cjk-идеографический | хирагана | катакана | хирагана-ироха | katakana-iroha: Указывает стандартный набор систем символов для использования в качестве маркеров упорядоченного списка.

    • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *