Урок №11: Блочные элементы и их свойства
Сегодня блочная структура сайта самая популярная и эффективная среди веб-мастеров. Табличная структура сайта также еще встречается, однако несколько реже. Фреймовая структура имеет ряд недостатков, поэтому ее можно встретить довольно редко и в исключительных случаях.
Элементы HTML-кода делятся на два типа - блочные и строчные. К блочным относятся элементы, такие как P, Div, H, которые имеют абзацные отступы. К строчным относятся - strong, em, ins и много других, которые выводятся линейной строкой. На рисунке справа изображен блок (зеленым), он имеет прямоугольную форму.
Width - ширина блока и height - высота, определяется его содержимым, при этом, отступы и поля не учитываются в размере блока.
Padding - внутренние отступы (от рамки до содержимого блока), необходимо задавать, чтобы содержимое блока не находилось вплотную к его рамке.
Border - рамка и граница блока, по умолчанию она невидимая (значение - 0).
Margin - внешние отступы, создают определенное пространство вокруг блока.
Создадим два блока абзацев и зададим в таблице стилей такие параметры:
p{
border:1px solid blue;
padding:10px;
margin:50px;
width:100px;
height:50px;
}
Пример блока параграфа
Пример блока параграфа
|
В результате: содержимое абзацев имеет синюю рамку толщиной в 1 пиксел, ширину - 100 пикселей, высоту - 50 пикселей, внутрений отступ от рамки до содержимого блока - 10 пикселей, внешний отступ - 50 пикслей (видно по расстояниею между двумя блоками).
Как правило, для работы с блоками используют элементы div и span. Div - создает блок с абзацными отступами, а span - создает строчный блок. Ниже рассмотрим свойства и значение блоков более подробно.
Рамка блока
Границу можно задать для каждой из четырех сторон содержимого, для этого используются такие свойства:
- border-top - отвечает за верхнюю границу
- border-right - отвечает за правую границу
- border-bottom - отвечает за нижнюю границу
- border-left - отвечает за левую границу
Каждой стороне рамке можно задать свои характеристики(цвет, стиль, толщину), для этого в свойство необходимо через дефис написать соответствующие ключи. Например: border-top-color - задаст цвет верхней стороне рамки. Если задать характеристики всей рамки, то можно использовать сокращенную запись:
- border-color - цвет всех четырех сторон рамки. В значении можно указать любой цвет или его код из Таблицы цветов
- border-width - толщина всех четырех сторон рамки. В значении можно указать любую Единицу измерения
- border-style - стиль всех четырех сторон рамки.
Стиль рамки определяется следующими значениями:
- none - рамка отсутствует.
- dotted - рамка состоит из точек. border-style:dotted
- dashed - рамка в виде пунктирной линии. border-style:dashed
- solid - рамка в виде сплошной линией. border-style:solid
- double - рамка в виде двойной сплошной линией. border-style:double
- groove - рамка в виде вдавленной объемной линией. border-style:groove
- ridge - рамка в виде выпуклой объемной линией. border-style:ridge
- inset - рамка создает вид, что блок выглядит вдавленным. border-style:inset
- outset - рамка создает вид, что блок выглядит выпуклым. border-style:outset
Эффективно использовать сокращенную запись параметров рамки: p{border:2px dashed red;}, где первое значение толщина, второе - стиль и третье - цвет рамки абзаца.
Ширина рамки - 2 пиксела, стиль - dashed, цвет - красный.
Внешние отступы от блока
Во круг блочного элемента можно создать свободное пространство с помощью свойства margin, в значение которого необходимо указать единицу измерения отступа. Есть возможность задать разную величину для отступа каждой стороны элемента, для этого существуют такие свойства:
- margin-top - ширина внешнего отступа верхней стороны.
- margin-right - ширина внешнего отступа правой стороны.
- margin-bottom - ширина внешнего отступа нижней стороны.
- margin-left - ширина внешнего отступа левой стороны.
Для удобства можно использовать сокращенную запись - p{margin:5px 10px 15px 20px;}, однако очень важно придерживаться порядка вставки значений. Первой значение(5пикселей) - верхний отступ, второе(10пикселей) - правый отступ, третье(15пикселей)- нижний отступ, четвертое(20пикселей) - левый отступ. Чтобы запомнить порядок указания значений, двигайтесь по часовой стрелке, начиная с 12 часов.
Если вертикальные (верхний и нижний) и горизонтальные (левый и правый) отступы совпадают, то запись сократится до двух значений: p{margin:5px 10px} - 5пикселей вертикальные отступы(верхний и нижний), 10пикселей - горизонтальные отступы(правый и левый).
Если внешние отступы, всех четырех стороны одинаковые, достаточно задать только одно значение: p{margin:5px} - в таким случае от содержимого параграфа, со всех сторон, будет отступ с шириной 5 пикселей.
Значение свойства margin может быть задано любой Единицей измерения, но, как правило, задается в пикселах. Также величина отступов может принимать отрицательное значение, что иногда может пригодиться.
Внутренние отступы блока
Внутренние отступы позволяют отделить содержимое блока от его рамки, с помощью свойства padding, в значение которого необходимо указать единицу измерения отступа. Есть возможность задать разную величину для внутреннего отступа от каждой стороны элемента, для этого существуют такие свойства:
- padding-top - ширина внутреннего отступа от верхней границы.
- padding-right - ширина внутреннего отступа от правой границы.
- padding-bottom - ширина внутреннего отступа от нижней границы.
- padding-left - ширина внутреннего отступа от левой границы.
Также как и с внешними отступами, с внутренними работает сокращенная запись p{padding:5px 10px 15px 20px;}, также очень важно придерживаться порядка вставки значений. Первой значение(5пикселей) - верхний отступ, второе(10пикселей) - правый отступ, третье(15пикселей)- нижний отступ, четвертое(20пикселей) - левый отступ. Чтобы запомнить порядок указания значений, двигайтесь по часовой стрелке, начиная с 12 часов.
В целом свойство padding работает аналогично свойству margin, только отвечает за внутренние отступы содержимого блока от его границы. Значение величины padding всегда должно быть положительным( по умолчанию 0).
Блоки широко используются в верстке, так как поддерживают практически все элементы HTML. Можно задать фон блока - background:цвет; , цвет текста в блоке, создать в нем форму, таблицу, разместить изображение и т.д.
На следующем уроке рассмотрим виды позиционирования блоков и плавающие блоки: Позиционирование блоков
|