Для правильного применения правил форматирования следует представлять, как в каскадных таблицах стилей происходит форматирование элементов, т.е. на что можно влиять и что можно изменять в отображении элементов.
Модель форматирования каскадных таблиц стилей ориентирована на представление любого элемента HTML в окружении вложенными прямоугольными блоками, как показано ниже:
ПОЛЕ
ГРАНИЦА
ОТСТУП
Содержание элемента
, здесь можно задать текст и посмотреть как отображается абзац с несколькоми строками
Блок содержимого элемента (самый внутренний блок) отделён от границы отступами. Самым внешним блоком является поле. Свойства таблиц стилей позволяют устанавливать размеры и цвета всех блоков, составляющих в сумме отображаемый элемент. Поле всегда является прозрачным прямоугольником, поэтому его цвет наследует цвет элемента-родителя (для абзаца это элемент ). Отступ всегда имеет цвет фона самого элемента. Цвет и ширину границы можно указать отдельно, при её помощи можно создать рамку вокруг элемента.
Все перечисленные блоки в совокупности составляют блок форматирования элемента или блок отображения элемента, т.е. видимое в окне браузера изображение элемента. Размеры блока форматирования/отображения элемента складываются из размеров самого элемента и размеров отступов, границы и полей.
С точки зрения процесса форматирования документа существуют два типа элементов: блоковые и встроенные.
Блоковые элементы.
Каждый элемент в модели форматирования имеет свойство display, значение которого определяет, отображается или не отображается (none) элемент, является ли он блоком (block), списком (list-item) или встроенным элементом (inline).
Элементы со значением свойства display равным block или list-item, а также со значением свойства float, отличным от none (не "плавающие" элементы), являются блоковыми элементами. Их форматирование связанно с установкой значений параметров вложенных блоков, составляющих элемент в целом. На рисунке внизу показаны все параметры, доступные в модели форматирования каскадных таблиц стилей для блоковых элементов.
|
