... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Форматирование блоков. Блоки в HTML и CSS.

 

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?


В языке HTML все элементы можно разделить на два типа: блочные и строчные. Блочные элементы создают визуально самостоятельную структурную единицу - блок. Примером блочных элементов могут быть элементы H1-Р6, Р, DIV. Как мы уже говорили ранее, они даже отделяются от других абзацными отступами.

Строчные элементы не создают визуальной самостоятельной структурной единицы и выводятся линейной строкой. Примеры: элементы I, B, U, S, ЕМ и др.

Два блочных элемента не могут располагаться в одной строке, а два строчных, соответственно, могут.

Модель представления документов в CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.

Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента р содержимым блока является текст абзаца.

Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (padding). С точки зрения дизайна поля обеспечивают для содержимого блока эстетически более привлекательный вид. При наличии полей определенного размера текст не примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливаемыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бумаги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее.

Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет.

Также блок может иметь отступы (margin), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого. На рисунке приведена обобщенная структура блока в CSS.

Структура блока в CSS

Структура блока в CSS


Все поля, границы и отступы делятся соответственно на верхние, нижние, правые! и левые. Для каждого из них можно задать значения независимо от других. Фон для различных областей блока задается следующим образом.

  • Область содержимого: фон задается свойством background элемента, порождающего данный блок.
  • Поля: фон задается свойством background элемента, порождающего данный блок.
  • Границы: вид границ определяется свойствами границ элемента, порождающего блок. Фона они не имеют, чаще всего это линии определенного стиля (пунктирная, сплошная и тому подобное, цвета и толщины.
  • Отступы: область отступов всегда прозрачна, соответственно, сквозь нее можег просвечивать фон родительских элементов. Таким образом, отступы как бы наследуют фон от родительского элемента.

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены