Итак, css верстка сайта помогает нам создавать страницу сайта. Двигаемся дальше. Если вы помните, то внешний контейнер это тот ящик, в который мы планируем поместить остальные контейнеры. Для него нужно задать такие стили css, с такими свойствами, чтобы эти контейнеры нормально в нем разместились, и сам внешний контейнер всегда находился в центре экрана компьютера. Приступим:
Писать в нем мы ничего не будем, фон вставлять не будем, текстовые абзацы нас не интересуют, так что заходим в раздел Рамка (Box) и задаем такие параметры:
Ширину задаем с запасом в 10 пикселей для разных хитрых браузеров, заданные поля заставят страницу всегда находится в центре окна браузера. Жмем ОК. В панели стилей у нас появилась таблица стилей и стилевой класс:
Удалить стиль очень легко. Достаточно щелкнуть правой клавишей мышки на его названии в панели стилей и из выпадающего меню выбрать Удалить (Delete). Если выбрать Редактировать (Edit) – попадете в окошко определения правил, где можно изменить стиль. Кстати удалить контейнер тоже не трудно. Щелкните левой клавишей мышки на контуре контейнера, выделяя его, и нажмите клавишу Del.
Итак, стиль css создан. Привязываем его к контейнеру. Проще всего это сделать так. Активируем контейнер. Внизу страницы на значке <div>:
щелкаем правой клавишей мышки, в открывшемся окошке наводим курсор на третий сверху пункт и в выпадающем меню (справа) выбираем нужный стиль. Все. В принципе, в таких действиях и заключается css верстка сайта. Изменений вы пока не увидите. Дальше — интереснее. Создадим cтили css, вернее стилевой класс для шапки. Правильней, наверное, называть ее хедер от английского header. Ну да сути дела это не меняет.
А наша css верстка сайта продолжается, и мы переходим к странице Стилевой класс CSS для шапки (хедера)
PS — к комментарию Катерины. Как задать параметры для центровки внешнего контейнера показано на первом рисунке. А вот что очень не помешало бы добавить в таблицу стилей, в самом начале, чтобы верстка сайта была более легкой, так это , вот такой код:
* {
border: 0;
margin: 0;
padding: 0;
}
Это код задает так называемые — глобальные правила. Все браузеры понимают этот код как — «для всего документа». В данном случае задаются параметры отступов, полей и рамок с нулевым значением для всего сайта. Для чего? Этим мы отбираем у браузеров право самим рассчитывать отступы, рамки и поля, потому как делают они это каждый по своим алгоритмам, где надо и где не надо. Так вот где надо и сколько надо – мы сами зададим в таблице стилей. А где не задано – будет ноль. Если так сделать – css верстка сайта будет намного проще.
В статье не хватает описания того, как настроить DIV, чтобы страница в браузере располагалась посередине ... Пришлось зайти на другие ресурсы интернета)) Интересный сайт))
* {
border: 0;
margin: 0;
padding: 0;
}
Это надо вставить в сам Код сайта. Тогда подскажите в какое место?
Не в код сайта, а в таблицу стилей, в начало
* Звёздочку надо?
«в открывшемся окошке наводим курсор на третий сверху пункт» У меня другая версия и там другая строчка поэтому Надо Выбрать Стили CSS.