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

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

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

3 Элемент DIV Блочный элемент, заданный элементом разметки DIV. Для него определена граница и отступы как от границ старшего элемента разметки, так и для вложенных в него элементов разметки.

4 Элемент SPAN HTML-элементCSS-аналог...

5 Элемент SPAN предложение с пересекающимися стилями

6 Свойства блоков Высота (height), Ширина (width), Граница (border), Отступ (margin), Набивка (padding), Произвольное размещение (float), Управление обтеканием (clear).

7 Свойства блоков пикселы типографские пункты условные единицы

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

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

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

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

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

13 Граница (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;}

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