На прошлом уроке, мы рассмотрели основы основ, узнали, что сайт состоит из блоков, а блок это соответствующий тэг, которму мы задаем конкретные стили.
Но есть определенные правила, которые следует соблюдать
Из чего состоит страница сайта
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Title of the document </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body> Content of the document...... </body>
</html>
Каждая страница состоит из выше указаной структуры
!DOCTYPE html — не обязателен, все будет работать и без этого, но желателен для браузера, чтобы он понимал, какой язык разметки используется.
Дальше открывается тэг html , в котором и должно быть все содержимое страницы
Первым и обязательным тегом является head, в который мы пишем заголовок страницы, указываем кодировку, подключаем стили
Все стили пишутся в отдельном файле
Тэг head закрывается и открывается body, тэг, в котором и хранится визуальная часть сайта
Создаем структуру сайта
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Title of the document </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo">
<img src="img/image.png" alt="image-name">
</div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contacts</a></li>
</ul>
</nav>
</header>
<section>
<h3>Hello world</h3>
<p>Some text</p>
</section>
<footer>
<p>© 2018 All Rights Reserved</p>
</footer>
</body>
</html>
Что мы добавили:
- Мы добавили шапку тегом header (не путайте с head), в шапке у нас будет хранится логотип (прописали тегом img) и навигационное меню.
- nav — это блок для списка ссылок
- ul — указываем что сейчас будет начинаться список
- li — строчка из списка
- a — ссылка
- Дальше мы содали секцию (section), в которой у нас будет заголовок и текст
- И в конце у нас будет в подвал (footer), в которой обычно храниться краткая информация о сайте
Мы добавили тэгу div некий класс logo. Дело в том, что сайт может содержать очень много тегов div, и когда мы будем писать стили, как нам указать, к какому div’у прописать стили. Для этого и указываются стили. Название класса может быть любое. Придумываете вы сами.
Если сейчас весь этот код поместить в jsfiddle и запустить, вы увидете не сгруппированный текст, который мало чем похож на сайт. Для этого и нужны стили
Попробуем немного украсить наш сайт:
body{
margin: 0;
padding: 0;
max-width:700px;
margin:0 auto;
}
header{
border-bottom: 1px solid #ccc;
overflow: hidden;
margin-bottom: 20px;
}
header .logo{
float:left;
}
header nav{
float: right;
}
header nav li{
display: inline-block;
padding-right: 10px;;
}
section h3{
font-size: 35px;
}
section p {
font-size: 20px;
}
footer{
padding:30px 10px;
background-color: #efefef;
}
Не стоит пугаться, стилей кажется что много, но они очень простые и по сути интуитивно понятны, давайте разбирать
Для начало мы указали тэгу body, никаких отступов, максимальная ширина 700 px и выровнить по центру. Все это мы проходили на прошлом уроке.
Шапке мы указали следующее:
- border-bottom: 1px solid #ccc — Линия снизу шириной в 1 px, сплошная, цвет #ccc
- overflow: hidden — все что в этом блоке, остается в этом блоке, все что хочет вылезти за его границы, будет удалено.
- margin-bottom: 20px; — Внешний отступ снизу 20 px
Цвета могут задаваться следующим образом: #ccc или тот же цвет rgb(204, 204, 204)
В каждом браузере есть консоль, в который вы можете просмотреть из чего состоит страница, ее стили, файлы, картинки и прочее. На windows, это кнопка f-12, чтобы выделить какой то определенный блок на сайте, жмите Ctrl + Shift + C. Можете кликнуть в любое место на сайте и вам сразу отобразятся стили и структура.
Это очень полезная фишка, которой вы будете пользоваться постоянно. К примеру вы можете поменять в консоле стиль и он тут же сработает и отобразиться на экране. К примеру вы подбираете цвет, опять же это можно сделать с консоли.
Идем дальше:
header .logo — Это значит, что внутри тэга header тег с классом logo
Тэгу div с классом logo присваеваем float:left;. Это значит что блок будет прижиматься к левому краю, а все рядом стоящие блоки будут его как бы обтекать
Навигационной меню мы задаем float:right; чтобы он прижался к правому краю
Переходим к нашему списку header nav li. Мы указываем что, у каждого элемента из списка, будет отступ справа в 10 px. А также задаем display: inline-block
На данный момент, мы разберем 2 варианта:
- display: block — блочный элемент, который растягивается на всю ширину, все последующие блоки, будут идти после него снизу
- display: inline-block — Блок растягивается ровно на столько, на сколько широкие у него внутренности, все последующие inline блоки, будут выстраиваться рядом справа.
Последнее что осталось разобрать из того что вы не знали, это background-color. Но как понятно из называние стиля, это цвет заднего фона.
Если сейчас скопировать весь html и css и вставить в jsfiddle, то вы увидите уже что то похожее на сраничку
В следующем уроке, мы пропробуем добавить некоторую анимацию на сайт с помощью стилей