Атрибуты: Параметры предназначения.

  Атрибуты параметров предназначения тегов, в строгом смысле, не являются атрибутами стилей оформления пользовательского контента. Эти атрибуты предназначены для назначения элементам тегов параметров, которые меняют их предназначение по умолчанию, или придают им особые свойства.

  Переопределение элемента тега.
  Атрибуты:
  display - Переопределяет предназначение определяемого элемента тега.

Формат:

  • display:
      inline
      |block
      |inline-block
      |flex
      |inline-flex
      |grid
      |inline-grid
      |subgrid
      |list-item
      |run-in
      |table
      |inline-table
      |table-caption
      |table-column
      |table-column-group
      |table-header-group
      |table-row-group
      |table-footer-group
      |table-row
      |table-cell
      |none

Значения:

  • inline - Определяемый элемент - строчный элемент.
  • block – Определяемый элемент - блочный элемент.
  • inline-block – Определяемый элемент - строчный элемент, к которому, однако, можно применять атрибуты стилей для блочных элементов.
  • flex – Определяемый элемент - блочный flex - элемент.
      Размеры поля flex-элемента могут динамически изменяться с тем, чтобы в него всегда входили все поля "дочерних" элементов.
      Атрибутами стилей flex-элементов можно управлять расположением в их полях на Web-странице полей "дочерних" элементов.
  • inline-flex – Определяемый элемент - строчный flex - элемент.
      К такому элементу можно применять атрибуты стилей flex-элементов и размеры его поля могут динамически изменяться с тем, чтобы в него всегда входили все поля "дочерних" элементов.
      Атрибутами стилей flex-элементов можно управлять расположением в их полях на Web-странице полей "дочерних" элементов.
  • grid - Определяемый элемент - блочный - grid - элемент.
  • inline-grid – Определяемый элемент - строчный - grid - элемент.
  • subgrid - Определяемый элемент - блочный - grid - элемент, который, в свою очередь, содержит другие grid - элементы.
  • list-item - Определяемый элемент переопределяется в элемент тега LI.
  • run-in - Определяемый элемент тег встраивающийся элемент Web-страницы.
      Такой элемент автоматически станет "дочерним" следующего непосредственно за ним блочного элемента. Если следующего блочного элемента нет, то он сам станет блочным элементом.
  • table – Определяемый элемент переопределяется в элемент тега TABLE.
  • inline-table – Определяемый элемент переопределяется в элемент тега TABLE но остается строчным.
      Поэтому, например, он может стать частью абзаца.
  • table-caption - Определяемый элемент переопределяется в элемент тега CAPTION.
  • table-column - Определяемый элемент переопределяется в элемент тега COL.
  • table-column-group – Определяемый элемент переопределяется в элемент тега COLGROUP.
  • table-header-group – Определяемый элемент переопределяется в элемент тега THEAD.
  • table-row-group - Определяемый элемент переопределяется в элемент тега TBODY.
  • table-footer-group - Определяемый элемент переопределяется в элемент тега TFOOT.
  • table-row – Определяемый элемент переопределяется в элемент тега TR.
  • table-cell – Определяемый элемент переопределяется в элемент тега TD.
  • none - Пользовательский контент и поле определяемого элемента тега сразу вообще никак не будут присутствовать на Web-странице.
      Однако это состояние можно изменить скриптом.
  Экземпляры объектов элементов, переопределяемых в элементы других тегов, в объектной модели документа остаются экземплярами объектов элементов исходных тегов. Их переопределение происходит только для соответствующей визуализации их внутреннего контента на Web-странице.
  Соответственно для их экземпляров объектов в объектной модели документа будут доступны только их собственные свойства и методы.
  Современные браузеры допускают использование в качестве имени тега любого допустимого символьного кода.
  Для такого (именованного разработчиком)тега доступны все универсальные атрибуты, и его имя может быть использовано в качестве селектора стиля CSS.
  Назначение такого тега можно определить с помощью атрибута стиля display, а по умолчанию, он будет являться обычным строчным тегом.
  Для злементов таких тегов в DOM будут созданы интерфейсы с именем HTMLUnknownElement, которые унаследуют свойства и методы стандартного интерфейса HTMLElement.
  Однако, если такой тег зарегистрировать в DOM методом registerElement объекта HTMLDocument, то разработчик может создать расширенный интерфейс для элементов этого тега.
  Переопределение реакции на указатель мышки элемента тега.
  Атрибуты:
  pointer-events - Устанавливает, будет ли поле определяемого элемента тега реагировать на действия пользователя на нем указателем (мышки) на Web-странице.
  Например при наведении или "клике".

Формат:

  • pointer-events:
      auto
      |none
      |all
      |fill
      |painted
      |stroke
      |visible
      |visibleFill
      |visiblePainted
      |visibleStroke

Значения:

  • auto - Стандартная реакция поля элемента.
      Это нормальное значение оно наследуется от тега HTML по умолчанию (inherit на самом верхнем возможном уровне).
  • none - Поле определяемого элемента тега никак не отреагирует на указатель.
      В том числе поле не может получить, с помощью указателя мышки, фокус ввода, и к этому элементу не применимы стили соответствующих псевдоклассов активации.
      Также это поле станет "прозрачно" для указателя при наложении полей.
      Скрипт может поменять значение none на значение auto, причем при такой смене автоматически возникнет событие click.
  Следующие значения атрибута стиля pointer-events имеют смысл только для SVG элементов:
  • all - Поле определяемого элемента тега отреагирует на указатель, если он находится внутри рамки поля или на рамке поля.
      В отличие от значения visible значение all не реагирует на значение visibility.
  • fill - Поле определяемого элемента тега отреагирует на указатель, если он находится внутри рамки поля.
      В отличие от значения visibleFill значение fill не реагирует на значение visibility.
  • painted - Поле определяемого элемента тега отреагирует на указатель, если оно закрашено (fill не none), или закрашена рамка поля (stroke не none), на которой находится указатель.
      В отличии от значения visiblePainted значение painted не реагирует на значение visibility.
  • stroke - Поле определяемого элемента тега отреагирует на указатель, если он находится на рамке поля.
      В отличие от значения visibleStroke значение stroke не реагирует на значение visibility.
  • visible - Поле определяемого элемента тега отреагирует на указатель, если он находится внутри рамки поля или на рамке поля.
  • visibleFill - Поле определяемого элемента тега отреагирует на указатель, если он находится внутри рамки поля.
  • visiblePainted - Поле определяемого элемента тега отреагирует на указатель если оно закрашено (fill не none), или закрашена рамка поля (stroke не none), на которой находится указатель.
  • visibleStroke - Поле определяемого элемента тега отреагирует на указатель если он находится на рамке поля.
  Переопределение реакции на выделение контента в поле элемента тега.
  Атрибуты:
  user-select - Устанавливает, может ли пользователь выделить на Web-странице контент в поле элемента.
  Например, указателем мышки.

Формат:

  • user-select:
      all
      |none

Значения:

  • all - Выделение разрешено.
      Это нормальное значение оно наследуется от тега HTML по умолчанию (inherit на самом верхнем возможном уровне).
  • none - Выделение запрещено.
      Скрипт может поменять это значение на all, причем при такой смене автоматически возникнет событие select.
  Переопределение отображения контента в поле элемента тега.
  Атрибуты:
  visibility - Устанавливает, будет ли пользовательский контент определяемого элемента тега отображаться на Web-странице.

Формат:

  • visibility:
      visible
      |hidden
      |collapse
      |inherit

Значения:

  • visible - Контент сразу отображается на Web-странице.
      Это нормальное значение оно наследуется от тега HTML по умолчанию (inherit на самом верхнем возможном уровне).
  • hidden - Контент сразу не будет отображаться на Web-странице, однако на ней отобразится пустое поле определяемого элемента тега.
  • collapse - Контент и поле определяемого элемента тега сразу вообще не будут присутствовать на Web-странице.
      Применяется только к тегам таблицы.
      Это значение атрибута стиля visibility поддерживают не все браузеры.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.

В примере вложенные элементы тега DIV переопределяются в соответствующие элементы тегов таблицы:

<STYLE>
  .ul1:hover .dv1 {display: table; border: 2px solid black; border-collapse: collapse;}
  .ul1:hover .dv1 .dv2 {display: table-caption;}
  .ul1:hover .dv1 .dv3 {display: table-row;}
  .ul1:hover .dv1 .dv3 .dv4 {display: table-cell; border: 4px solid black; width: auto;}
</STYLE>
......
<FIELDSET class="ul1">
  <DIV id="col" class="dv1" STYLE="border: 1px solid black; margin: 5px;" ALIGN=center>
    <DIV class="dv2">
     Заголовок
    </DIV>
    <DIV class="dv3">
      <DIV class="dv4">
       Ячейка 1-1
      </DIV>
      <DIV class="dv4">
       Ячейка 1-2
      </DIV>
      <DIV class="dv4">
       Ячейка 1-3
      </DIV>
    </DIV>
    <DIV class="dv3">
      <DIV class="dv4">
       Ячейка 2-1
      </DIV>
      <DIV class="dv4">
       Ячейка 2-2
      </DIV>
      <DIV class="dv4">
       Ячейка 2-3
      </DIV>
    </DIV>
  </DIV>
</FIELDSET>
Пример переопределения элементов тегов - наведите мышку.
Заголовок
Ячейка 1-1
Ячейка 1-2
Ячейка 1-3
Ячейка 2-1
Ячейка 2-2
Ячейка 2-3