Каскадные таблицы стилей Блочные и строковые элементы. Блочные

Каскадные таблицы стилей Блочные и строковые элементы

Блочные и строковые элементы Атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента. DIV – обобщение блочного элемента; SPAN – обобщение строкового элемента. Пример: Параграф – блочный элемент разметки (block). Выделение курсивом – строковый элемент разметки (in-line).

Свойства блоков

Свойства блоков

Отступы (margin) margin-left — левый внешний отступ. Определяет расстояние от левой границы блока текста до левой границы внутреннего отступа ("набивки", padding) охватывающего элемента; margin-right — правый внешний отступ. Определяет расстояние от правой границы блока текста до правой границы внутреннего отступа ("набивки", padding) охватывающего элемента; margin-top — верхний внешний отступ. Определяет расстояние от верхней границы блока текста до верхней границы внутреннего отступа ("набивки", padding) охватывающего элемента; margin-bottom — нижний внешний отступ. Определяет расстояние от нижней границы блока текста до нижней границы внутреннего отступа ("набивки", padding) охватывающего элемента; margin — задает общий внешний отступ от всех сторон блока текста. Применяется в том случае, если блок текста равноудален от всех границ внутреннего отступа охватывающего элемента.

Отступы (margin) P { margin-left:50px;margin-right:5px; margin-top:15px; margin-bottom:50px; padding:0px;text-align:left; }

Внутренний отступ (padding) (иногр padding-left — левый внутренний отступ, который определяет расстояние от левого края блока до его содержания; padding-right — правый внутренний отступ, который определяет расстояние от правого края блока до его содержания; padding-top — верхний внутренний отступ, который определяет расстояние от верхнего края блока до его содержания; padding-bottom — нижний внутренний отступ, который определяет расстояние от нижнего края блока до его содержания; padding — определяет единый размер внутреннего отступа блока. Этот параметр задается в случае одинакового размера отступа от всех сторон блока.

Набивка (padding) P {padding-left:100px;padding-right:50px; padding-top:20px; padding-bottom:10px; text-align:left; border-width:1px; }

Граница (border) border-top-width — ширина верхней границы блока; border-bottom-width — ширина нижней границы блока; border-left-width — ширина левой границы блока; border-right-width — ширина правой границы блока; border-width — ширина границы блока. Задается в том случае, если ширина границы блока одинаковая по всему периметру блока; border-color — цвет границы блока. Может быть задан для каждой из границ блока. border-style — тип линии границы блока. Может принимать значения: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Может быть задан для каждой из границ блока. P {text-align:left; border-width:2px; border-color:darkred; border-style:solid;}

Обтекание блока текста Атрибут float определяет "плавающий" блок текста. Значения: left — блок прижат к левой границе охватывающего элемента; right — блок прижат к правой границе охватывающего элемента; both — текст может обтекать блок с обеих сторон. Атрибут clear управляет обтеканием. Он не допускает наличия "плавающих" блоков около блока текста. Значения: right, left, none, both. Обтеканием блока текста другим текстом управляют атрибуты float и clear.