Лабораторная робота № 12 Блоки в css
Теоретические сведения
В языке HTML все элементы можно разделить на два типа: блочные и строчные. Блочные элементы создают визуально самостоятельную структурную единицу - блок. Примером блочных элементов могут быть элементы H1-Р6, Р, DIV. они отделяются от других абзацными отступами.
Строчные элементы не создают визуальной самостоятельной структурной единицы и выводятся линейной строкой. Примеры: элементы I, B, U, S, ЕМ и др.
1.1. Блоки.
Два блочных элемента не могут располагаться в одной строке, а два строчных, соответственно, могут.
Модель представления документов в CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.
Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента р содержимым блока является текст абзаца.
Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (padding). С точки зрения дизайна поля обеспечивают для содержимого блока эстетически более привлекательный вид. При наличии полей определенного размера текст не примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливаемыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бумаги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее.
Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет.
Также блок может иметь отступы (margin), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого. На рисунке приведена обобщенная структура блока в CSS.
Рис.
1.Структура блока в CSS
Все поля, границы и отступы делятся соответственно на верхние, нижние, правые! и левые. Для каждого из них можно задать значения независимо от других. Фон для различных областей блока задается следующим образом:
Область содержимого: фон задается свойством background элемента, порождающего данный блок.
Поля: фон задается свойством background элемента, порождающего данный блок.
Границы: вид границ определяется свойствами границ элемента, порождающего блок. Фона они не имеют, чаще всего это линии определенного стиля (пунктирная, сплошная и тому подобное, цвета и толщины.
Отступы: область отступов всегда прозрачна, соответственно, сквозь нее можег просвечивать фон родительских элементов. Таким образом, отступы как бы наследуют фон от родительского элемента.