Общий формат отображения Свойства границы Свойства заполнителя Свойства рамки Размеры рамки Цвета рамки Стили рамки Сокращенные свойства рамки Общий формат отображения В этой главе мы описываем общий формат визуального отображения элементов документа, используемый CSS. Для каждого элемента генерируется объемлющий его прямоугольник, строение которого показано на рисунке. Как видно из рисунка, объемлющий прямоугольник состоит, помимо содержимого (content), из заполнителя (padding), рамки (border) и границы (margin). В свою очередь, каждый из этих слоев распадается на четыре части: левую (left), правую (right), верхнюю (top) и нижнюю (bottom). На рисунке эти части обозначены соответствующими сокращениями: "LM" - левая граница (left margin), "TB" - верхняя рамка (top border) и т. п. Периметр каждой из четырех частей прямоугольника называется ее краем, так что каждый объемлющий прямоугольник содержит четыре края: Край содержимого или внутренний край - Ограничивает отображаемое содержимое элемента. Край заполнителя - Ограничивает заполнитель прямоугольника. Если ширина заполнителя равна 0, то край заполнителя совпадает с внутренним краем элемента. Прямоугольник, ограниченный краем заполнителя, иначе называется вмещающим блоком элемента. Край рамки - Ограничивает рамку прямоугольника. Если ширина рамки равна 0, то край рамки совпадает с краем заполнителя элемента. Край границы или внешний край - Ограничивает границу прямоугольника. Если ширина границы равна 0, то край границы совпадает с краем рамки элемента. Каждый край, в свою очередь, распадается на четыре части: левую, правую, верхнюю и нижнюю. Размеры области содержимого в прямоугольнике, или ширина содержимого и высота содержимого, зависят от нескольких факторов: что именно является содержимым элемента (текст, таблица или другие элементы), заданы ли свойства элемента width и height и т. д. Подробно эти вопросы обсуждаются в этой главе. Ширина объемлющего прямоугольника равна сумме ширин левой и правой границы, левой и правой рамки, левого и правого заполнителя и ширины содержимого. Его высота равна сумме высот верхней и нижней границы, верхней и нижней рамки, верхнего и нижнего заполнителя и высоты содержимого. Фон различных областей объемлющего прямоугольника определяется следующим образом: Содержимое: свойство background генерирующего элемента. Заполнитель: свойство background генерирующего элемента. Рамка: свойства рамки генерирующего элемента. Граница: границы всегда прозрачны. Проиллюстрируем введенные понятия примером, в котором использованы все четыре области объемлющего прямоугольника. Текст абзаца Этот прямоугольник сгенерирован следующим элементом: <P style="background-color: yellow; color: blue; margin: 20px 25%; padding: 10px; border: thick solid green">Текст абзаца</P> Вперед  >>>  1  2  3  4  5  6  7   8  Комментарии к статье  8 8  Обсудить в чате

8  В тему Введение в таблицы стилей Селекторы, псевдоклассы и псевдоэлементы Значения свойств, каскадность и наследование Позиционирование элементов Визуализация элементов Цвет и фон Шрифты Текст Таблицы Генерация содержимого, нумерация и списки Страничные устройства вывода Звуковые таблицы стилей