Для правильного применения правил форматирования следует представлять, как в каскадных таблицах стилей происходит форматирование элементов, т.е. на что можно влиять и что можно изменять в отображении элементов.
Модель форматирования каскадных таблиц стилей ориентирована на представление любого элемента 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 изложеные ранее: