Продолжаем тему блоков и создаем структуру сайта

В данном уроке мы рассмотрим, как превратить выровненные блоки в структуру сайта.

Скачать код из урока. Скачиваемый файл находится в архиве. Для использования – распакуйте его с помощью любой программы архиватора.

Краткий конспект урока:

Чаще всего логические блоки на сайте называют:

header – шапка сайта

aside – колонка на сайте. Бывает еще left-aside, right-aside

content – блок с основным контентом сайта

footer – нижняя часть или (подвал сайта)

padding - свойство CSS. Устанавливает значение полей внутри элемента и вокруг его содержимого. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

Примеры записи свойств:

padding: 10px; - поля будут установлены одновременно от каждого края элемента.

padding: 10px 20px; - первое значение устанавливает поля от верхнего и нижнего края (10px), второе — от левого и правого (20px).

padding: 10px 20px 30px 40px; - поочередно устанавливается поля от верхнего (10px), правого (20px), нижнего (30px) и левого (40px) края.

Также возможно отдельное написание для каждой стороны по отдельности:

padding-top: 10px; - отступ внутри блока сверху

padding-right: 20px; - отступ внутри блока справа

padding-bottom: 30px; - отступ внутри блока снизу

padding-left: 40px; - отступ внутри блока слева

text-align - свойство CSS. Определяет горизонтальное выравнивание текста в пределах элемента. Бывают: center – выравнивание по центру, justify – выравнивание по ширине, left– выравнивание по левому краю, right– выравнивание по правому краю.

Пример: text-align: center; - выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.

Размещение фонового изображения для блока:

Background - универсальное свойство CSS, позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.

background: url(../img/1.jpg); - в данном примере, с помощью этого свойства мы устанавливаем фоновую картинку.

background-size: cover; - свойство CSS, которое масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

background-position: center; - задает начальное положение фонового изображения, в данном примере изображение будет масштабироваться от центра. По умолчанию начальное положение располагается в левом верхнем углу.