Интернет технологии -> CSS -> Каскадные таблицы стилей CSS1

4 Модель форматирования

CSS1 предполагает простой ортогональный способ форматирования, когда каждый элемент образуется одним или несколькими прямоугольными полями. (Элементы, имеющие параметр 'display' со значением 'none', не форматируются и поэтому не влияют на поле. Все поля имеют внутреннюю содержательную область с устанавливаемыми смежными областями отступа, рамки и границы.

    _______________________________________
   |                                       |
   |           граница (прозрачная)        |
   |   _________________________________   |
   |  |                                 |  |
   |  |        рамка                    |  |
   |  |   ___________________________   |  |
   |  |  |                           |  |  |
   |  |  |     отступ                |  |  |
   |  |  |   _____________________   |  |  |
   |  |  |  |                     |  |  |  |
   |  |  |  |  содержание         |  |  |  |
   |  |  |  |_____________________|  |  |  |
   |  |  |___________________________|  |  |
   |  |_________________________________|  |
   |_______________________________________|

            |  ширина   элемента  |

   |             ширина поля               |

Размеры границы, рамки и отступа устанавливаются соответственно описаниям следующих разделов настоящего документа: (5.5.1-5.5.5) для границы; (5.5.6-5.5.10) для отступа; (5.5.11-5.5.22) для рамки.

Отступ использует тот же самый фон, что и сам элемент (установка свойств фона см. 5.3.2-5.3.7). Цвет и стиль рамки устанавливаются в свойствах рамки. Границы всегда прозрачны, поэтому через них будет просвечивать родительский элемент.

Размеры поля есть сумма размеров элемента (форматированного текста или изображения) и размеров областей отступа, рамки и границы.

С точки зрения форматирования элементы подразделяются на два основных типа: блочные и строчные .

4.1 Блочные элементы

Элементы с параметром 'display', имеющим значение 'block' или 'list-item' относятся к блочным элементам. Плавающие (floating) элементы ( т.е. со значением параметра 'float' иным, чем 'none') также считаются блочными.

Следующий пример показывает, как границы и отступы форматируют элемент 'UL' с двумя дочерними. Для упрощения границы на диаграмме не показаны. Учтите, что односимвольные "константы" в данном примере - это не синтаксис CSS1, это просто удобный способ связать значения таблицы стилей с рисунком.

    <STYLE TYPE="text/css">
      UL {
        background: red;
        margin: A B C D;
        padding: E F G H;
      }
      LI {
        color: white;
        background: blue;
        margin: a b c d;
        padding: e f g h;
      }
    </STYLE>
    ..
    <UL>
      <LI>1й элемент списка
      <LI>2й элемент списка
    </UL>
    _______________________________________________________
  |                                                       |
  |    A            UL граница прозрачная                 |
  |    _______________________________________________    |
  | D |                                               | B |
  |   |    E          UL отступ красный               |   |
  |   |    _______________________________________    |   |
  |   | H |                                       | F |   |
  |   |   |    a    LI граница прозрачная         |   |   |
  |   |   |       красный цвет просвечивает       |   |   |
  |   |   |    _______________________________    |   |   |
  |   |   | d |                               | b |   |   |
  |   |   |   |    e LI отступ синий (blue)   |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h  1й элемент списка        f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |     max(a, c)                         |   |   | <- См. max
  |   |   |    _______________________________    |   |   |
  |   |   |   |                               |   |   |   |
  |   |   | d |    e LI отступ синий (blue)   |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h 2й элемент списка         f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |   c      LI отступ прозрачный,        |   |   |
  |   |   |        красный цвет просвечивает      |   |   |
  |   |   |_______________________________________|   |   |
  |   |                                               |   |
  |   |    G                                          |   |
  |   |_______________________________________________|   |
  |                                                       |
  |   C                                                   |
  |_______________________________________________________|

В техническом плане, свойства заполнения и границы не наследуются. Но, как видно из примера, элемент позиционируется относительно родительских и "братских", поэтому свойства границы и заполнения последних отражаются на дочерних элементах.

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

Некоторые из используемых терминов иллюстрирует следующая диаграмма:

                               --------------- <-- верх
                               верхняя граница
                               ---------------
                                верхняя рамка
                               ---------------
                               верхний  отступ
                               +-------------+ <-- потолок
    |        |        |        |             |         |         |         |
    |  левая |  левая |  левый |             | правый  | правая  | правая  |
    |-граница|-рамка--|-отступ-|-содержание--|-отступ--|--рамка--|-граница-|
    |        |        |        |             |         |         |         |
                               +-------------+ <-- подвал
    ^                          ^             ^                             ^
левый внешний край | левый внутр. край | правый внутр. край | правый внешний край
                                нижний отступ
                               ---------------
                                 нижняя рамка
                               ---------------
                               нижняя  граница
                               --------------- <-- низ

Левый внешний край - это край всего элемента, с учетом отступа, рамки и границы. Левый внутренний край - это край содержания внутри отступа, рамки и границы. Справа - аналогично. Верх - это верх самого объекта с учетом отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Потолок - это верх содержания внутри отступа, рамки и границы. Низ - это низ самого элемента, ниже отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Подвал - это низ элемента внутри отступа, рамки и границы (низ содержания).

Ширина элемента - это ширина содержания, т.е. расстояние между левым и правым внутренними краями. Высота - это высота содержания, т. е. расстояние от подвала до потолка.

4.1.1 Вертикальное форматирование

Ширина границы фиксированного блочного элемента определяют минимальное расстояние до краев окружающих полей. Две или более прилегающих вертикальных границы (т.е. без рамки, отступа и содержания между ними) сжимаются для максимального использования значения границы. В большинстве случаев после сжатия вертикальных границ результат приятнее на вид и ближе к ожидаемому дизайнером. В приведенном примере границы между двумя элементами 'LI' сжимаются с использованием максимума нижней границы первого элемента 'LI' и верхней границы второго элемента 'LI'. Аналогично, если заполнение между 'UL' и первым элементом 'LI' (значение "Е") было бы равно нулю, границы 'UL' и первого элемента 'LI' были бы сжаты.

В случае отрицательных границ, абсолютный максимум прилегающих отрицательных границ вычитается из максимума прилегающих положительных границ. Если положительных границ нет, абсолютный максимум негативных прилегающих границ вычитается из нуля.

4.1.2 Горизонтальное форматирование

Горизонтальное позиционирование и размеры фиксированного блочного элемента определяются семью свойствами: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' и 'margin-right'. Сумма этих семи составляющих равносильна ширине родительского элемента.

По умолчанию, "ширине" элемента присваивается значение 'auto'. Если элемент не является замещаемым, это значит, что UA считает "ширину" так, чтобы сумма указанных семи свойств была эквивалентна ширине родительского элемента. Если элемент замещаемый, то значение 'auto' для "ширины" автоматически заменяется внутренней шириной элемента.

Трем из семи свойств может быть присвоено значение 'auto': "левая граница", "ширина", и "правая граница". Для замещаемых элементов значение 'auto' для "ширины" автоматически заменяется внутренней шириной элемента, поэтому для них могут существовать только два значения auto'.

"Ширина" имеет неотрицательное минимально-допустимое значение, определяемое UA (которое может меняться от элемента к элементу, и даже зависеть от других свойств). Если "ширина" меньше допустимой (даже если она задана явным образом либо имела значение 'auto' и по приоритетному правилу должна быть меньше), ее значение будет заменено заменяется минимально-допустимым.

Если именно одно из свойств "левая граница", "ширина" или "правая граница" имеют значение 'auto', UA определит этому свойству значение, которое сделает сумму значений семи свойств эквивалентной ширине родительского элемента.

Если ни одно из свойств не имеет значения 'auto', то последнее будет присвоено свойству "правая граница".

Если более чем одному из трех вышеуказанных свойств будет присвоено значение 'auto', и одно из них- "ширина", то остальные ("левая граница", и/или "правая граница") будут приравнены к нулю, а "ширина" получит значение, необходимое, чтобы сделать сумму значений семи свойств эквивалентной ширине родительского элемента.

В противоположной ситуации, если как "правая граница" так и "левая граница" будут иметь значение 'auto', им будут присвоены равноценные значения. Элемент будет выронен по центру внутри родительского.

Если значение 'auto' было присвоено как значение для одного из вышеупомянутых семи свойств в строчном или плавающем элементе, это будет обработано так, как если бы им было присвоено нулевое значение.

В отличие от вертикальных границ, горизонтальные границы не сливаются.

4.1.3 Элементы-списки

Элементы со свойством 'display', имеющим значение 'list-item' ("список"), форматируются как блочные, но предваряются маркером. Тип маркера определяется свойством "стиль списка" ('list-style'). Маркер устанавливается в соответствии со значением свойства "стиль списка":

  <STYLE TYPE="text/css">
    UL         { list-style: outside }
    UL.compact { list-style: inside }
  </STYLE>

  <UL>
    <LI>первый пункт списка идет первым
    <LI>второй пункт списка идет вторым
  </UL>

  <UL CLASS=COMPACT>
    <LI>первый пункт списка идет первым
    <LI>второй пункт списка идет вторым
  </UL>

Форматирование по данному примеру может выглядеть как:

  * первый пункт списка
    идет первым

  * второй пункт списка
    идет вторым

  * первый пункт
  списка идет первым

  * второй пункт
  списка идет вторым

Если текст выравнивается по ширине, маркеры должны быть на левой стороне поля.

4.1.4 Плавающие элементы

Используя свойство элемента "плавающий" ('float'), можно декларировать его в качестве внешнего по отношению к нормальному потоку элементов, а затем форматировать, как блочный элемент. Например, при установке значения 'left' для свойства "плавающий" применительно к изображению, последнее перемещается влево до границы отступа или рамки, либо достигает другого блочного элемента. Нормальный поток будет переноситься по правой стороне. Границы, рамки и отступы самого элемента будут учитываться, и никогда не будут сливаться с границами смежных элементов.

При позиционировании плавающего элемента должны выполняться следующие условия (см. раздел 4.1. для разъяснения терминов):

1. Левая внешняя граница левоориентированного плавающего элемента не может быть слева от левой внутренней границы родительского элемента. Аналогично для правоориентированных плавающих элементов.

2. Правая внешняя граница левоориентированного плавающего элемента должна быть справа от правой внутренней границы любого предшествующего (согласно исходному тексту HTML) левоориентированного элемента, или же вершина предшествующего элемента должна быть ниже чем низ последующего. Аналогично для правоориентированных плавающих элементов.

3. Правая внешняя граница левоориентированного плавающего элемента не может быть справа от левой внешней границы правоориентированного плавающего элемента, расположенного правее его. Аналогично для правоориентированных плавающих элементов.

4. Вершина плавающего элемента не может быть выше потолка родительского элемента.

5. Вершина плавающего элемента не может быть выше вершины любого из предшествующих плавающих или блочных элементов.

6. Вершина плавающего элемента не может быть выше вершины строчного поля (см. раздел 4.4) с содержанием, предшествующим описанию плавающего элемента в исходном тексте HTML.

7. Плавающий элемент должен расположиться как можно выше.

8. Левоориентированный плавающий элемент должен расположиться как можно левее, правоориентированный - как можно правее. Приоритетно крайнее положение устанавливается для более левого или правого элемента.

  <STYLE TYPE="text/css">
    IMG { float: left }
    BODY, P, IMG { margin: 2em }
  </STYLE>

  <BODY>
    <P>
      <IMG SRC=img.gif>
      Примерный текст, чтобы показать...
  </BODY>

Форматирование в приведенном примере будет выглядеть так:

   ________________________________________
  |
  |          max(граница BODY, граница P)
  |          ______________________________
  |    |    |             Примерный текст,
  | г  | г  |границы IMG  чтобы показать, как
  | р  | р  |    _____    плавающие элементы
  | а  | а  |   |     |   смещаются относительно
  | н  | н  |   | IMG |   к сторонам родительского
  | и  | и  |   |     |   элемента, несмотря
  | ц  | ц  |   |_____|   на приоритет
  | a  | а  |             границы, бордюра
  |    |    |             и заполнения.
  | B  | P  |             Обратите внимание,
  | O  |    |как смежные вертикальные границы
  | D  |    |сжимаются между фиксированными
  | Y  |    |блочными элементами.

Обратите внимание, как границы элемента 'P' окружают плавающий элемент 'IMG'.

Есть два случая, когда плавающие элементы могут перекрывать области границы, рамки и отступа других элементов:

• когда плавающий элемент имеет отрицательную величину границы: отрицательные границы плавающих элементов имеют приоритет над иными блочными элементами;
• когда плавающий элемент выше или шире чем элемент внутри.

4.2 Строчные элементы

Элементы, не форматируемые как блочные, относятся к строчным. Строчный элемент может делить пространство строки с другими элементами. Рассмотрим следующий пример:

  <P>Несколько <EM>подчеркнутых</EM> слов <STRONG>имеется</STRONG>.</P>

Элемент 'P' - нормальный блочный, в то время как 'EM' и 'STRONG' - строчные. Если ширина элемента 'P' достаточна, чтобы расположить весь элемент на одной строке, то тогда в строке будут два строчных элемента:

  Несколько подчеркнутых слов имеется.

Если же в строке места не хватает, строчные элементы будут разбиты на несколько полей:

  <P>Несколько <EM>подчеркнутых слов</EM> имеют место.</P>

Форматирование этого примера будет выглядеть как:

  Несколько подчеркнутых
  слов имеют место.

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

            -------------
  Несколько |подчеркнутых
            -------------
  -----
  слов | имеют место.
  -----

( Вышеприведенный рисунок несколько искажается из-за использования псевдографики ASCII. См. описание вычисления высоты линий в разделе 4.4.)

4.3 Замещаемые элементы

Замещаемые элементы - это элементы, замещаемые содержанием, указываемым в элементе. Например элемент 'IMG' замещается изображением, указанным в атрибуте 'SRC'. Важным свойством замещаемых элементов является наличие своих внутренних размеров. Если значения свойства "ширина"('width') равна 'auto', то в качестве ширины элемента используется внутренняя ширина. Если значение иное, чем 'auto' из перечисленных в таблице стилей, то это значение и используется, а замещаемый элемент соответственно меняет размеры (метод изменения размеров будет определяться видом информационного объекта). Таким же образом используется свойство "высота" ('height').

Замещаемые элементы могут быть как блочными, так и строчными.

4.4 Высота строки

Все элементы имеют свойство "высота строки" ('line-height'), что, в принципе, определяет общую высоту строки или текста. Высота строки увеличивается на промежуток, вставляемый выше и ниже текста в строке. К примеру, если текст 12 пунктов,

высота и "высота строки" устанавливаются равными '14pt', т.к. вставляется промежуток в 2 пункта, 1 сверху и 1 снизу строки. Пустые элементы влияют на эти расчеты точно так же, как и имеющие содержание.

Разница между размером шрифта (font size) и "высотой строки" называется интервалом (leading). Половина интервала называется полуинтервалом (half-leading). После форматирования каждая строка образует прямоугольное строчное поле.

Если строка текста содержит секции с разными значениями свойства "высота строки" (т.к. может быть несколько строчных элементов в одной строке), то каждая из таких секций имеет собственный полуинтервал сверху и снизу. Высота строчного поля отсчитывается от высоты самой высокой секции до низа самой низкой. Обратите внимание, что верх и низ не обязательно соответствуют наиболее высокому элементу, поскольку элементы могут быть позиционированы с помощью свойства "вертикальное выравнивание" ('vertical-align'). При формировании параграфа каждое строчное поле располагается ниже предшествующей строки.

Обратите внимание на то, что какой-либо отступ, рамка или граница сверху или снизу не замещаемого строчного элемента не влияют на высоту строки. Иными словами, если значение свойства "высота строки" слишком мало для выбранных отступа или рамки, они будут перекрываться с текстом других строк.

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

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

Следует иметь в виду, что это не позволяет исключить возможность перекрытия текста двух смежных строк. Значение свойства "высота строки" может оказаться меньше высоты текста, и интервал в этом случае будет отрицательным. Это обстоятельство может оказаться полезным, если заранее известно, что в тексте не будет подстрочных символов (напр. если там будут только символы верхнего регистра), и тогда строки можно сблизить.

4.5 Холст

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

• откуда должны определяться размеры холста?
• если документ не покрывает весь холст, как должна воспроизводиться эта область?

Логично было бы ответить на первый вопрос: "Изначальные размеры холста основаны на размерах окна", но CSS1 оставляет эту задачу на усмотрение UA. Также было бы логично, чтобы UA менял размеры холста соответственно размерам окна, но это также выходит за рамки полномочий CSS1.

Расширение языка HTML создало прецедент по второму вопросу: атрибуты элемента 'BODY' определяют фон для всего холста. Чтобы не разочаровать дизайнеров, CSS1 использует особое правило для определения фона холста:

Если значения свойств фона для элемента 'HTML' отличаются от 'transparent', то они и используются, в ином случае используются значения свойств фона, указанные для элемента 'BODY'. Если в результате все равно значение параметров фона равно 'transparent', то свойства фона считаются незаданными.

По этому правилу допускается:

  <HTML STYLE="background: url(http://style.com/marble.png)">
  <BODY STYLE="background: red">

В вышеуказанном примере, холст покрывается картинкой marble.png. Фон элемента 'BODY' (он может и не полностью покрывать холст) будет красным.

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

4.6 Элементы 'BR'

Текущие свойства и значения CSS1 не способны описать поведение элемента 'BR'. В языке HTML элемент 'BR' определяется как перевод строки между словами. Фактически, это принудительный перевод строки. Будущие версии CSS будут поддерживать ввод и замену содержания, но средства форматирования основанные на CSS1, должны использовать отдельные алгоритмы обработки объекта 'BR'