Итак, в прошлой статье мы остановились на изучении CSS стилей:
HTML/CSS Часть 6
В прошлой статье мы начали вёрстку сайта. В этой статье продолжим верстать. Итак, мы остановились на том что сделали разметку header. Теперь поработаем над дизайном header. В файле style.css который мы создали в прошлой статье напишем стиль для класса header такой:
Пишем .header и ставим галочки: .header {}
Посередине галочек наводим курсор мыши и жмём ENTER.
Между галочек пишем background-color: darkslateblue;
Под background-color: darkslateblue; пишем height: 177px;
Далее ниже пишем размер шрифта: font-size: 0.8em;
Далее пишем отступ слева: margin-left: 0px;
И отступ справа: margin-right: 0px;
Теперь зададим новое свойство написав: min-width: 900px;
Теперь все сохраним комбинацией Ctrl+S.
Итак, что мы написали?
Свойство background-color задаёт цвет фона.
Свойство height: 177px; это высота 177 пикселей.
Свойство font-size: 0.8em; это размер шрифта.
Свойства margin-left: 0px; и margin-right: 0px; это отступы слева и справа в пикселях.
Cвойство min-width устанавливает минимальную ширину элемента.
Теперь зададим стили сразу к нескольким классам что бы везде не дублировать одни и те же свойства. Что бы задать один стиль сразу к нескольким классам надо написать отступив вниз под скобкой:
.main, .logo, .menubar, .site_content, .footer{}
Посередине скобок после footer наводим курсор мыши и жмём ENTER. Получается такая запись:
Далее в скобках пишем первое свойство: margin-left: auto;
Под ним пишем второе свойство: margin-right: auto;
Эти записи означают что мы хотим что бы отступ слева и отступ справа были автоматически рассчитаны браузером. Следующий стиль зададим для logo. Делаем отступ под нижней скобкой и пишем:
.logo {
width: 800px;
padding-bottom: 40px;
}
Итак, что написали:
width это ширина для класса logo.
Свойство padding-bottom это внутренний отступ снизу от элемента.
Теперь обратим внимание на эту картинку:
С левой стороны мы видим что margin это внешний отступ а с правой стороны что padding это внутренний отступ. Для того что бы задать отступы для margin и padding можно использовать два разных синтиксиса. Либо как на картинке мы можем писать margin-top: 3px; margin-right: 4px; и так далее.
Либо писать аналогичную запись:
margin: 3px, 4px, 5px, 6px; и padding: 3px, 4px, 5px, 6px;
А теперь сохраним запись и посмотрим в браузере на результат. Но перед этим перейдём в FOLDERS - index.html
Уберём / перед assets что бы путь шёл с index.html сразу в assets.
Что бы получилась вот такая запись:
<link rel="stylesheet" href="assets/css/style.css">
И открыв в браузере наш файл index.html в ранее созданной папке LinuxUSER видим это: