Маркеры
Создание маркеров
Большинство блочных элементов в CSS генерируют один объемлющий прямоугольник. Однако, CSS содержит два механизма, вынуждающих элемент генерировать два прямоугольника: главный прямоугольник для содержимого элемента и прямоугольник маркера, который может располагаться как внутри, так и вне главного прямоугольника. В отличие от генерируемого содержимого, прямоугольник маркера не влияет на позицию главного прямоугольника. Более общий из этих механизмов называется маркеры и описан в этом разделе. Второй, более ограниченный по возможностям, но чаще используемый, называется списки и описан в следующем разделе.
Маркеры создаются присваиванием значения marker свойству display в псевдоэлементах :before и :after. Прямоугольник маркера форматируется как однострочный прямоугольник, расположенный вне главного прямоугольника элемента. Он создается только в том случае, когда свойство content псевдоэлемента действительно генерирует содержание. Прямоугольник маркера имеет рамку и заполнитель, но не имеет границ.
Для псевдоэлемента :before базовая линия текста прямоугольника маркера вертикально выравнивается по базовой линии текста первой строки содержимого главного прямоугольника, а для псевдоэлемента :after - по базовой линии текста последней строки. Если главный прямоугольник не содержит текста, то выравнивание производится соответственно по верхнему и нижнему внешнему краю главного прямоугольника.
Высота прямоугольника маркера задается свойством line-height. Вертикальное выравнивание маркера внутри его прямоугольника задается свойством vertical-align.
Если свойство width имеет значение auto, то ширина прямоугольника маркера определяется его содержимым, в остальных случаях - значением width. Если при этом ширина содержимого больше ширины прямоугольника, то обрезка определяется значением свойства overflow. Прямоугольник маркера может накладываться на главный прямоугольник. Если ширина содержимого меньше ширины прямоугольника, то горизонтальное выравнивание содержимого задается свойством text-align.
Свойство marker-offset задает смещение прямоугольника маркера по горизонтали относительно главного прямоугольника, точнее, расстояние между ближайшими краями их рамок.
Если свойство display имеет значение marker для содержимого, сгенерированного элементом, у которого значение display равно list-item, то прямоугольник маркера, сгенерированный для :before, замещает обычный маркер элемента списка.
Например, следующий HTML-документ
<pre><p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Создание списка с маркерами</TITLE>
<STYLE type="text/css">
LI:before {
display: marker;
counter-increment: mycounter;
content: counter(mycounter, lower-roman) ". ";
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI>Первый элемент списка.</LI>
<LI>Второй элемент списка.</LI>
<LI>Третий элемент списка.</LI>
</OL>
</BODY>
</HTML></pre>
будет отображаться так:
i. Первый элемент списка.
ii. Второй элемент списка.
iii. Третий элемент списка.
| Поддержка : |  | Не поддерживается | | |  | Не поддерживается |
Позиция маркера: свойство marker-offset
| Синтаксис: | marker-offset: <размер> | auto | inherit | | Начально: | auto | | Применимо: | к элементам типа display: marker | | Наследуемо: | нет | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : | | Не поддерживается | | | | Не поддерживается |
Свойство marker-offset задает смещение прямоугольника маркера по горизонтали относительно главного прямоугольника, точнее, расстояние между ближайшими краями их рамок. Оно может быть задано явно (<размер>) или оставлено на усмотрение обозревателя (auto). Размер может быть отрицательным. Пример:
LI:before { marker-offset: 3em }
1 2 3
8 8 8
| |
*
Обратная связь