Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.

Да, да, да… Мы знаем, что вы уже устали от теории и хотите практики! Но Нам важно сейчас охватить максимально большой объем информации, поэтому поднапряжемся в последний раз, ведь у нас есть хорошая новость – это последний теоретический урок по CSS! Дальше мы займёмся практикой! 

На этом уроке мы рассмотрим такие разделы CSS, как блоки и их виды, свойства и позиционирование!

Приступим!

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

Блочные элементы визуально создают самостоятельную структурную единицу – блок, а строчные элементы выводятся линейной строкой.

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

Блоки имеют содержимое и отступы вокруг содержимого. Так же они имеют границы, которые можно показать, а можно скрыть, как в таблицах. Границы можно задать для каждой стороны блока: border-top - верхняя граница, border-right - правая граница, border-bottom - нижняя граница, border-left - левая граница.

Причём каждой стороне границы можно задать свой цвет, толщину и тип линии! Для этого к свойству границы через дефис необходимо дописать: color (для цвета), width (для толщины) и style (для типа линии). Например, border-top-color определяет цвет верхней границы.

Widht принимает такие значения: thin (тонкая граница), medium (средняя граница) и thick (толстая граница). А также любая единица измерения.

Style принимает такие значения: none - граница отсутствует, dotted - граница состоит из точек, dashed - граница в виде пунктирной линии, solid - граница отображается сплошной линией, double - граница отображается двойной сплошной линией, groove - граница отображается вдавленной объемной линией, ridge - граница отображается выпуклой объемной линией, inset - граница отображается так, что весь блок выглядит вдавленным и outset - граница отображается так, что весь блок выглядит выпуклым.

Ещё блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента. Поля в CSS можно определять отдельно для верхней, правой, нижней и левой сторон. Для этого используются свойства: margin-top - ширина верхнего поля, margin-right - ширина правого поля, margin-bottom - ширина нижнего поля, margin-left - ширина левого поля.

Padding (отступы) - позволяют отделить содержимое блока от границы. Параметры отступов можно задать для каждой стороны отдельно, используя следующие свойства: padding-top - ширина верхнего отступа, padding-right - ширина правого отступа, padding-bottom - ширина нижнего отступа, padding-left - ширина левого отступа. Значения свойств могут задаваться в различных единицах длины или в процентах.

Всё вышесказанное означает, что элементы на странице можно расположить по своему усмотрению! Причём без таблиц и громоздкого кода!!!

Для задания свойств блокам существует элемент div - этот элемент является контейнером для остальных. Элемент div отделяется от остальных элементов абзацными отступами. Элемент span, в отличии от div, создает строчный блок.

Приступим к изучению позиционированию!

Как Вы уже поняли в CSS для позиционирования элементов используются блоки (div-ы). Код при этом становится компактным, логичным и легко изменяемым.

Позиционирование бывает следующих видов:

1) абсолютное позиционирование

2) относительное позиционирование

3) плавающая блоковая модель

Для определения схемы позиционирования используется свойство position, оно может принимать четыре значения, соответствующие выбранной схеме позиционирования: static - блок позиционируется в нормальном потоке. Это значение по умолчанию, relative - относительное позиционирование (относительно нормального потока), absolute - абсолютное позиционирование, fixed - фиксированное позиционирование (фиксируется относительно области просмотра).

На этом давайте остановимся и разберём каждый вид позиционирования по отдельности.

1) Итак, абсолютное позиционирование - расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства: left - указывает на сколько надо сместить блок относительно левого края окна, right - указывает на сколько надо сместить блок относительно правого края окна, top - указывает на сколько надо сместить блок относительно верхнего края окна, bottom - указывает на сколько надо сместить блок относительно нижнего края окна.

Важно!!! При абсолютном позиционировании следует задать для блока свойство position:absolute и свойства смещения относительно "родительского" элемента.

При абсолютном позиционировании, чтобы не запутаться с величинами смещения, определите сначала главный блок (родительский) и помните, что смещение происходит относительно этого блока.

2) Относительное позиционирование - задается свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке.

3) Плавающие блоки - такие блоки нельзя позиционировать с точностью до пикселя, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Такие блоки могут свободно перемещаться по странице. Плавающие блоки определяются свойством float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта: left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны, right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны, none - блок не перемещается и позиционируется согласно свойству position.

Можно задать каким сторонам плавающего блока нельзя соседствовать с другими, а каким можно. Для этого существует свойство clear. У этого свойства может быть задано одно из четырех значений: left - блок должен располагаться ниже всех левосторонних блоков, right - блок должен располагаться ниже всех правосторонних блоков, both - блок должен располагаться ниже всех плавающих блоков, none - никаких ограничений нет, это значение по умолчанию.

На этом наш урок окончен. Всем удачи! До встречи на следующем уроке!

Поделиться...