Списки в CSS

[WTBG]

Генерируемое содержимое и списки

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


list-style-type

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

Значение:

• disc - маркер в виде диска (по умолчанию).
• circle - маркер в виде окружности.
• square - маркер в виде квадрата.
• decimal - списки, нумерованные с помощью десятичных чисел, начиная с 1,
• decimal-leading-zero - списки, нумерованные с помощью десятичных чисел с ведущими нулями, например 01, 02, 03 и т.д.
• lower-roman - списки, нумерованные с помощью строчных римских цифр.
• upper-roman - списки, нумерованные с помощью прописных римских цифр
• hebrew - списки, нумерованные с помощью цифр иврита.
• georgian - списки, нумерованные с помощью грузинских цифр.
• armenian - списки, нумерованные с помощью армянских цифр.
• сjk-ideographic - списки, нумерованные с помощью идеограмм,
• lower-latin, lower-alpha - использование строчных ASCII-символов.
• upper-latin, upper-alpha - использование прописных ASCII-символов.
• lower-greek - использование строчных греческих букв.
• hiragana - использование букв японской азбуки хирагана.
• hiragdna-iroha - использование букв японской азбуки хирагана ироха,
• katakana-iroha - использование буке японской азбуки катакана ироха.
• none - нет ни маркеров ни номеров.
• inherit - принимается значение родительского элемента.

ol {list-style: upper-alpha}

list-style-image

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

Значение:

• none - изображение, предназначенное быть маркером, не установлено (по умолчанию).
• любой соответствующий стандарту URL - URL к изображению, предназначенному быть маркером.
• inherit - принимается значение родительского элемента.

ul {list-style-image: url("bullet3.gif")}Примеры: [1]

marker-offset

Определяет расстояние между маркером и текстом в списке

Значение:

• auto - пробел устанавливается браузером (по умолчанию).
• любая соответствующая стандартам длина - пробел между маркером и текстом.
• inherit - принимается значение родительского элемента.

h1 {marker-offset: 12px}

list-style-position

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

Значение:

• inside - маркер внутри элемента.
• outside - маркер вне элемента (по умолчанию).
• inherit - принимается значение родительского элемента.

ul {llist-style-position: inside}

list-style

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

Значение:

• list-style-type - вид маркера.
• list-style-position - положение маркера.
• list-style-image - изображение для маркера.
• inherit - принимается значение родительского элемента.

ul {list-style: circle inside url("bullet4,gif")}

content

Применяется вместе с псевдоэлементами :before (перед) и :after (после), чтобы сгенерировать содержимое. Не поддерживается IE.

Значение:

• любая соответствующая стандартам последовательность символов - последовательность, которая должна появиться перед элементом или после него.
• любой соответствующий стандарту URL - URL к внешнему файлу; URL должен появиться перед элементом или после него.
• counter() - определение счетчика с именем для вставки значения, управляемого свойствами counter-increment и counter-reset.
• open-quote, close-quote - возможность использования кавычек. Применяются вместе со свойством quotes.
• no-open-quote, no-close-quote - отсутствие кавычек.
• attr() - вставка значения атрибута для элемента.
• inherit - принимается значение родительского элемента.

pre:after {content: "спасибо и спокойной ночи."}

quotes

Определяет пары кавычек для использования на каждом уровне вложенности. Не поддерживается IE.

Значение:

• первая соответствующая стандартам последовательность символов - два символа, которые должны использоваться в качестве самой внешней пары кавычек.
• вторая соответствующая стандартам последовательность символов - два символа, которые должны использоваться в качестве внутренней пары кавычек.
• none - отсутствие кавычек.
• inherit - принимается значение родительского элемента.

q {quotes: '"' '"' '<' '>'}

counter-increment

Увеличивает значение определенного счетчика.

Значение:

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

h1 {counter-increment: MyCounter 2}

counter-reset

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

Значение:

• none - значение счетчика не сбрасывается (по умолчанию).
• имя счетчика и соответствующее стандартам число - идентификация счетчика и прием целого значения, которое присваивается счетчику при сбросе. Такими значениями могут быть и отрицательные целые числа.
• inherit - принимается значение родительского элемента.

h1 {counter-reset: MyCounter 2}

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