Атрибуты: Параметры изменения контента.

  Атрибуты параметров изменения контента элементов тегов, в строгом смысле, не являются атрибутами стилей оформления пользовательского контента. С помощью этих атрибутов можно изменять содержание пользовательского представления внутреннего контента элементов тегов.
  Добавление контента.
  Атрибуты:
  content - Устанавливает дополнительный контент, который надо добавить к внутреннему контенту заданному в HTML-коде в поле определяемого элемента тега.
  В принципе атрибут стиля content создаёт псевдоэлемент.

Формат:

  • content:
      [open-quote | no-open-quote]
      [Значение]
      [Изображение]
      [counter(Идентификатор переменной)]
      [close-quote | no-close-quote]
      |none
      |normal
      |initial
      |inherit
      |unset

Значения:

  • open-quote - Пользовательский контент определяемого элемента должен быть предварен "кавычкой".
      Вид "кавычки" можно установить для этого элемента атрибутом стиля quotes.
  • no-open-quote - Отменяет открывающую "кавычку" в пользовательском контенте элемента тега.
  • Значение - CSS строковое значение, содержащее смысловой символьный контент, который добавится к внутреннему контенту определяемого элемента тега.
  • Изображение - CSS значение изображения, которое добавится к внутреннему контенту определяемого элемента тега.
  • Идентификатор переменной - К пользовательскому контенту определяемого элемента тега должен быть добавлен контент, который является значением переменной с заданным идентификатором (как указано в скобках после ключевого слова counter).
      Переменная с заданным идентификатором должна быть определена как переменная следования.
  • close-quote - Пользовательский контент определяемого элемента должен быть завершен "кавычкой".
      Вид "кавычки" можно установить для этого элемента атрибутом стиля quotes.
  • no-close-quote - Отменяет закрывающую "кавычку" в пользовательском контенте элемента.
  • none - Псевдоэлемент не будет создан.
  • normal - Нормализует значение созданного псевдоэлемента.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Атрибут content может быть использован только в стиле элемента тега, определенного селектором псевдоэлементов ::after и(или) ::before.
  Все значения атрибута content (естественно кроме значений inherit, initial, unset, none, normal) можно указывать списком через пробел и неоднократно.
  Значения open-quote и no-open-quote воспринимаются только в контексте с ::before.
  Значения close-quote и no-close-quote воспринимаются только в контексте с ::after.
  Добавленный атрибутом content контент пользователь не сможет выделить на экране своего устройства.
  Переменные следования.
  Технология переменных следования позволяет вводить в пространство определяемого элемента тега некие переменные, значения которых могут меняться.
  Пространством элемента тега назовём HTML-код, который включает все его "дочерние" элементы.
  Любая переменная следования может изменять своё значение только на основании очерёдности следования связанных с ней элементов в этом пространстве.
  Любой элемент тега в этом пространстве может использовать значение этой переменной в атрибуте стиля content.
  Атрибуты:
  counter-reset - Вводит в пространство определяемого элемента тега переменные следования.

Формат:

  • counter-reset:
      Идентификатор переменной [Начальное значение]
      [Идентификатор переменной [Начальное значение]] ...
      [Идентификатор переменной [Начальное значение]]
      |none
      |initial
      |inherit
      |unset

Значения:

  • Идентификатор переменной - Допустимый символьный код, назначенный идентификатором переменной.
  • Начальное значение - Начальное значение переменной с заданным идентификатором.
      Задаётся как CSS значение number.
      По умолчанию = 0.
  • none - Отменяет применение атрибута content-reset.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Атрибут counter-reset применяется к "родительскому" элементу по отношению к элементам тегов, в которых будут использоваться атрибуты стиля counter-increment и(или) content: counter(Идентификатор переменной).
  Переменная с идентификатором, заданным атрибутом стиля counter-reset, определяется только для пространства связанного с этим атрибутом элемента. Такой же идентификатор переменной, связаный с другим элементом того же уровня, определит уже другую переменную.
  counter-increment - Устанавливает привязку к определяемому элементу тега переменных следования.
  Если элемент тега связан с переменной следования атрибутом стиля counter-increment, то этот элемент меняет значение этой переменной одним своим появлением в пространстве, для которого определена эта переменная.

Формат:

  • counter-increment:
      Идентификатор переменной [Шаг изменения]
      [Идентификатор переменной [Шаг изменения]] ...
      [Идентификатор переменной [Шаг изменения]]
      |none
      |initial
      |inherit
      |unset

Значения:

  • Идентификатор переменной - Допустимый символьный код, назначенный идентификатором переменной.
  • Шаг изменения - Приращение значения в переменной с заданным идентификатором, которое создаёт определяемый элемент своим появлением в пространстве, для которого определена эта переменная.
      Задаётся как CSS значение number.
      По умолчанию = 1.
      Текущее значение этой переменной, к которому добавится значение шага изменения, определится порядком следования определяемого элемента в последовательности элементов, с которыми связана эта же переменная, в пространстве, для которого определена эта переменная.
  • none - Не изменяет значение переменной content-increment (умолчание).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям если таковые есть, в противном случае - к значениям по умолчанию.
  Переменная, идентификатор которой задаётся атрибутом counter-increment, может быть определена ранее с помощью атрибута стиля counter-reset связанного с "родительским" элементом определяемого элемента.
  "Родительский" элемент может быть любого уровня.
  Если ни в одном из "родительских" элементов переменная не определена, то элемент, с которым связано первое применение атрибута counter-increment, вводит переменную, с заданным идентификатором и с начальным значением равным 0, в пространство его непосредственного "родительского" элемента.
  Вид кавычек.
  Атрибуты:
  quotes - Устанавливает пользовательское представление "кавычек" для определяемого элемента тега.

Формат:

  • quotes:
      Значение1 [Значение2]
      |none
      |initial
      |inherit
      |unset

Значения:

  • Значение1 - CSS строковое значение содержащее допустимый символьный код, назначенный значением "кавычки".
      Определяет правую "кавычку".
  • Значение2 - CSS строковое значение содержащее допустимый символьный код, назначенный значением "кавычки".
      Определяет левую "кавычку".
  • none - "Пустые кавычки".
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Если определяемый элемент связан селекторами псевдоэлементов ::after и(или) ::before с атрибутом стиля content со значениями open-quote и close-quote, то эти значения соответственно и будут определены атрибутом стиля quotes.
  Если у определяемого элемента тега имеются "дочерние" элементы тега Q, то для их контента вид "кавычек" также будет определен атрибутом стиля quotes.

Пример:

<STYLE>
  .dv1 {border: 3px solid black; counter-reset: x y}
  .dv2 {counter-increment: x}
  .dv3 {counter-increment: x y; background-color: #C0C0C0;}
  .dv1 .dv2::before {content: counter(x); font-size: larger; font-weight: bold}
  .dv1 .dv2 .dv3::before {content: counter(x); font-size: larger; font-weight: bold}
  .dv1 .dv2 .dv3::after {content: counter(y); font-size: larger; font-weight: bold}
</STYLE>
.........
<DIV class="dv1">
  Первый уровень, установивший счетчики counter-reset: x y.
  <DIV class="dv2">
    - 1й во 2м уровне, 1й в коде внутри счетчика с переменной x.
  </DIV>
  <DIV class="dv2">
    - 2й во 2м уровне, 2й в коде внутри счетчика с переменной x.
    <DIV class="dv3">
      - 1й в 3м уровне, "дочерний" 2го во 2м, 3й в коде внутри счетчика с
      переменной x, 1й в коде внутри счетчика с переменной y.-
    </DIV>
    <DIV class="dv3">
      - 2й в 3м уровне, "дочерний" 2го во 2м, 4й в коде внутри счетчика с
      переменной x, 2й в коде внутри счетчика с переменной y.-
    </DIV>
    <DIV class="dv3">
      - 3й в 3м уровне, "дочерний" 2го во 2м, 5й в коде внутри счетчика с
      переменной x, 3й в коде внутри счетчика с переменной y.-
    </DIV>
  </DIV>
  <DIV class="dv2">
    - 3й во 2м уровне, 6й в коде внутри счетчика с переменной x.
    <DIV class="dv3">
      - 4й в 3м уровне, "дочерний" 3го во 2м, 7й в коде внутри счетчика с
      переменной x, 4й в коде внутри счетчика с переменной y.-
    </DIV>
    <DIV class="dv3">
      - 5й в 3м уровне, "дочерний" 3го во 2м, 8й в коде внутри счетчика с
      переменной x, 5й в коде внутри счетчика с переменной y.-
    </DIV>
    <DIV class="dv3">
      - 6й в 3м уровне, "дочерний" 3го во 2м, 9й в коде внутри счетчика с
      переменной x, 6й в коде внутри счетчика с переменной y.-
    </DIV>
  </DIV>
</DIV>

Пример применения счётчиков counter-reset и counter-increment - наведите мышку.
Первый уровень, установивший счетчики counter-reset: x y
- 1й во 2м уровне, 1й в коде внутри счетчика с переменной x.
- 2й во 2м уровне, 2й в коде внутри счетчика с переменной x.
- 1й в 3м уровне, "дочерний" 2го во 2м, 3й в коде внутри счетчика с переменной x, 1й в коде внутри счетчика с переменной y.-
- 2й в 3м уровне, "дочерний" 2го во 2м, 4й в коде внутри счетчика с переменной x, 2й в коде внутри счетчика с переменной y.-
- 3й в 3м уровне, "дочерний" 2го во 2м, 5й в коде внутри счетчика с переменной x, 3й в коде внутри счетчика с переменной y.-
- 3й во 2м уровне, 6й в коде внутри счетчика с переменной x.
- 4й в 3м уровне, "дочерний" 3го во 2м, 7й в коде внутри счетчика с переменной x, 4й в коде внутри счетчика с переменной y.-
- 5й в 3м уровне, "дочерний" 3го во 2м, 8й в коде внутри счетчика с переменной x, 5й в коде внутри счетчика с переменной y.-
- 6й в 3м уровне, "дочерний" 3го во 2м, 9й в коде внутри счетчика с переменной x, 6й в коде внутри счетчика с переменной y.-

Ещё пример:

<STYLE>
  #UL1 { list-style-type: none;}
  .UL2 { list-style-type: none;}
  .LI1 {counter-increment: X}
  .LI1::before { content: counter(X) '. ';}
  .LI2 { counter-increment: Y;}
  .LI2::before { content: counter(X) '.' counter(Y) '. ';}
</STYLE>
.........
<UL ID="UL1">
  <LI CLASS="LI1">Рыба
    <UL CLASS="UL2">
      <LI CLASS="LI2">Рыба с пивом</LI>
      <LI CLASS="LI2">Рыба под майонезом</LI>
      <LI CLASS="LI2">Рыба!</LI>
    </UL>
  </LI>
  <LI CLASS="LI1">Рак
    <UL CLASS="UL2">
      <LI CLASS="LI2">Рак с пивом</LI>
      <LI CLASS="LI2">Рак красный</LI>
      <LI CLASS="LI2">По пять рублей</LI>
    </UL>
  </LI>
  </UL>
Пример применения счётчиков counter-reset и counter-increment - наведите мышку.
  • Рыба
    • Рыба с пивом
    • Рыба под майонезом
    • Рыба!
  • Рак
    • Рак с пивом
    • Рак красный
    • По пять рублей