CSS

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

меню

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

С помощью этих свойств выполняется управление, как стилем элементов списков, так и установкой нумерации и маркировки. С их помощью можно сделать так, чтобы, например, список начинался с 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}

Примеры: [1][2]

      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}

Примеры:[1]

      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: "спасибо и спокойной ночи."}

Примеры: [1]

      quotes  

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

Значение:

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

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

Примеры: [1]

      counter-increment  

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

Значение:

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

   h1 {counter-increment: MyCounter 2}

      counter-reset  

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

Значение:

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

   h1 {counter-reset: MyCounter 2}
На верх Написать письмо WEB-мастеру Печать Добавить в избранное Cделать стартовой