Содержимое - CSS свойства

79
посл. ред. 08.06.2016

Краткое описание свойств

content
Используется для создания содержимого в документе.
counter-reset
Устанавливает счётчик в документе или сбрасывает значение уже заданного.
counter-increment
Выполняет приращение счётчика в документе.
quotes
Определяет стиль кавычек для элементов и псевдоэлементов страницы, которые их добавляют.

Свойство content

Это свойство используется с псевдоэлементами ::before и ::after для создания содержимого в документе.

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

Значение по умолчанию normal
Применяется к псевдоэлементам ::before и ::after
Наследуется нет
Имя свойства в DOM content

Значения

  • none - псевдоэлемент не создаётся.
  • normal - для псевдоэлементов ::before и ::after преобразуется в none.
  • Любое сочетание нижеприведённых значений:
    • Строку в одинарных или двойных кавычках.
    • open-quote - добавляет открывающую кавычку. Стиль кавычки задаётся свойством quotes.
    • close-quote - добавляет закрывающую кавычку. Стиль кавычки задаётся свойством quotes.
    • no-open-quote - добавляет пустую открывающую кавычку. Необходимо для сохранения уровня вложенности.
    • no-close-quote - добавляет пустую закрывающую кавычку. Необходимо для сохранения уровня вложенности.
    • attr() - добавляет в виде строки содержимое атрибута, указанного в скобках. Если элемент не содержит данного атрибута, ничего не добавляется.
    • url() - добавляет содержимое из внешнего файла, адрес которого указывается в скобках.
    • counter(name, style) - добавляет значение счётчика name, заданного с помощью свойства counter-reset. Стиль счётчика задаётся необязательным параметром style (по умолчанию decimal). Если в элементе одновременно происходит задание счётчика и его использование, то сначала выполняются свойства counter-reset и counter-increment, а потом content.
    • counters(name, str, style) - аналогично counter(), но с дополнительным обязательным параметром str. В нём указывается строка, которая добавляется между счётчиками с одинаковым именем name, если они вложены друг в друга.

Примеры

Применение counter():

<html>
<head>
  <title>CSS свойства</title>
  <style>
    body { /* Устанавливает счётчик head=0 */
      counter-reset: head;
    }
    h2::before { /* Увеличивает счётчик на 1 и добавляет к заголовку */
      content: "Глава " counter(head) ". ";
      counter-increment: head;
    }
  </style>
</head>
<body>
  <h2>Фон в CSS</h2>
  <h2>Тени в CSS</h2>
</body>
</html>
Глава 1. Фон в CSS
Глава 2. Тени в CSS

Применение counters():

<html>
<head>
  <title>CSS свойства</title>
  <style>
    ul {
      counter-reset: list;
      list-style-type: none;
    }
    li::before {
      content: counters(list, ".", upper-roman) " ";
      counter-increment: list;
    }
  </style>
</head>
<body>
  <ul>
    <li>item
      <ul>
        <li>item</li>
        <li>item</li>
      </ul>
    </li>
    <li>item</li>
    <li>item</li>
  </ul>
</body>
</html>
I. item
    I.I item
    I.II item
II. item
III. item

Свойство counter-reset

Устанавливает счётчик в документе или сбрасывает значение уже заданного.

Счётчик, заданный этим свойством, используется в функциях counter() и counters() свойства content.

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

Значение по умолчанию none
Применяется ко всем элементам
Наследуется нет
Имя свойства в DOM counterReset

Значения

Значение данного свойства содержит список имен счётчиков, каждому из которых может быть задано целое число. Оно определяет значение, которое устанавливается счётчику при каждом вхождении элемента (по умолчанию 0). Слова none, inherit и initial нельзя использовать в качестве имён счётчиков.

Примеры

counter-reset: lesson; /* Задаёт счётчик lesson с начальным значением 0 */
counter-reset: lesson 5; /* Задаёт счётчик lesson с начальным значением 5 */
counter-reset: lesson 2 part 3; /* Задаёт счётчик lesson с начальным значением 2 и счётчик part с начальным значением 3 */

Примечания

Установка счётчика в элементе-потомке автоматически создаёт новый экземпляр счётчика, а не сбрасывает счётчик предка. Это важно для ситуаций, подобных вложению списков в HTML, где элементы могут быть вложенными внутри себя произвольное количество раз.

Свойство counter-increment

Выполняет приращение счётчика в документе.

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

Значение по умолчанию none
Применяется ко всем элементам
Наследуется нет
Имя свойства в DOM counterIncrement

Значения

Значение данного свойства содержит список имен счётчиков, каждому из которых может быть задано целое число. Целое число указывает, на какую величину следует увеличить значение счётчика при каждом вхождении (по умолчанию 1). Допускаются отрицательные значения и ноль.

Примеры

counter-increment: lesson; /* Увеличивает счётчик lesson на 1 */
counter-increment: lesson 5; /* Увеличивает счётчик lesson на 5 */
counter-increment: lesson 2 part 3; /* Увеличивает счётчик lesson на 2 и счётчик part на 3 */

Если в элементе одновременно происходит задание счётчика и его приращение, то сначала выполняется свойство counter-reset, а потом counter-increment.

counter-increment: lesson;
counter-reset: lesson 5;
/* Сбрасывает счётчик lesson до значения 5, затем увеличивает на 1 */

Свойство quotes

Определяет стиль кавычек для элементов и псевдоэлементов страницы, которые их добавляют.

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

Значение по умолчанию зависит от настроек браузера
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM quotes

Значения

В качестве значения устанавливаются пары открывающих и закрывающих кавычек.

Сначала выбирается первая пара кавычек. Для вложенного элемента выбирается вторая пара, и т.д. Для задания кавычек лучше использовать кодировку Unicode, так как не все символы можно набрать на клавиатуре:

Символ Код символа
" \0022
' \0027
‹ \2039
› \203A
« \00AB
» \00BB
‘ \2018
’ \2019
“ \201C
” \201D
„ \201E

Примеры

quotes: "«" "»" '"' '"';
quotes: "\00AB" "\00BB" "\0022" "\0022";