HTML5 CSS3: Шапка и футер сайта (Урок 2)

Создадим шапку и футер сайта, а также пропишем основные стили для всего документа.

Основные стили

Начнём с общих стилей для всего документа. Символ * означает, что стили применяются ко всем элементам. Это работает для тегов, классов и ID.

* {
  margin: 0;
  padding: 0;
}

margin: 0; и padding: 0; устанавливают нулевые отступы. Некоторые браузеры по умолчанию задают отступы, а нам это не нужно. Мы будем задавать отступы вручную для конкретных блоков.

body {
  height: 100%;
  background: #fff;
  min-height: 50px;
  font-size: 1em;
  color: #f7f7f7;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  line-height: 135%;
}

Здесь задаются стили для тега <body>:

  • height: 100%; — высота на весь экран.
  • background: #fff; — белый фон.
  • min-height: 50px; — минимальная высота 50 пикселей (для футера будет 10 пикселей). Это предотвращает вылезание элементов за пределы шапки или футера, если их содержимое больше заданной высоты.
  • font-size: 1em; — размер шрифта (адаптивный).
  • color: #f7f7f7; — цвет текста (светло-серый).
  • font-family: ‘Comic Sans MS’, cursive, sans-serif; — шрифт. Если ‘Comic Sans MS’ отсутствует, браузер выберет похожий.
  • line-height: 135%; — высота строки.

Стили для ссылок и выделенного текста

a {
  color: #c0392b;
  text-decoration: none;
  transition: color 0.6s;
  -moz-transition: color 0.6s; /* Firefox */
  -webkit-transition: color 0.6s; /* Safari, Chrome */
  -o-transition: color 0.6s; /* Opera */
  -ms-transition: color 0.6s; /* IE 10+ */
}

a:hover {
  color: #2980b9;
  transition: color 0.6s;
  -moz-transition: color 0.6s; /* Firefox */
  -webkit-transition: color 0.6s; /* Safari, Chrome */
  -o-transition: color 0.6s; /* Opera */
  -ms-transition: color 0.6s; /* IE 10+ */
}

a:active {
  color: #27ae60;
}

::selection {
  background: #c0392b;
  color: #fff;
  -moz-background: #c0392b; /* Firefox */
  -webkit-background: #c0392b; /* Safari, Chrome */
  -o-background: #c0392b; /* Opera */
  -ms-background: #c0392b; /* IE 10+ */
}

Стили для ссылок:

  • color: #c0392b; — цвет ссылок.
  • text-decoration: none; — убирает подчеркивание.
  • transition: color 0.6s; — плавное изменение цвета при наведении. Включены префиксы для разных браузеров.
  • a:hover { … } — стили при наведении курсора.
  • a:active { … } — стили при нажатии.

Стили для выделенного текста:

  • background: #c0392b; — цвет фона выделения.
  • color: #fff; — цвет текста выделения. Включены префиксы для разных браузеров.

Стили для изображений и форм

img {
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic; /* IE */
}

.field {
  border-radius: 20px;
  padding: 10px;
  width: 100%;
  border: 0;
  outline: none;
}

.field:focus {
  border: 2px solid #c0392b;
}

*, *:before, *:after {
  outline: none;
}

Стили для изображений:

  • max-width: 100%; — максимальная ширина 100% (изображение не будет выходить за границы контейнера).
  • height: auto; — высота вычисляется автоматически, сохраняя пропорции.
  • -ms-interpolation-mode: bicubic; — улучшает качество сжатия в Internet Explorer.

Стили для поля поиска:

  • border-radius: 20px; — скругленные углы.
  • padding: 10px; — внутренние отступы.
  • width: 100%; — ширина 100%.
  • border: 0; — отсутствие границы.
  • outline: none; — отсутствие обводки при фокусе.
  • .field:focus { … } — стили при фокусе.

Убираем обводку по умолчанию для всех элементов.

Шапка сайта

Пример HTML кода шапки:

<header>
  <a href="index.html" id="logo">Тест сайт</a>
  <span id="contact">Контакты</span>
  <form>
    <input type="text" class="field" placeholder="Поиск">
  </form>
</header>
#logo {
  font-size: 1.3em;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  padding: 10px;
  width: 98%;
  margin: 1%;
}

#contact {
  font-size: 1.5em;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  padding: 10px;
}

.auth {
    float:right;
}

Футер сайта

Пример HTML кода футера:

<footer>
  <span class="left">© 2015 Все права защищены</span>
  <span class="social">
    <img src="img/vk.png" alt="ВКонтакте" title="ВКонтакте">
  </span>
</footer>
.left{
    float:left;
}

.social {
    float:right;
    padding: 10px;
}

Мы создали базовую структуру сайта с шапкой и футером, добавили стили для ссылок, выделенного текста и изображений. Вы можете продолжить работу над дизайном, добавив больше элементов и стилей.

Что будем искать? Например,программа