Как сделать сайтУроки CSS → Урок 8. Блоки

CSS - Урок 8. Блоки

В HTML все элементы можно разделить на два типа: блочные и строчные.

Блочные элементы визуально создают самостоятельную структурную единицу - блок. К ним можно отнести, например, элементы H1-H6, P, DIV. Такие элементы отделяются от других абзацными отступами.

Строчные элементы выводятся линейной строкой. К ним можно отнести, например, элементы I, B, U, S и другие.

В CSS модель документа представляется блоком. Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Причем, есть блоки, структурно отделенные от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.

Блок имеет прямоугольную форму:



Итак, у блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого.

Затем идет граница блока (border), которая может быть как видимой, так и невидимой.

Также блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента.

Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.

Способы задания всех этих свойств мы рассмотрим позже, а пока, чтобы стало понятнее, приведем пример. Пусть у нас есть html-страница с двумя абзацами:
<html> <head> <title>Заголовок документа</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Текст в параграфе.</p> <p>Текст в параграфе.</p> </body> </html>
Для того, чтобы увидеть отступы, поля и границы, зададим границу (пока не вдаваясь в подробности из чего она состоит):
p{ border:1px solid red; }


Сейчас наша страница в браузере выглядит так:


Как мы уже знаем, отступы от границы задаются свойством padding, зададим его для параграфов:
p{ border:1px solid red; padding:10px; }


Посмотрим на результат в браузере:


Теперь у нас есть отступы внутри блока. Задание полей отделит блоки друг от друга:
p{ border:1px solid red; padding:10px; margin:50px; }


Посмотрим на результат в браузере:


Наконец, зададим размеры блоков параграфов:
p{ border:1px solid red; padding:10px; margin:50px; width:100px; height:50px; }


Посмотрим на результат в браузере:


Таким образом, как вы уже наверно догадались, можно располагать элементы на странице так, как нам захочется. И заметьте без всяких таблиц и обилия кода. Именно на понятиях блоков строится блочная верстка сайта.

Сегодня мы познакомились с основным понятием CSS - блоком. В следующем уроке мы научимся задавать поля, отступы и границы.



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.