Блочные элементы визуально создают самостоятельную структурную единицу - блок. К ним можно отнести, например, элементы 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 - блоком. В следующем уроке мы научимся задавать поля, отступы и границы.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как сделать сайт → Уроки CSS → Урок 8. Блоки
CSS - Урок 8. Блоки
В HTML все элементы можно разделить на два типа: блочные и строчные.Блочные элементы визуально создают самостоятельную структурную единицу - блок. К ним можно отнести, например, элементы H1-H6, P, DIV. Такие элементы отделяются от других абзацными отступами.
Строчные элементы выводятся линейной строкой. К ним можно отнести, например, элементы I, B, U, S и другие.
В CSS модель документа представляется блоком. Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Причем, есть блоки, структурно отделенные от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.
Блок имеет прямоугольную форму:
Итак, у блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого.
Затем идет граница блока (border), которая может быть как видимой, так и невидимой.
Также блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента.
Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.
Способы задания всех этих свойств мы рассмотрим позже, а пока, чтобы стало понятнее, приведем пример. Пусть у нас есть html-страница с двумя абзацами:
Сейчас наша страница в браузере выглядит так:
Как мы уже знаем, отступы от границы задаются свойством padding, зададим его для параграфов:
Посмотрим на результат в браузере:
Теперь у нас есть отступы внутри блока. Задание полей отделит блоки друг от друга:
Посмотрим на результат в браузере:
Наконец, зададим размеры блоков параграфов:
Посмотрим на результат в браузере:
Таким образом, как вы уже наверно догадались, можно располагать элементы на странице так, как нам захочется. И заметьте без всяких таблиц и обилия кода. Именно на понятиях блоков строится блочная верстка сайта.
Сегодня мы познакомились с основным понятием CSS - блоком. В следующем уроке мы научимся задавать поля, отступы и границы.
Предыдущий урок Вернуться в раздел Следующий урок
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
|
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|
|