Урок 7. Задание отступов (полей, отбивок) для слоёв

В 6-ом уроке мы довели хтмл-страницу почти до нужного вида, но хотелось бы оторвать шапку сайта от блоков меню и контента. Для этого используем специальный параметр margin, который отвечает за параметры полей, допишем этот параметр в таблицу стилей для шапки (header).

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }

Вы заметили, что дописана строка не просто margin:10px, а вот так margin-bottom:10px - так мы указали атрибуты полей только для нижней стороны слоя, а не для всех сторон.

Итак, вы запомнили, что поля задаются параметром margin, но это поля внешние, а можно ещё задать поле (отбивка) и внутри слоя с помощью параметра padding, попробуйте дописать его в таблицу.

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; padding:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }

Теперь посмотрите как изменилась хтмл-страница, текст в шапке должен находиться на расстоянии 10 пикселей от края слоя.

Можно задать отбивки и для остальных слоёв, но мы не будем этого делать, поскольку мы уже сделали отступы между слоями и делать ещё поля внутри слоёв нет надобности, поэтому просто оставим внешние поля и немного их увеличим:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:15px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:645px; height:300px; float:right; }

С полями (margin) и отбивками (padding) разобрались и теперь перейдём к форматированию шрифтов.

Уроки по CSS (дивный дизайн)

Урок 1. Делаем сайт на div-ах
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаём цвет фона для слоёв
Урок 4. Ширина и высота слоёв (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоёв относительно вертикали
Урок 7. Задание отступов (полей, отбивок) для слоёв
Урок 8. Форматирование шрифтов (CSS)
Памятка вебмастеру по CSS

Как заработать в Интернете


Copyright © computerlessons.mega8.ru, 2007 - 2024. Все права защищены.

Информация