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

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

 

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

 
Яндекс.Метрика
 
 
Проекты одноэтажных домов
Лучшие диваны

Использование блоков. Блоковая модель. (стр.1)

 

 

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы


Знание блоковой модели CSS позволяет нам верстать сайты без использования HTML-таблиц. В языке HTML можно создавать различные блоки: заголовки, абзацы, таблицы и пр. Мы уже знаем, что каждый элемент HTML отображается в виде структурного или строчного блока. Однако в HTML нет возможности позиционировать (точно размещать) созданные блоки на странице. Все они располагаются друг за другом в той последовательности, в которой указаны в коде страницы. Пожалуй, единственным исключением являются рисунки, для которых в элементе IMG можно указать выравнивание по правому или левому краю, например: <IMG src="picture.gif" align="right"<

В этом случае изображение как бы "вырывается" из обычного потока элементов и выравнивается по правому краю страницы, а текст и другие элементы обтекают его слева.

В CSS имеется обширный инструментарий, позволяющий не только создавать блоки на основе любых элементов HTML, но и точно позиционировать их на экране. При этом таблицами пользоваться не нужно, код страницы становится более логичным, понятным и легко читаемым. Естественно, что и размер кода при использовании CSS в большинстве случаев становится меньше.

Таким образом, формирование страницы при помощи средств CSS сводится к следующему:

  • создается блок и задаются его параметры;
  • вновь созданный блок размещается (позиционируется) на странице.
В предыдущих разделах мы уже рассматривали структуру блока в CSS. Итак, каждый блок имеет контентную часть, в которой располагается содержимое блока: текст, рисунки, таблицы, т.е. любые требуемые элементы. Естественно, внутри блока могут располагаться и другие блоки, тогда они называются вложенными в первый, а сам этот первый блок будет являться контейнером для вложенных в него блоков.


Контейнер есть у любого блока - им является элемент блокового уровня, непосредственный предок данного элемента в дереве элементов документа. Для некоторых элементов контейнером служит непосредственно окно браузера.

Контентная часть блока может быть окружена отступами, рамками и полями. Для них могут быть установлены некоторые значения или они могут быть нулевыми. Блок имеет некоторую фиксированную ширину (width) и высоту (height). Общая ширина контейнера блока складывается из собственно ширины блока, ширины левых и правых полей, толщины левой и правой границ, а также левого и правого отступов.

Все параметры полей, границ и отступов можно задать при помощи соответствующих свойств. Подробно мы их уже рассматривали ранее. Ширина контентной части блока задается при помощи свойства width, высота - при помощи свойства height. Как вы помните, поля, границы и отступы по умолчанию имеют нулевое значение, поэтому изначально ширина блока совпадает с шириной контейнера.

Если для некоторого блока не заданы явным образом ширина и высота, то они будут равны ширине контейнера этого блока. Так, если внутрь элемента BODY поместить любые другие элементы, например абзац, то ширина этого блока будет равна ширине контейнера BODY, т.е. ширине самого окна браузера.

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 - | - 7 - | - 8 -

 

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

 

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