Создадим шапку и футер сайта, а также пропишем основные стили для всего документа.
Основные стили
Начнём с общих стилей для всего документа. Символ * означает, что стили применяются ко всем элементам. Это работает для тегов, классов и 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;
}
Мы создали базовую структуру сайта с шапкой и футером, добавили стили для ссылок, выделенного текста и изображений. Вы можете продолжить работу над дизайном, добавив больше элементов и стилей.