Модель форматирования
Для правильного применения правил форматирования следует представлять, как в каскадных таблицах стилей происходит форматирование элементов, т.е. на что можно влиять и что можно изменять в отображении элементов.
Модель форматирования каскадных таблиц стилей ориентирована на представление любого элемента HTML в окружении вложенными прямоугольными блоками, как показано ниже:
ПОЛЕ
|
Блок содержимого элемента (самый внутренний блок) отделён от границы отступами. Самым внешним блоком является поле . Свойства таблиц стилей позволяют устанавливать размеры и цвета всех блоков, составляющих в сумме отображаемый элемент. Поле всегда является прозрачным прямоугольником, поэтому его цвет наследует цвет элемента-родителя (для абзаца это элемент <BODY> ). Отступ всегда имеет цвет фона самого элемента. Цвет и ширину границы можно указать отдельно, при её помощи можно создать рамку вокруг элемента.
Все перечисленные блоки в совокупности составляют блок форматирования элемента или блок отображения элемента, т.е. видимое в окне браузера изображение элемента. Размеры блока форматирования/отображения элемента складываются из размеров самого элемента и размеров отступов, границы и полей.
С точки зрения процесса форматирования документа существуют два типа элементов: блоковые и встроенные.
Блоковые элементы.
Каждый элемент в модели форматирования имеет свойство display , значение которого определяет, отображается или не отображается ( none ) элемент, является ли он блоком ( block ), списком ( list-item ) или встроенным элементом ( inline ).
Элементы со значением свойства display равным block или list-item , а также со значением свойства float , отличным от none (не "плавающие" элементы), являются блоковыми элементами . Их форматирование связанно с установкой значений параметров вложенных блоков, составляющих элемент в целом. На рисунке внизу показаны все параметры, доступные в модели форматирования каскадных таблиц стилей для блоковых элементов.
Примечание:
Параметры "верх" ( top ) и "низ" ( bottom ) не применяются к блоковым элементам, они существуют только для встроенных ( inline ) элеметнов, речь о которых пойдет ниже.
Ширина (width) элемента - это ширина блока содержимого, и определяется как расстояние между левым и правым внутренними краями. Высота (height) элемента - расстояние между внутренним верхом и низом.
При вертикальном форматировании блоковых, не "плавающих" элементов значения параметров "верхнее поле" и "нижнее поле" определяют минимальное расстояние до границ блоков окружающих их элементов. Если у двух примыкающих элементов определены не нулевые значения параметров полей, то при вертикальном формировании поля двух элементов сливаются в одно со значением, равным максимальной высоте поля одного из двух элементов. Подобное слияние можно наблюдать для элементов LI списка UL или OL .
Горизонтальное форматирование элемент определяется значениеми семи свойств: левое поле ( margin-left ), левая граница ( border-left ), левый отступ ( padding-left ), ширина ( width ), правый отступ ( padding-right ), правая граница ( border-right ) и правое поле ( margin-right ). Сумма значений этих семи параметров всегда равняется ширине элемента родителя или ширине окна браузера, если элемент не вложен в другой элемент.
По умолчанию параметр width имеет значение auto . Если элемент не является замещаемым (в тэге элемента задан параметр scr ), то браузер вычисляет ширину элемента из условия равентсва суммы значений семи семи указанных выше параметров ширине элемента-родителя. Для замещаемого элемента значение ширины автоматически заменяется шириной замещаемого элемента, если только значение ширины установлено в auto . В противном случае размер замещаемого элемента подгоняется под заданную в параметре ширину (процедура зависит от типа браузера).
Свойство float может переводить любой элемент в разряд "плавающих". Это приводит к тому, что указанный элемент выводится из нормльного потока отображения и форматируется как блоковый элемент. Например, установка свойства float элемента <IMG> равным left позволяет создать буквицу при выводе абзаца текста.
При значении свойства float равным left , элемент сдвигается влево до поля, отступа или границы другого бокового элемента, а нормальный поток отображения будет обтекать его с правой стороны.
Встроенные элементы
Элементы, которые не форматируются как блоковые, являются встроенными элементами ( inline ). Они совмесно с другими элементами используют область строки. Обычно выделяемые в строке элементы ( EM , STRONG , B и т.д.) классифицируются как встроенные.
Ниже представлен текст файла HTML с внедрённой таблицей стилей, на этом примере продемонстрированы способы использования CSS изложеные ранее:
Страница с образцом кода здесь.
