ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Спецификация CSS2 | 12.6. Маркеры и списки.

12.6. Маркеры и списки.

12.6.1. Маркеры: свойство 'marker-offset'.
12.6.2. Списки: свойства 'list-style-type', 'list-style-image', 'list-style-position' и 'list-style'.

Большинство блочных элементов в CSS формируют один главный блочный блок. В этом разделе мы обсудим два механизма CSS, которые приводят к генерированию двух блоков: один главный блок (для содержания элемента) и один отдельный блок с маркерами (для декорации, подобно черной точке, изображению или числу). Маркерный блок может позиционироваться внутри или вне главного блока. В отличие от содержаний :before и :after, маркерный блок не влияет на положение главного блока, независимо от схемы позиционирования.

Самым общим из двух механизмов, являющийся новым в CSS2, называют маркерами. Более ограниченный механизм использует свойства списка (list) CSS1. Свойства списка предоставляют автору быстрые результаты для большинства обычных сценариев упорядоченных и неупорядоченных списков. Но, маркеры дают автору точный контроль над содержанием маркера и его положением. Маркеры можно использовать со счетчиками для создания новых стилей списков, для нумерации заметок на полях и т.д.

Например, следующий пример иллюстрирует, как маркеры можно использовать для добавления точек после каждого пронумерованного пункта списка. Следующие HTML-документ и стилевая таблица:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Creating a list with markers</TITLE>
     <STYLE type="text/css">
	  LI:before { 
	      display: marker;
	      content: counter(mycounter, lower-roman) ".";
	      counter-increment: mycounter;
	  }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

приводят к результату:

   i. This is the first item.
  ii. This is the second item.
 iii. This is the third item.

С селекторами наследников (descendant selector) и селекторами дочерних элементов (child selectors) можно определить различные типы маркеров, зависящих от глубины вложенных списков.

12.6.1. Маркеры: свойство 'marker-offset'.

Маркеры создаются установкой свойства 'display' для 'marker' внутри псевдо-элементов :before и :after. Когда содержание 'block' и 'inline' :before и :after является частью главного блока, сгенерированного элементом, то содержание 'marker' форматируется в независимом маркерном блоке вне главного блока. Маркерные блоки форматируются, как одна строка (т.е. как один строчный блок), так как они не так гибки, как плавающие блоки. Маркерный блок создается только тогда, когда свойство 'content' для псевдо-элемента генерирует содержание.

Маркерные блоки имеют отступы и границы, но не имеют полей.

Для псевдо-элемента :before базовая линия текста в маркерном блоке будет выравниваться вертикально с базовой линией текста в первой строке содержания в главном блоке. Если главный блок не содержит текст, то верхний внешний край маркерного блока будет выравниваться с верхним внешним краем главного блока. Для псевдо-элемента :after базовая линия текста в маркерном блоке будет выравниваться с базовой линией текста в последней строке содержания в главном блоке. Если главный блок не содержит текста, то нижний внешний край маркерного блока будет выравниваться с нижним внешним краем главного блока.

Высота маркерного блока определяется свойством 'line-height'. Маркерный блок :before(:after) участвует в расчете высоты блока первой(последней) строки главного блока. Таким образом, маркеры выравниваются с первой и последней строкой содержания элемента, даже если маркерные блоки находятся в определенных строчных блоках. Если не существует ни первого, ни последнего строчного блока в главном блоке, то маркерный блок учреждает свой строчный блок.

Вертикальное выравнивание маркерных блоков внутри его строчного блока определяется свойством 'vertical-align'.

Если значение свойства 'width' - 'auto', то ширина содержания маркерного блока является шириной его содержания, иначе она равна значению 'width'. Для значений 'width' меньших, чем ширина содержания, свойство 'overflow' определяет поведение наложения. Маркерные блоки могут накладываться на главные блоки. Для значений 'width' больших, чем ширина содержания, свойство 'text-align' определяет горизонтальное выравнивание содержания в маркерном блоке.

Свойство 'marker-offset' определяет горизонтальное смещение между маркерным блоком и связанным главным блоком. Расстояние измеряется между их самыми ближайшими краями границ. Обратите внимание. Если маркер перемещается вправо в плавающем блоке с контекстом форматирования слева на право, то главный блок будет перемещаться к правой стороне плавающего блока, но маркерные блоки будут появляться слева в плавающем блоке. Так как левый край границы главного блока лежит слева в плавающем блоке (смотрите определение), а маркерные блоки лежат вне края границ главного блока, то маркер тоже будет находиться слева в плавающем блоке. Аналогичное поведение применяется для форматирования справа на лево, когда маркеры располагаются слева плавающего блока.

Когда свойство 'display' имеет значение 'marker' для содержания, сгенерированного элементом со свойством 'display: list-item', то маркерный блок, сформированный для ':before' замещает нормальный маркер пункта списка.

В следующем примере, содержание центрируется внутри маркерного блока фиксированной ширины. Этот документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML>
    <HEAD>
      <TITLE>Content alignment in the marker box</TITLE>
      <STYLE type="text/css">
           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
   </BODY>
 </HTML>

приводит к результату:

(1)    This is the 
         first item.
  (2)    This is the 
         second item.
  (3)    This is the 
         third item.

Следующий пример создает маркеры перед и после пунктов списка.

Документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers before and after list items</TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before { 
   	      display: marker;
	      content: url("smiley.gif");
         LI:after {
	      display: marker;
   	      content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

производит результат, похожий на следующее (значки ASCII используются вместо картинок смайликов):

  :-) first list item 
      comes first      :-(
  :-) second list item 
      comes second     :-(

Следующий пример использует маркеры для нумерации записей (note) (параграфов).

Документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers to create numbered notes4</TITLE>
    <STYLE type="text/css">
      P { margin-left: 12 em; }
      @media screen, print {
         P.Note:before         { 
  	      display: marker;
	      content: url("note.gif") 
                       "Note " counter(note-counter) ":";
              counter-increment: note-counter;
              text-align: left;
              width: 10em;
         }
     }
    </STYLE>
  </HEAD>
  <BODY>
    <P>This is the first paragraph in this document. </P>
    <P CLASS="Note">This is a very short document. </P>
    <P>This is the end. </P>
  </BODY>
</HTML>

производит:

           This is the first paragraph 
            in this document.

  Note 1:   This is a very short 
            document.
           
            This is the end.

'marker-offset'
Тип значения:     <length> | auto | inherit
Начальная величина: auto
Применяется:        элементы с 'display: marker'
Наследование:       нет
Процентная база:    нет
Медиа:              визуальные

Это свойство определяет расстояние между самыми ближайшими краями границы маркерного блока и связанного с ним главного блока. Смещение можно определять пользователем (<length>) или оно выбирается устройством вывода ('auto'). Длины могут быть отрицательными, но могут существовать ограничения, специфичные для выполнения.

Следующий пример иллюстрирует, как маркеры можно использовать для добавления точек после каждого пункта нумерованного списка. HTML-документ и стилевая таблица:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Marker example 5</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Make space for counters */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(mycounter, lower-roman) ".";
               counter-increment: mycounter;
           }   
      </STYLE>
   </HEAD>
   <BODY>
     <P> This is a long preceding paragraph ...
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
     <P> This is a long following paragraph ...
   </BODY>
 </HTML>

продуцируют следующее:

    This is a long preceding
        paragraph ...
      
   i.   This is the first item.
  ii.   This is the second item.
 iii.   This is the third item.

        This is a long following
        paragraph ...

12.6.2. Списки: свойства 'list-style-type', 'list-style-image', 'list-style-position' и 'list-style'.

Свойства списков позволяют осуществлять основное визуальное форматирование списков. Подобно более общим маркерам, элемент со свойством 'display: list-item' генерирует главный блок для содержания элемента и факультативный маркерный блок. Другие свойства списка позволяют авторам определить тип маркера (изображение, глиф или число) и его положение с учетом главного блока (вне или внутри него перед содержанием). Они не позволяют авторам определять индивидуальный стиль (цвет, шрифт, выравнивание и т.д.) для маркера списка или регулировать его положение с учетом главного блока.

Более того, когда маркер М (созданный с помощью 'display: marker') используется с пунктом списка, созданного свойствами списка, то М замещает стандартный маркер пункта списка.

Со свойствами списка, свойства фона применяются только для главного блока; маркерный блок 'outside' является прозрачным. Маркеры предлагают больше контроля над стилем маркерного блока.

'list-style-type'
Тип значения:       disc | circle | square | decimal | decimal-leading-zero | 
                    lower-roman | upper-roman | lower-greek | lower-alpha | 
                    lower-latin | upper-alpha | upper-latin | hebrew | armenian | 
                    georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | 
                    katakana-iroha | none | inherit
Начальная величина: disc
Применяется:        для элементов с 'display: list-item'
Наследование:       да
Процентная база:    нет
Медиа:              визуальные

Это свойство определяет появление маркера пункта списка, если 'list-style-image' имеет значение 'none', или если изображение, указанное в URI, нельзя вывести на экран. Значение 'none' не определяет маркера, в противном случае есть три типа маркеров: глифы, нумерующие системы и алфавитные системы. Обратите внимание. Пронумерованные списки улучшают доступность документа, делая списки удобнее для навигации.

Глифы определяются: диском, кружочком и квадратиком. Их точная визуализация зависит от устройства вывода.

Нумерующие системы определяются:

decimal
Десятичные числа, начиная с 1.
decimal-leading-zero
Десятичные числа, дополненные начальным нулем (e.g., 01, 02, 03, ..., 98, 99).
lower-roman
Римские числа нижнего регистра (i, ii, iii, iv, v, etc.).
upper-roman
Римские числа верхнего регистра (I, II, III, IV, V, etc.).
hebrew
Традиционная еврейская нумерация.
georgian
Традиционная грузинская нумерация (an, ban, gan, ..., he, tan, in, in-an, ...).
armenian
Традиционная армянская нумерация.
cjk-ideographic
Открытые идеографические числа
hiragana
a, i, u, e, o, ka, ki, ...
katakana
A, I, U, E, O, KA, KI, ...
hiragana-iroha
i, ro, ha, ni, ho, he, to, ...
katakana-iroha
I, RO, HA, NI, HO, HE, TO, ...
>

Устройство вывода, которое не распознает нумерующую систему, должно использовать 'decimal'.

Обратите внимание. Этот документ не определяет точный механизм каждой нумерующей системы (например, как римские числа подсчитываются). Будущие документы W3C внесут ясность в этот вопрос.

Алфавитная система определяется:

lower-latin или lower-alpha
Буквы ascii нижнего регистра (a, b, c, ... z).
upper-latin или upper-alpha
Буквы ascii верхнего регистра (A, B, C, ... Z).
lower-greek
Классические греческие альфа, бета, гамма, ... (έ, ή, ί, ...), нижнего регистра.

Эта спецификация не определяет, как алфавитные системы ведут себя в конце алфавита. Для каждого случая после 26 пунктов списка, визуализация 'lower-latin' не определена. Поэтому, для длинных списков мы рекомендуем, чтобы авторы определяли числа.

Например, следующий HTML-документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Lowercase latin numbering</TITLE>
     <STYLE type="text/css">
          OL { list-style-type: lower-roman }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

может производить следующее:

i This is the first item.
ii This is the second item.
iii This is the third item.

Обратите внимание на то, что выравнивание маркера списка (здесь – выравнивание справа) зависит от устройства вывода.

Обратите внимание. Будущие версии CSS смогут предоставить более сложные механизмы для международных нумерующих стилей.

'list-style-image'
Тип значения:    <uri> | none | inherit
Начальная величина: нет
Применяется:        для элементов с 'display: list-item'
Наследование:       да
Процентная база:    нет
Медиа:              визуальные

Это свойство устанавливает изображение, которое будет использоваться, как маркер пункта списка. Когда изображение доступно, оно будет замещать маркер, определенный свойством 'list-style-type'.

Следующий пример устанавливает маркер в начало каждого пункта списка, как изображение "ellipse.png".

UL { list-style-image: url("http://png.com/ellipse.png") }

'list-style-position'
Тип значения:       inside | outside | inherit
Начальная величина: outside
Применяется:        для элементов с 'display: list-item'
Наследование:       да
Процентная база:    нет
Медиа:              визуальные

Это свойство определяет положение маркерного блока в главном блочном блоке. Свойства имеют следующие значения:

outside
Маркерный блок находится вне главного блочного блока. Обратите внимание. CSS1 не определили точное расположение маркерного блока, и, с целью совместимости, CSS2 тоже остаются двусмысленными. Для более точного управления маркерными блоками, используйте маркеры.
inside
Маркерный блок является первым внутристрочным блоком в главном блочном блоке, после которого расположено содержание элемента.

Например:

<HTML>
  <HEAD>
    <TITLE>Comparison of inside/outside position</TITLE>
    <STYLE type="text/css">
      UL         { list-style: outside }
      UL.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>

    <UL class="compact">
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

Выше указанный пример может форматироваться, как:

[D]

В тексте, расположенном справа налево, маркеры располагаются на правой стороне блока.

'list-style'
Тип значения:       [ <'list-style-type'> || <'list-style-position'> || 
                  <'list-style-image'> ] | inherit
Начальная величина: не определена для сокращенных свойств
Применяется:        для элементов с 'display: list-item'
Наследование:       да
Процентная база:    нет
Медиа:              визуальные

Свойство 'list-style' является сокращенной записью для установки трех свойств 'list-style-type', 'list-style-image', и 'list-style-position' в одном и том же месте стилевой таблице.

UL { list-style: upper-roman inside }  /* Any UL */
UL > UL { list-style: circle outside } /* Any UL child of a UL */

Хотя авторы могут определить информацию 'list-style' непосредственно для элементов пунктов списков (например, LI в HTML), они должны делать это с осторожностью. Следующие правила выглядят похожими, но первое декларирует селектор элементов наследников, а второе (более специфичное) – селектор дочерних элементов.

OL.alpha LI   { list-style: lower-alpha } /* Any LI descendant of an OL */
OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */

Авторы, которые используют только селектор наследников не смогут достичь результат, который они ожидают. Рассмотрим следующие правила:

<HTML>
  <HEAD>
    <TITLE>WARNING: Unexpected results due to cascade</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>
</HTML>

Желаемая визуализация будет имеет пункты списков уровня 1 с метками 'lower-alpha' и пункты уровня 2 с метками 'disc'. Однако, порядок каскадирования будет приводить к тому, что первое стилевое правило (которое включает информацию определенного класса) маскирует второе. Следующие правила решают проблему, применяя селектор дочерних элементов:

OL.alpha > LI  { list-style: lower-alpha }
UL LI   { list-style: disc }

Другое решение будет определять информацию 'list-style' только для элементов тип списков:

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

Наследование будет переносить значение 'list-style' от элементов OL и UL к элементам LI. Это - рекомендуемый способ для определения информации стиля списка.

Значение URI может комбинироваться с любым другим значением, как в:

UL { list-style: url("http://png.com/ellipse.png") disc }

В вышеуказанном примере, будет использоваться 'disc', когда недоступно изображение.

Значение 'none' для свойства 'list-style' устанавливает оба свойства 'list-style-type' и 'list-style-image', как 'none':

UL { list-style: none }

Результат состоит в том, что на экран не выводится маркер пункта списка.

← Назад | Вперед →
Copyright © 2006 -  aranea.ru