Урок 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, попробуйте дописать его в таблицу. /* таблица стилей */ Теперь посмотрите как изменилась хтмл-страница, текст в шапке должен находиться на расстоянии 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-ах
|
