Лекция 13. Модель компоновки CSS
Admin 15-10-2023, 20:41 195 Лекции по современным веб-технологиямМодель компоновки CSS
Одним из самых важных инструментов дизайна является точное управление свободным пространством. Любое пустое пространство вокруг элемента невольно притягивает к нему взгляд, а для текста еще и обеспечивает его оптимальное восприятие. Пустой промежуток вокруг элемента выделяет его на веб-странице и позволяет отделить один элемент от другого. Однако таблицы стилей браузера, используемые по умолчанию, не решают задачу управления свободным пространством с достаточной точностью, поэтому разработчикам часто приходится использовать поля, границы, заполнение и другие свойства компоновки CSS. Все свойства компоновки CSS объединены в модель компоновки CSS, которая также называется боксовой моделью. Боксовая модель имеет детальные опции для определения полей, границ, заполнения и содержимого каждого элемента. Однако прежде чем рассматривать свойства для оформления боксов, необходимо немного поговорить о них самих.
Документ HTML состоит из множества перемешанных элементов. Когда такой документ изображается на экране компьютера или печатается на бумаге, эти элементы генерируют прямоугольные боксы. По умолчанию, встроенная таблица стилей в браузере заставляет элементы HTML блочного уровня (такие, как P и DIV ) генерировать блочные боксы, в то время как строковые элементы (такие, как STRONG и SPAN ) генерируют строковые боксы. Типом генерируемого бокса можно управлять, используя свойство display, которое будет рассмотрено ниже.
На рисунке показано, как построена боксовая модель:
Рис. 13.1. Иллюстрация различных частей бокса элемента, помеченных соответствующими свойствами CSS
Поля элемента: свойство margin
Для управления значениями полей элементов предназначено свойство margin. Это универсальный параметр, в зависимости от числа значений, он устанавливает поля со всех сторон элемента или для каждой его стороны отдельно. Например, указание одного значения задаст равные поля вокруг элемента.
Допустимые значения обычно определяют в единицах измерения px или em (пикселях или em). В таблицах стилей, предназначенных для печати, в качестве единиц измерения можно использовать дюймы (in), сантиметры (cm) или пункты pt (пункты).
Для задания полей с разных сторон элемента предназначены производные от свойства margin - margin-left, margin-right, margin-top и margin-bottom, задающие значения левого, правого, верхнего и нижнего поля соответственно. Например, ниже представлен пример задания полей документа, т.е. элемента BODY. На рисунке 13.2 показано, какие поля необходимо определить и какие значения необходимо им придать.
BODY { margin-top: 100px; margin-right: 70px; margin-bottom: 40px; margin-left: 40px; }Это же правило можно записать в следующем виде:
BODY {margin: 100px 70px 40px 40px;}
Рис. 13.2. Иллюстрация применения свойства marginТаким же образом можно установить поля почти для любого элемента. Например, можно определить поля для всех параграфов на веб-странице:
P {margin: 5px 50px 5px 50px;}Добавление границы: свойства border, border-width, border-style и border-color
Границы имеют разнообразное применение, например, как декоративный элемент или для отделения двух объектов. Для задания границ применяется несколько способов, один из которых основан на использовании свойства border и его производных. Это свойство позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения разделяются пробелами и могут идти в любом порядке. Браузер сам определит, какое значение соответствует нужному атрибуту:
P {border: 2px solid black;}Данное правило позволяет создать вокруг прямоугольной области сплошную рамку черного цвета толщиной 2 пиксела. Первый аргумент в данном случае определяет толщину, второй - тип линии, а третий - ее цвет.
Когда значение в border отсутствует, выводимый элемент будет использовать значения по умолчанию: толщина границы будет определяться браузером, стиль границы будет solid, а цвет границы будет совпадать с цветом, используемым для рассматриваемого элемента.
Можно задать толщину, стиль и цвет любой из четырех сторон элемента, используя свойства border-top, border-bottom, border-left и border-right. Например, следующий пример создает нижнюю границу для элемента H1 в виде красной сплошной линии толщиной 1 пиксел:
H1 {border-bottom: 1px solid red);}Толщину, стиль и цвет также можно задать отдельно, используя соответствующие свойства.
Толщина границы: свойство border-width
Это свойство задает толщину одной или нескольких сторон границы. Сокращенное свойство border-width принимает значения в той же нотации, что и сокращенное свойство margin, за исключением того, что процентные значения не поддерживаются. Например, свойство border-width может быть задано следующим образом:
TD {border-width: 1px 0 0 1px;}Стиль границы: свойство border-style
Свойство border-style задает стиль линии и может принимать одно из восьми значений, представленных на рисунке 13.3.
Рис. 13.3. Возможные значения свойства border-style
Цвет границы: свойства border-color
Для каждой границы можно задать любой цвет с помощью сокращенного свойства border-color или его уточнения. Например
TD {border-color: ##FF0000;}Заполнение элемента: свойство padding
Заполнение определяет внутреннее расстояние между границей и содержимым элемента. Для изменения этой характеристики предназначено свойство padding. Оно позволяет задать расстояние между границей и содержанием для всех или определенных сторон элемента. Это свойство действует аналогично margin, поэтому итоговый результат зависит от числа аргументов. Для указания расстояний от разных сторон элемента можно воспользоваться свойствами padding-left, padding-right, padding-top и padding-bottom, которые управляют величиной расстояния слева, справа, сверху и снизу соответственно.
Основное предназначение заполнения - создать пустое пространство вокруг содержимого блочного элемента, например, текста, чтобы он не прилегал плотно к границе элемента. Использование заполения повышает читабельность текста и улучшает внешний вид страницы. В следующем примере показано использование заполнения для оформления текста:
DIV.first {padding: 20px;} DIV.second {padding: 10px; padding-left: 50;}В данном примере создается два блока с разными характеристиками. В первом блоке вокруг текста по вертикали и горизонтали с помощью свойства padding задается одинаковое поле со значением 20 пикселов. Во втором блоке поле слева увеличено через свойство padding-left.
Установка высоты и ширины элемента
Установить высоту и ширину элемента можно с помощью свойств height и width соответственно. Однако при применении данных свойств существуют некоторые особенности. Например, данные свойства не могут применяться к строковым элементам HTML, таким, как, например, SPAN, STRONG или EM.
Работа с потоком элементов
Типы блоков: свойство display
Каждый элемент в Рекомендациях HTML 4.01, который связан с основным контентом, имеет соответствующий строковый или блочный тип. Каждый тип определяет поведение компоновки по умолчанию различным образом. Например, последовательно идущие строковые элементы изображаются на общей базовой линии, в то время как блочные элементы всегда отделяются друг от друга и выводятся с предшествующим и последующим разрывом строки.Свойство display имеет три наиболее часто используемых значения - block, inline и none - два из которых имеют прямое отношение к соответствующим типам элементов. Данное свойство позволяет изменить поведение элементов (например, строковый элемент будет вести себя как блочный или наоборот). Свойство display со значением none может изменять представление данного элемента в документе. Например, с помощью следующего правила можно удалить посторонний фрагмент из заголовка:
.sectionNote {display: none;}"Всплывающие" элементы: свойства float и clear
Элемент может "всплывать" вправо или влево с помощью свойства float. То есть бокс с его содержимым может смещаться к правому или левому краю в окне документа (или содержащего бокса). Если необходимо, например, чтобы текст окружал рисунок, как показано на рисунке 13.4, то фрагмент кода должен выглядеть следующим образом:... <STYLE type="text/css"> #picture { float:left; width: 130px;} </STYLE> ... <DIV id="picture"> <IMG src="Beatles.jpg" alt="The Beatles"> </DIV> <P>Far away, 80000 leagues below the sea, ... </P> ...Чтобы рисунок смещался влево, а текст его окружал, необходимо определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left.
Рис. 13.4. Пример обтекания рисунка текстомСвойство clear управляет поведением последовательности всплывающих элементов документа. По умолчанию, последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс смещается в сторону. Например, в предыдущем примере текст автоматически смещается вверх вдоль изображения. Свойство clear может иметь значения left, right, both или none.