Учимся делать веб-сайты с нуля до трудоустройства. Сегодня учимся верстать дизайн сайта.
Что такое верстка? Это, по большому счету, превращение картинки дизайна или дизайна из конструктора в код.
Что было на прошлом уроке?
На прошлом уроке мы создали красивый дизайн нашего сайта в специальном конструкторе.
Что будет на этом уроке?
На этом уроке мы этот дизайн превратим в качественную верстку - превратим в качественный код.
Мы сегодня также изучим новую технологию: Sass.
И познакомимся с новым сервисом иконок: Fontello.
Если в процессе изучения что-то не понятно - не стесняйтесь спрашивать нас и других учеников в нашей открытой группе в телеграм:
Для тех, кто только к нам присоединился, ссылка на все уроки:
И ссылка на самый первый урок:
Почему наши курсы текстом, а не видео?
Хочу объяснить. Видео смотреть долго, постоянно надо ставить на паузу, код скопировать не реально. Поэтому мы учим в текстовом формате.
Переходим на VsCode
Еще одна новая вводная по отношению к остальным урокам. Так как компания JetBrains отказалась предоставлять PhpStorm и другие свои продукты на территории России, мы утрем сопли и продолжим работать с бесплатным VsCode от компании Microsoft. В самом начале курса мы его устанавливали и пробовали.
Автор этого урока все занятие проработал в VsCode и ему даже понравилось.
Итак, запускаем Visual Studio Code.
Качаем проект для верстки с GitHub
GitHub - это сервис, где разработчики хранят свой код. Над этим кодом можно работать совместно. Про git, GitHub и системы контроля версий мы позднее поговорим очень подробно.
А сейчас я для вас туда выложил проект, который мы будем верстать. Скачайте и откройте его у себя в VsCode.
https://github.com/madmaker/madmaker-srmt22-lsn8-result/archive/refs/tags/v1.zip
После того, как скачали, распакуйте архив, потом в VsCode нажимаете File->Open Folder
Выбираете папку со скачанным проектом и нажимаете "Открыть"
VsCode может спросить доверяете ли вы авторам файлов в этом проекте - жмите Yes.
Откроется проект. Сразу можете открыть файл index.html, чтобы посмотреть его.
Можете посмотреть. Генератор кода из Nicepage сделал нам работающий код, но он подходит разве что для демонстрации, но не для работы. В коде откровенно говоря помойка. Даже разбираться с ней смысла нет.
Далее открываем файл index.html в Chrome. Это нужно сделать не из vsCode, а из проводника (Finder на Mac)
Откроется такая страница:
В этом занятии мы будем верстать одно и то же. После того, как сверстаем эту страницу, можете сверстать свой сайт, который делали на предыдущих занятиях.
Создайте на диске новую пустую папку srmt22-lsn9 и откройте ее в vsCode (File->Open Folder)
Верстка сайта
Создадим новый файл index.html
Он сразу откроется
Сразу заполним базовую информацию (можете скопировать это себе как шаблон для дальнейшего использования)
<!DOCTYPE html>
<html lang="ru"></html>
<head>
<title>Sarmatia 22</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Еще раз напомню, что это все означает:
<!DOCTYPE html>
обязательный тег. В нем мы обозначаем тип нашего документа. Это HTML стандарта html5.
<html>
Вся html-страница должна находиться внутри тега <html>. В начале документа он открывается, в самом конце - закрывается.
Приучайтесь сразу закрывать теги, чтобы избежать ошибок в далнейшем.
lang="ru"
Атрибут, задающий язык документа - русский
<head>
Внутри этого тега заголовочная информация документа: это кодировка, это заголовок, ссылки на стили, различные мета-теги, описание, ключевые слова. Все это в head.
<body>
Внутри body находится контент нашего документа. Здесь как раз то, что мы показываем посетителю на его экране.
<title>Sarmatia 22</title>
Заголовок страницы. То, что находится внутри этого тега, будет показано в поисковике при поиске страницы (на яндексе, google), этот текст будет показан в заголовке вкладки или окна в браузере.
<meta charset="utf-8">
Мета-тег, указывающий кодировку документа. В целом, сейчас все делается на UTF-8. Но, я думаю, многие видели такую историю, когда открывается документ, а на экране "иероглифы" или знаки вопроса вместо текста - вот как раз скорее всего причиной является неверная кодировка. Мы сразу обозначим, что у нас UTF-8.
Кому интересно узнать больше про кодировку, ниже ссылка на статью в википедии.
Верстаем шапку
В HTML5 для шапки есть специальный тег: <header> всю шапку в него и обернем.
Пишем <header></header> и внутрь уже будем писать остальной код.
Первым идет основной заголовок. Для него есть тег <h1></h1>. Напомню, что на странице допустим только один заголовок 1-го уровня.
Пишем такой код:
<h1>Sarmatia 22 <br>
Клуб<br> Веб-разработки
<span>Стать веб-разработчиком за 3 месяца</span>
</h1>
Обратите, внимание, что я решил всю заголовочную часть вынести в один заголовок. Но он будет несколько доработан с помощью стиля, чтобы какая-то часть из заголовка была шрифтом чуть меньшим.
Напомню, что <br> - это тег для разрыва строки. То есть текст, после него переносится на новую строку.
<span></span> - это inline (строчный, применяемый внутри строки) тег, который можно использовать для того, чтобы в стилях в дальнейшем тексту, обернутый в этот тег, придать несколько другой стиль - в нашем случае это будет шрифт меньшего размера.
Далее у нас идет скромная панель навигации из двух пунктов: ссылка на страницу "Курс веб-программирования с нуля" и ссылка на наш блог на ZEN: Блог на ZEN.
<nav></nav>
Для панели навигации на странице предусмотрен специальный тег <nav></nav>. Он используется для блока основной навигации. Именно основной. То есть его не нужно использовать для каждого блока ссылок на странице.
У нас в панели навигации список из двух ссылок. Для списков есть специальные теги списков:
<ul></ul> - для маркированных списков (слева точка/маркер)
<ol></ol> - для нумерованных списков (слева цифры, буквы - как в стиле укажете)
Нам подойдет <ul>
Каждый элемент списка оборачивается в тег <li></li>
То есть <li>Курс веб-программирования с нуля</li> и <li>Блог на ZEN</li>.
Итого, наша панель навигации получает такой код:
<nav>
<ul>
<li>Курс веб-программирования с нуля</li>
<li>Блог на ZEN</li>
</ul>
<button>Вступить в клуб бесплатно</button>
</nav>
Он располагается сразу под основным заголовком шапки.
Ниже идет кнопка.
<button>Вступить в клуб бесплатно</button>
Простой тег <button>. Эта кнопка пока ничего не делает - с этим на следующих уроках будем разбираться.
Далее мы, как приличные граждани, уважающие авторское право, размещаем отсыл к картинке, которая будет фоном в шапке, которую мы взяли с сервиса бесплатных изображений freepik.
Ссылку обернем в блочный тег <div></div>
<div><a class="freepick-link" href="https://www.freepik.com/free-photo/professional-programmer-working-late-dark-office_5698342.htm#query=programmer&position=3&from_view=search" target="_blank">Image by pressfoto on Freepik</a></div>
Напомню: <div> - это универсальный блочный тег. Почти как <span> только span - внутри строк, а <div> - это целые блоки.
<a></a> - тег ссылки.
class="freepick-link" - указывает имя класса этой ссылки (мы сами придумали имя, и в CSS дальше как раз по этому классу будем применять стиль к этой ссылке)
href="https://www.freepik.com/free-photo/professional-programmer-working-late-dark-office_5698342.htm#query=programmer&position=3&from_view=search" - внутри атрибута href в кавычках указывается адрес страницы, которая откроется, если нажать на ссылку
target="_blank" - этот атрибут означает, что при клике на ссылку, страница откроется в новом окне/вкладке, а текущая страница останется открытой. В целом принято так делать, если ссылка ведет на внешний ресурс, чтобы посетитель случайно не покинул ваш сайт.
В результате получаем вот такой код:
<!DOCTYPE html>
<html lang="ru"></html>
<head>
<title>Sarmatia 22</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Sarmatia 22 <br>
Клуб<br> Веб-разработки
<span>Стать веб-разработчиком за 3 месяца</span>
</h1>
<nav>
<ul>
<li>Курс веб-программирования с нуля</li>
<li>Блог на ZEN</li>
</ul>
<button>Вступить в клуб бесплатно</button>
</nav>
<div><a class="freepick-link" href="https://www.freepik.com/free-photo/professional-programmer-working-late-dark-office_5698342.htm#query=programmer&position=3&from_view=search" target="_blank">Image by pressfoto on Freepik</a></div>
</header>
</body>
</html>
В проводнике (Finder на Mac) откройте ваш index.html в Chrome и посмотрите, что получилось.
Ожидаемо. Ведь ни стилей, ни фона мы не применили. Что ж, давайте это исправим.
Создайте папку css и в ней создайте файл general.css.
Потом создайте папку img - в нее будем загружать изображения.
Теперь нам нужно файл фона для шапки разместить в папке img.
Вы качали проект дизайна по ссылке выше. У вас в загрузках есть папка madmaker-srmt22-lsn9-design - в ней папка images. Там файл professional-programmer-working-late-dark-office-2.jpg . Этот файл нужно скопировать в папку img в vscode (просто перетащите мышью)
Теперь открываем файл general.css и пишем код в него.
Буду рассказывать по кусочкам.
Весь результат кода general.css здесь (для тех, кто захочет сверится):
Весь код index.html здесь:
Первым делом давайте для html и body уберем все отступы (в разных браузерах могут быть разные отступы по умолчанию - нам они не нужны, чтобы не было сюрпризов)
html, body {
margin: 0;
padding: 0;
}
Напомню: padding - это внутренний отступ (от границы блока до его содержимого), madgin - внешний (от границы блока до соседних блоков)
Теперь для всего документа внутри html,body давайте зададим размер шрифта по умолчанию:
font-size: 18px;
Получилось так:
html, body {
margin: 0;
padding: 0;
font-size: 18px;
}
Теперь давайте разберемся с самим блоком header.
Добавим такой код:
header {
background-color: black;
background-image: url("../img/professional-programmer-working-late-dark-office-2.jpg");
background-size: cover;
background-attachment: fixed;
color: white;
padding: 6em 1em;
text-align: center;
}
background-color
Черный цвет фона (на случай, если изображение не загрузится)
background-image: url("../img/professional-programmer-working-late-dark-office-2.jpg");
background-image определяет изображение фона блока. само изображение задается в url("") в кавычках.
Мы указываем "относительный путь" к файлу изображения. То есть наш general.css находится в папке css. Поэтому нам надо из него "подняться на уровень выше" - пишем ../ дальше отсюда уже видна папка img/ и в ней файл professional-programmer-working-late-dark-office-2.jpg.
Получился такой путь к файлу: ./img/professional-programmer-working-late-dark-office-2.jpg
background-size: cover;
Так мы задаем, чтобы фон блока растягивался пропорционально (чтобы картинка не искажалась) на всю длину/ширину блока и там, где лишнее - обрезалось. Если этого не указать, то картинка на фоне будет отображена в 100% размере и либо будет видна только ее часть на маленьком экране, либо, наоборот, ее не хватит на весь размер блока на большом экране.
background-attachment: fixed;
Этим параметром мы указываем, чтобы фон блока фиксировался. То есть когда мы будем прокручивать страницу, фон блока останется на месте, а текст будет скользить поверх фона. Довольно интересный эффект. Здесь вы сами решаете: использовать его или нет.
color: white;
Цвет текста в шапке белый.
padding: 6em 1em;
Внутренний отступ в шапке. Здесь мы использовали новые для нас единицы: em. На самом деле с ними все просто. Выше мы задали размер шрифта в 18px для всего документа. Так вот em - это относительная единица от этого размера шрифта, от 18px. То есть 6em - это 6 раз по 18px, 1em - 18px.
Напомню, что отступы задаются 3-мя разными вариантами
- padding: 6em 1em; - 6em сверху/снизу, 1em справа/слева
- padding: 6em 1em 6em 1em; - 6em сверху, 1em справа, 6em снизу, 1em слева - по часовой стрелке начиная с верху.
- padding: 6em; - 6em со всех сторон.
text-align: center;
Положение текста в блоке по центру. left -слева, right - справа.
Стиль частично описали.
Теперь нужно наш стиль добавить на страницу.
Для этого в index.html внутри тега <head></head> в любое место добавляем следующий код:
<link rel="stylesheet" href="css/general.css">
<link> используется, когда нужно указать ссылки на какие-то файлы.
rel="stylesheet"
Этим атрибутом указываем тип ссылки: стиль.
href - собственно, путь к самому файлу.
Ура! Фон появился, текст белый.
Шрифт не тот, размеры текста в заголовке не те, кнопка вообще кошмар, ссылка на freepik синяя.
Что ж, давайте продолжать.
Начнем с заголовка.
В самый низ general.css добавляем следующий код:
header h1 {
font-weight: normal;
font-size: 4em;
margin-top: 0;
}
header span {
font-weight: normal;
display: block;
font-size: 0.4em;
}
Я уж не буду каждую строчку расшифровывать. Мы на предыдущих занятиях все это разбирали, оно в целом и так понятно.
На всякий случай, вот документация по CSS - там можно подглядеть.
https://www.w3schools.com/cssref/default.asp
Для всего h1 в шапке:
font-weight: normal; - задали "жирность" шрифта, как нормальную. По умолчанию было bold (жирный) - нам это не нужно.
Задали размер в 4em, убрали полностью внешний отступ сверху.
Для <span> внутри h1:
Также сделали не жирным, сделали размер шрифта маленький.
И display:block означает как отображать этот элемент. Там много значений. Расскажу пока как было и как стало. Было inline - элемент отображался внутри той же строки, где и был. Мы сделали block - теперь он отображается, как блок. На новой строке - отдельно от остального текста.
Переходим к кнопке
В конец general.css пишем следующий код:
button {
background: #db545a;
border: #db545a solid 1px;
padding: 1em;
color: white;
text-transform: uppercase;
margin: 2em 1em;
font-weight: bold;
transition: all ease-in 0.3s;
}
Задали цвет фона, задали цвет, стиль и ширину рамки, задали внутренний отступ, цвет текста, внешний отступ, сделали текст жирным.
text-transform: uppercase;
Этим параметром мы задаем трансформацию текста в кнопке. Uppercase - все буквы будут заглавными.
О transition немного позже. Просто оставьте.
Проверяем. Кнопка стала выглядеть, как надо.
Применяем эффекты к кнопке
На компьютере на кнопку можно навести мышью, нажать, на планшете и телефоне также можно на нее пальцем нажать - было бы хорошо, если б кнопка реагировала внешне на подобные действия.
Сделаем, чтобы она немного меняла цвет фона и рамки.
В самый низ general.css пишем:
button:hover,
button:focus,
button:active {
background: #d21e27;
border-color: #d21e27;
}
Смотрите: мы через двоеточие справа от имени тега button пишем ее состояние, к которому будет примерен стиль:
hover - при наведении
focus - кнопка в фокусе
active - кнопка активна.
На компьютере, пожалуй, только hover можно увидеть без заморочек. А на остальных устройствах будет и focus, и active. Поэтому описываем для всех ситуаций.
Теперь вернемся к transition, который был применен к button:
transition: all ease-in 0.3s;
Этим параметром мы задаем, как будет меняться стиль кнопки. То есть при наведении у нас поменяется фон и рамка. А в transition мы укажем, что все (all) стили кнопки меняются с эффектом ease-in (плавный переход) плавно на протяжении 0.3s (0.3 секунды).
Посмотрите на результат в браузере.
Комментарии в коде
В коде часто нужно оставлять комментарии для себя или для других разработчиков.
В html коментарии выглядят так:
<!-- мой комментарий -->
То есть они берутся в <!-- -->
В css комментарий берется в /* */
То есть
/* мой комментарий */
Кстати, в php, c++ и большинстве других языков комментарии оборачиваются также в /* */.
Часто комментарии используются, чтобы временно "отключить" какую-то часть кода, но не удалять ее насовсем.
Давайте попробуем в нашем general.css в комментарий взять transition: all ease-in 0.3s;.
То есть слева и справа дописать /**/. Получится так: /*transition: all ease-in 0.3s;*/
Этот код сейчас работать не будет.
Проверьте в браузере - при наведении на кнопку она мгновенно поменяет цвет.
Ок. С комментариями разобрались. Давайте вернем как было.
Кстати, почти во всех IDE (phpstorm, vscode и прочие) если кусок кода выделить мышью и нажать CTRL+/ (CMD+/ на Mac) на клавиатуре, то код будет взят в комментарий.
Меню в шапке
Теперь давайте разберемся с меню
Вставляем этот код в конец general.css и разбираемся, что он значит.
header nav ul {
font-size: 1.2em;
display: table;
list-style: none;
margin: 0 auto;
}
header nav ul li {
float: left;
}
header nav ul li::after {
content: "|";
padding: 0 0.3em;
}
header nav ul li:last-child::after {
content: "";
}
header nav ul
Это селектор тега ul - списка. Стиль отработает для ul, который находится внутри nav, который, в свою очередь, находится внутри header. Если в коде также будут ul в header, но не в nav, то для них этот стиль работать не будет. И также и для nav - только для тех, которые в header. Это очень удобно. Мы можем указывать последовательность тегов, чтобы обозначить для каких применять данный стиль.
Мы задали размер шрифта. Задали, что список меню должен на странице отображаться по принципу таблицы (мы уже знаем варианты
display:table
display:block, display:inline, теперь display:table). Table от Block отличается тем, что у block границы будут на всю ширину родительского элемента, если не задать ширину явно а у table границы закончатся сразу за контентом, то есть за пунктами меню. Для нас это и нужно, так как мы хотим, чтобы наш список можно было автоматически расположить по центру. Позже более наглядно покажу. Если не понятно - не забивайте голову.
list-style: none;
Мы обозначили, что маркеры у этого списка должны отсутствовать (по умолчанию слева у каждого элемента списка были точки-маркеры)
margin: 0 auto;
Мы задали, что внешний отступ сверху/снизу должен отсутствовать, а отступ справа-слева должен быть автоматическим.
И как раз если бы у нас был display:block (он по умолчанию для тега ul), то это бы не сработало и список был бы прижат к левой стороне шапки, а так как у нас display:table, браузер сможет слева и справа сделать автоматически отступы, чтобы список был ровно по центру.
Посмотрите на скрине ниже:
display:block
display:table
header nav ul li
Селектор работает уже по понятной нам схеме. То есть стиль внутри него будет применятся ко всем li, которые внутри ul, который внутри nav, который внутри header. Для других работать не будет.
float: left;
Сделали все li в нашем меню "плавающими" по левой стороне. То есть каждый li обтекает следующий элемент слева.
До этого у нас список отображался так: каждый элемент был на новой строке.
А сейчас каждый элемент отображается слева от следующего.
header nav ul li::after
::after создает псевдоэлемент после выбранного селектора. Этот элемент на самом деле в коде отсутствует, но в css мы можем задать стиль и даже контент для псевдоэлемента, который будет "виртуально" добавлен в код после выбранного элемента li.
content: "|";
Мы задаем контент в виде вертикальной черты. То есть после каждого элемента списка у нас будет вертикальная черта в качестве разделителя.
padding: 0 0.3em;
А чтобы разделитель не прилипал к элементам меню, мы зададим ему внутренний отступ слева-справа по 0.3em
Кстати, помимо after бывает еще before. Работает точно также, только псевдоэлемент будет добавлен перед выбранным элементом.
header nav ul li:last-child::after
Этот селектор еще интересней. :last-child обозначает, что этот селектор должен применяться к самому последнему li, подходящему под это описание. То есть это должен быть самый последний li внутри ul внутри nav внутри header. И для этого li мы описываем стиль для его псевдоэлемента ::after.
А стиль простой: вертикальной черты быть не должно. То есть по сути мы сделали так: для всех пунктов меню справа есть вертикальная черта. Кроме последнего - у последнего content: "";
Консоль браузера
Все это очень сложно, если невозможно поиграться, потыкать и посмотреть на результаты на месте. Вообще когда верстаете, все отступы, размеры шрифта, цвета очень сложно писать сразу в коде. Как правило потом в браузере приходится видеть удивительные результаты. Чтобы можно было посмотреть сразу на месте, есть консоль браузера.
В Chrome это называется "Инструменты разработчика"
Если их открыть, справа появится панель с кодом и стилями вашего документа. Также можно нажать на кнопку выбора элемента, выбрать его и посмотреть его код и css. Давайте это и сделаем.
Нажмите на кнопку и выберите на экране элемент меню.
Справа появится стиль этого элемента. Вы можете его там менять, включать или отключать (ставить/снимать галочку), добавлять новый стиль. Когда результат вас устроит - просто копируете и вставляете себе в код в проект.
По коду html справа также можно нажимать на элементы и работать с ними.
Попробуйте для li отключить и назад включить float:left - посмотрите, что получится.
Ссылка на freepic в шапке
У нас остался один элемент, для которого нужно доделать стиль.
Добавьте этот код в конец general.css
a.freepick-link {
color: white;
font-size: 0.7em;
text-decoration: none;
}
a.freepick-link
Сам селектор. У нас в коде к тегу <a> применен класс "freepick-link". В css к селекторам класса обращаются через точку. Читается это так: элементы a с классом freepick-link.
Сделали белый цвет текста, задали супер-мелкий шрифт.
text-decoration: none;
Сделали, чтобы подчеркивания у ссылки не было.
Упустили один момент: если на ссылку нажать, то для браузера она станет не просто ссылкой, а посещенной ссылкой, а если на некоторых телефонах тыкнуть пальцем, то она станет ссылкой в фокусе. Поэтому нужно селектор дополнить.
a.freepick-link { замените на
a.freepick-link,
a.freepick-link:visited,
a.freepick-link:focus,
a.freepick-link:hover {
Еще раз: visited - посещенная, focus - в фокусе, hover - при наведении мыши.
Результат такой:
a.freepick-link,
a.freepick-link:visited,
a.freepick-link:focus,
a.freepick-link:hover {
color: white;
font-size: 0.7em;
text-decoration: none;
}
Устанавливаем DINPro в качестве шрифта на сайт
В целом шапка готова. Меня только смущает этот убогий шрифт. Давайте поставим DIN pro.
Скачать шрифт для web можно на сайте webfonts.
Вот ссылка на сам DIN PRO:
Качаете архив со шрифтом к себе на компьютер. Распаковываете.
В vscode создаете папку fonts и туда копируете всю папку DINPro.
Обратите внимание, в vscode можно ошибиться и создать папку fonts не на самом верхнем уровне, а внутри img или css. Чтобы создать на самом верхнем уровне рядом с index.html, нужно на index.html кликнуть, а потом нажимать кнопку "создать папку"
Структура у вас должна получиться примерно такая:
То есть корень проекта, в нем папка fonts, в ней DINPro, а там файлы шрифта.
Осталось пара вещей: подключить шрифт и применить этот шрифт к body.
Чтобы подключить шрифт, мы можем его файл стилей импортировать прям в наш general.css.
В самый верх добавьте такой код:
@import url(../fonts/DINPro/stylesheet.css);
@import позволяет нам подключать другие файлы стилей к нашему стилю. В url нужно только указать путь к файлу стилей.
Еще раз про относительный путь. Мы находимся в general.css. Чтобы от него добраться до stylesheet.css от шрифта DINPro нужно:
- ../ подняться наверх
- Зайти в папку fonts/
- Зайти в папку DINPro/
- Открыть файл stylesheet.css
Отсюда такой путь. Две точки и косая черта, чтобы подняться на уровень вверх.
А теперь осталось только в body задать шрифт.
В самый низ селектора body в css допишите:
font-family: "DIN Pro", sans-serif;
Мы на предыдущих уроках уже рассматривали работу со шрифтами. Вкратце напомню: мы задаем в кавычках наш "нестандартный" шрифт, а через запятую дальше указываем запасной вариант - стандартный шрифт без засечек.
Верхняя часть general.css получится такая в итоге:
@import url(../fonts/DINPro/stylesheet.css);
html, body {
margin: 0;
padding: 0;
font-size: 18px;
font-family: "DIN Pro", sans-serif;
}
А сама шапка будет выглядеть вот так:
Если что-то не понятно или не получается - спрашивайте в комментах к статье или сразу пишите в публичный канал нашего клуба:
Используем SASS
Вкратце: SASS облегчит нам работу с CSS. Полотно кода можно будет сильно упростить и для написания, и для чтения. А в CSS для браузера уже автоматически будет создан самим SASS.
А вот что говорит официальная документация:
Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS, например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.
Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.
Ссылка на официальный сайт:
Установка SASS
Для использования нужно будет установить SASS себе на компьютер.
Я написал 2 поэтапные инструкции по установке для MAC OS и Windows.
Также есть страница с информацией по установке с официального сайта.
Возможно в процессе установки будут проблемы - если самостоятельно побороть не получится - пишите в наш телеграм-канал. Поможем.
Переделываем наш CSS в SASS
Создаем папку scss в корне проекта (корень проекта - это на самом верху. Где файл index.html, папка css, папка img, fonts).
В этой папке мы будем хранить наши scss файлы (их SASS будет преобразовывать в обычный css)
Внутри папки scss создаем файл general.scss.
Теперь мы переработаем наш css в scss.
Копируем все содержимое из general.css в general.scss
Переменные в SASS
Начнем с цвета #db545a - он у нас используется сейчас для фона и рамки кнопки. А потом еще в нескольких местах понадобится.
И еще есть второй цвет: для этой же кнопки при наведении.
button {
background: #db545a;
border: #db545a solid 1px;
В программировании есть такое правило: дублировать код - плохо. Вот мы и не будем. Мы цвет заменим переменной.
В самом верху нашего файла general.scss дописываем следующий код:
$primary-color: #db545a;
$primary-color-focus: #d21e27;
Теперь рассказываю, что он означает:
Мы придумали переменную primary-color для основного цвета. Переменные в scss начинаются со знака доллара (в php, кстати, также). И задали этой переменной значение - наш цвет.
Тоже самое и с цветом при наведении - вторая переменная, второй цвет.
А теперь везде в документе ищем наш цвет #db545a и заменяем его на $primary-color
Практически в любом текстовом редакторе, в том числе и в phpstorm и в vscode можно нажать CTRL+F (CMD+F на маке) и откроется диалог поиска - туда вписываем значение, которое нужно найти и нажимаем Enter. Это облегчит поиск по нашему CSS.
В двух местах нужно заменить цвет на переменную primary-color и в двух местах тоже самое для primary-color-focus.
В итоге будет так:
button {
background: $primary-color;
border: $primary-color solid 1px;
Отлично. С переменными разобрались.
Вложенные правила
Sass позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам.
Например, как было в CSS:
#main p {
color: #00ff00; width: 97%; } #main p .redbox {
background-color: #ff0000; color: #000000; }
Как будет в SASS:
#main p {
color: #00ff00; width: 97%;
.redbox {
background-color: #ff0000; color: #000000;
}
}
Это помогает избежать повторения родительских селекторов, и делает сложные CSS макеты с большим количеством вложенных селекторов гораздо проще.
Давайте поправим наш css. Избавимся от дублирования родительских селекторов и просто вложим дочерние внутрь родительских.
Начнем с header.
Ниже старый код в general.css
header {
background-color: black;
background-image: url("../img/professional-programmer-working-late-dark-office-2.jpg");
background-size: cover;
background-attachment: fixed;
color: white;
padding: 6em 1em;
text-align: center;
}
header h1 {
font-weight: normal;
font-size: 4em;
margin-top: 0;
}
В general.scss он будет выглядеть так:
header {
background-color: black;
background-image: url("../img/professional-programmer-working-late-dark-office-2.jpg");
background-size: cover;
background-attachment: fixed;
color: white;
padding: 6em 1em;
text-align: center;
h1 {
font-weight: normal;
font-size: 4em;
margin-top: 0;
}
}
То есть мы селектор header h1 вложили внутрь селектора header и от header h1 оставили только h1. Потому что он и так внутри header.
Аналогично нужно сделать и с header span, header nav ul, header nav ul li, header nav ul li::after - в общем все селекторы, у которых header - родитель, нужно положить внутрь header и удалить фразу header из них.
Будет вот такая структура:
header {
...стили header...
h1 {...}
span {...}
nav ul {...}
nav ul li {...}
nav ul li::after {...}
header nav ul li:last-child::after {...}
}
Но мы на этом не остановимся.
Очевидно можно тоже самое повторить и с nav, и с ul. Чтобы избежать "трехэтажных" конструкций типа header nav ul li:last-child::after.
Получится такая структура:
header {
...стили header...
h1 {...}
span {...}
nav {
ul {
...стили ul...
li {...}
li::after {...}
li:last-child::after {...}
}
}
}
Круто, структурированно. Осталось разобраться, как ::after и :last-child::after вложить правильно внутрь li.
На самом деле все просто: вкладываем ::after внутрь li, а перед двумя двоеточиями пишем символ амперсанд (&) - он обозначает отсыл к родительскому элементу. Фактически &::after будет означать li::after.
Итого структура получится у нас такая:
header {
...стили header...
h1 {...}
span {...}
nav {
ul {
...стили ul...
li {
... стили li ...
&::after {...}
&:last-child::after {...}
}
}
}
}
Повторите тоже самое для button - вложите дочерние селекторы button:hover и прочие внутрь button - они будут выглядеть, как &:hover.
В итоге структура button будет следующая:
button {
...стили button...
&:hover,
&:focus,
&:active {...}
}
Разделение SASS на фрагменты
Я думаю, что вы можете представить себе, каких размеров у нас будет файл css, когда мы закончим верстку. Его читаемость будет сомнительной. А для большого проекта вообще это не реально. SASS нам дает возможность разбить файлы на фрагменты и просто подключить их к основному файлу.
Кто-то может сказать, что мы также можем и в css - совершенно верно, но в sass это в итоге станет один css файл для браузера, который браузер быстрее загрузит, а для нас это будет несколько файлов scss, с которыми нам проще работать.
Итак, у нас есть файл general.scss - это наш основной файл.
Давайте выделим 2 фрагмента: стили кнопок (а в дальнейшем и прочих элементов интерфейса) и стили главной страницы.
Для этого создадим два новых файла в папке scss:
_homepage.scss и _ui-elements.scss
Обратите внимание, что имена файлов, в которых хранятся фрагменты, нужно начинать с подчеркивания.
Далее из general.scss перенесем все, что касается button в _ui-elements.scss. А в _homepage.scss все, что касается шапки (header).
А в general.scss в конец вместо удаленного кода напишем 2 строчки импорта наших фрагментов:
@import 'ui-elements';
@import 'homepage';
Таким образом содержимое _ui-elements.scss импортируется в general.css с помощью строки @import 'ui-elements';. Обратите внимание, что подчеркивание не указывается в импорте, как и расширение файла scss.
Итак, у нас получилось 3 файла scss.
general.scss:
_homepage.scss
_ui-elements.scss
Сверьте, чтобы у вас было также.
Компиляция SCSS в CSS
Мы успешно подготовили с вами scss файл. Теперь нужно его превратить в css. По сути SCSS - это для нашего удобства, а браузер понимает только CSS.
Для этого запускаем терминал в vscode (у меня, кстати, один раз не запускался - пришлось vscode перезагрузить)
В терминале вводим команду и жмем Enter:
sass scss/general.scss css/general.css
Суть команды простая: мы говорим sass скомпилировать файл scss/general.scss в файл css/general.css .
В результате sass создаст два файла в папке css: general.css и general.css.map.
Map - это технический файл. Не обращайте на него внимание.
А general.css откройте - посмотрите, что в нем все превратилось в старый добрый css, который у нас и был изначально.
Теперь сравните scss и css. У нас кода не так много, но при этом уже понятно, что дальше в голом css работать будет невозможно, а scss остается понятным, структурированным. Это поможет избежать ошибок в дальнейшем.
Проверьте результат в хроме. Страница не должна никак вообще поменяться от наших последних действий.
Слежение за изменениями в SCSS
Мы разобрались с компиляцией scss в css. Но на каждое изменение кода в консоль лезть не очень удобно. Для этого есть watcher (наблюдатель) - мы можем просто его запустить и sass будет наблюдать за нашими scss файлами и, если мы будем вносить изменения, автоматически компилировать их в css.
В терминале вводим команду:
sass --watch scss:css
В ответ получаем Sass is watching for changes. Press Ctrl-C to stop.
Это означает, что sass начал следить за папкой scss. И если в ней будут менятся файлы, то он автоматически создаст в папке css такие же файлы в формате css. Обратите внимание, что файлы фрагментов (начинающиеся на подчеркивание) не будут появлятся в папке css - sass понимает, что это фрагмент и он в нашем случае используется в general.scss.
Для остановки слежения в терминале нужно нажать CTRL+C
Попробуйте добавить пару пустых строк в general.css - увидите результат: sass это увидит и скомпилирует новые css файлы.
Мы при верстке дальше будем вместо css использовать sass. Разберемся и с другими возможностями. Но, в любом случае, подробнее о возможностях SASS рекомендую почитать в официальной документации на русском языке:
https://sass-scss.ru/documentation/
А теперь вернемся к нашей верстке.
Верстаем первую секцию контента
Расскажу еще о специальных тегах html5.
<main>
В тег <main> вставляют основной контент страницы. Это уникальная часть страницы, которая не повторяется от одной к другой. То есть сама статья, сама суть. Навигацию, шапку, меню, подвал и подобное в этот тег писать не стоит.
<article>
Отдельный независимый блок страницы. Предполагается, что этот блок можно вытащить со страницы и использовать отдельно на другом сайте, на другой странице. И это не должно никак повредить смыслу контента внутри этого блока. Здесь может быть статья, комментарий, публикация. Крайне желательно к нему применять заголовок.
<section>
Неотделимая часть контента страницы. Блок на странице.
<aside>
Второстепенный контент страницы, как правило где-то сбоку или в стороне. Может повторяться на странице. Сюда нужно складывать второстепенный контент, не относящийся к сути страницы: промо-блоки, панели и подобное.
Так вот, контент страницы мы обернем в тег <main>. По аналогии с тем, как шапку мы брали в <header>. А подвал возьмем в <footer>.
Секции контента страницы мы разобьем и каждую вставим в отдельный тег <section>.
А статьи или другие смысловые блоки внутри этих секций мы разобьем на <article>.
Вообще рекомендую отличную статью на хабре по тегам html5:
Итак, под </header> мы добавляем тег <main></main>, а в него вставляем первую секцию контента <section></section>.
Чтобы было легче работать со стилями этой секции и они не спутались с другими секциями, назначим ID для этой секции: study-order (у нас в этой секции показан порядок прохождения обучения - так секцию и назовем).
В итоге будет такой код:
</header>
<main>
<section id="study-order">
</section>
</main>
Я в дизайне пропустил заголовок для блока с порядком обучения. Давайте его добавим сразу.
Сразу первой строкой внутри тега <section> пишем:
<h2>Практическое обучение <br> веб-разработке с нуля и до трудоустройства <br> за 5000 р/месяц.</h2>
Далее сразу добавляем первый этап обучения (в самый конец тега <section id="study-order"> - прямо перед закрывающим </section>:
<article>
<div>...Иконка...</div>
<div>
<h3>ИНДИВИДУАЛЬНОЕ ОБУЧЕНИЕ ВЕБ-ПРОГРАММИРОВАНИЮ</h3>
<p>Проходите уроки, а вам помогает разобраться профессиональный программист.</p>
<p>Весь курс ориентирован исключительно на практику.</p>
<p>Сразу работаете в команде других обучаемых разработчиков с реальным общением и реальным руководителем</p>
<p>Длительность: от 2 месяцев.<br>
Расход: 5 000<br>
<b>Первая неделя на пробу бесплатно!</b></p>
</div>
</article>
Сам код понятен. Ничего сложного. Теперь будем разбираться и дорабатывать этот код.
Давайте настроим сразу базовые стили для контента на главной.
Открываем файл _homepage.scss и в самый конец пишем новый код.
main {
section {
max-width: 1200px;
margin: 0 auto
}
h2 {
font-size: 2em;
font-weight: normal;
text-align: center;
}
}
Для всех секций внутри main задали максимальную ширину (чтобы на больших экранах текст секции не растягивался в одну строку), задали отступы слева и справа автоматическими (таким образом секция будет центрироваться - отображаться по центру, а не сбоку, так как отступ слева и справа будет одинаковый и будет рассчитан автоматически)
Для заголовков h2 внутри main задали размер шрифта, ширину (жирность) и отбивку в середине.
Давайте теперь проработаем секцию study-order и блоки с этапами обучения в ней.
#study-order {
article {
max-width: 900px;
margin: 4em auto;
padding: 2em;
border: solid 1px $secondary-color;
transition: all ease-in 0.3s;
}
}
Для article внутри элемента с ID study-order мы задали максимальную ширину, автоматический внешний отступ слева-справа с целью центрирования, внешний отступ сверху-снизу, задали внутренний отступ, также задали рамку, где вместо цвета задали переменную $secondary-color (мы ее еще не добавили в код - сейчас добавим). Также мы хотим, чтобы при наведении на блок, его стиль менялся плавно (код при наведении напишем позже), поэтому добавили transition.
Давайте сразу в general.css добавим новую переменную с цветом (добавьте ее сразу под предыдущие переменные).
$secondary-color: #478ac9;
В браузере сейчас это выглядит так:
Давайте применим эффект при наведении на этап - пусть рамка меняет цвет.
В article добавим два дочерних правила:
&:hover,
&:focus {
border-color: $primary-color;
}
& означает, что это правило применяется к родительскому элементу article. То есть в css & будет заменено на article и будет article:hover.
То есть при наведени или фокусе у этапа курсов рамка будет менять цвет.
Давайте тоже самое и для заголовка article сделаем. Добавим еще одно вложенное правило в article:
h3 {
font-size: 1.4em;
font-weight: normal;
color: $secondary-color;
transition: all ease-in 0.3s;
}
&:hover h3,
&:focus h3 {
color: $primary-color;
}
Мы сделали для h3 внутри article внутри #study-order шрифт побольше, нормальную ширину (вместо жирной), задали цвет, задали transition для плавного изменения стиля при наведении. А при наведении сделали, чтобы цвет менялся на другой.
Давайте теперь для последнего абзаца в article зададим стиль. По задумке в дизайне он отбивается по правому краю.
p:last-child {
text-align: right;
line-height: 1.5em;
}
p:last-child - уже знакомая нам конструкция. если указано :last-child, то это правило применится к самому последнему подходящему элементу, то есть к самому последнему <p> внутри article внутри #study-order.
line-height задает высоту строки в абзаце - мы задали полуторную. И с помощью text-align: right; сделали, чтобы текст отбивался по правому краю.
Сейчас структура #study-order у нас следующая:
#study-order {
article {
...Стиль article...
&:hover,
&:focus {...}
h3 {...}
&:hover h3,
&:focus h3 {...}
p:last-child {...}
}
}
А в браузере все выглядит вот так:
Давайте теперь разберемся с иконкой.
Использование Fontello - иконочный шрифт
Сейчас я вас познакомлю с новым для вас сервисом - сервис создания иконочного шрифта.
Для чего нужен иконочный шрифт? Чтобы вы не изображения вставляли, а иконки в виде шрифта. Смысл в том, что им можно задавать цвет, задавать размер как обычным буквам. Только это будут не буквы, а иконки.
Открываем сайт fontello
Там с помощью поиска находим 5 иконок:
graduation, chart, rocket, briefcase, play-circled и каждую отмечаем.
Иконки выбираем вот эти:
Иконки должны появиться у вас во вкладке "Customize names".
Далее сверху жмем кнопку Download Webfont.
Скачанный архив распаковываем.
Папка будет называться что-то вроде fontello-xxxxxxx - ее целиком копируем в папку fonts в vscode.
Убедитесь, что папка fontello находится внутри fonts, а не скопировалась в DINPro. Структура файлов проекта должна получиться вот такая:
Теперь просто файл стилей шрифта fontello нужно импортировать в general.scss по аналогии с файлом стилей шрифта DINPro.
То есть в самый конец general.scss нужно добавить (не забудьте имя папки fontello-5a3dbc9b указать свое - у вас будет немного отличаться)
@import url(../fonts/fontello-5a3dbc9b/css/fontello.css);
Отлично. Теперь вместо текста ...Иконка... вставляем код
<span class="icon-graduation-cap"></span>
По сути мы просто добавили строчный элемент span и ему задали класс icon-graduation-cap - этот класс в точности соответствует имени иконки на сайте fontello.
Давайте посмотри, что получилось в хроме:
Иконка появилась. Теперь нужно сделать ее нужного цвета и размера. И сделать, чтобы она, как и заголовок, при наведении меняла плавно цвет.
К article внутри #study-order в конец добавляем новое вложенное правило:
.icon {
font-size: 4em;
color: $secondary-color;
transition: all ease-in 0.3s;
}
&:hover .icon,
&:focus .icon {
color: $primary-color;
}
А к тегу span с иконкой добавляем новый класс icon:
<div><span class="icon icon-graduation-cap"></span></div>
Теперь то, что нужно.
Осталось только сделать, чтобы иконка отображалась слева от текста.
Для этого мы будем использовать grid. О гридах нужно рассказывать долго и подробно. Поэтому урок придется разбить на две части.
Самостоятельное задание
Ознакомьтесь самостоятельно со статьей по grid и flex верстке.
Попробуйте самостоятельно реализовать примеры из статьи.
Когда разберетесь со статьей на хабре, посмотрите документацию по гридам:
Что делать дальше и как нам помочь?
1. Поставить лайк
2. Написать в комментарии, за сколько времени удалось сделать урок, с чем возникли сложности, что бы хотелось разобрать более детально
3. Подписаться на этот канал
4. Добавиться к нам в группу в наш открытый клуб веб-разработки в телеграм: https://t.me/srmt22_webclub
5. Сделать репост этого урока себе в соцсети.
Что будет на следующем занятии?
Будем продолжать верстать наш дизайн. Разберемся с гридами в верстке.