Учимся веб-програмированию с нуля бесплатно. Сегодня разберемся со стилями. Приведем страницу в порядок. Научимся работать с CSS: с цветами, шрифтами, размерами, отступами и т.д.
Для тех, кто только к нам присоединился, ссылка на все уроки:
И ссылка на самый первый урок:
Ссылка на предыдущий урок:
На прошлом уроке мы сделали веб-страницу нашего резюме. Каждый делал свою, я делал свою. На всякий случай, я прикреплю ссылку на весь проект здесь, чтобы вы могли скачать мою версию, если вдруг у вас что-то не получилось.
https://github.com/madmaker/srmt22-webclasses-lsn4/archive/refs/tags/lsn3.zip
Просто качаете архив с проектом, распаковываете скачанный zip-архив, в PhpStorm жмете File->Open, открываете папку, в которую распаковали архив (там будет файл index.html и папка img) и жмете Open. PhpStom откроет готовый проект. Если, все-таки, продолжите работать с моим проектом, то рекомендую поиграться с текстом и изображением - заменить на что-то про свое резюме и свою жизнь.
У нас в планах было привести страницу в порядок.
Давайте начнем со шрифта. Мы в прошлый раз задали документу шрифт без засечек по умолчанию sans-serif. Давайте сейчас начнем использовать один из самых популярных шрифтов - DIN PRO.
В своем проекте вы можете использовать любой шрифт. К шрифтам вообще стоит относиться внимательно.
Условно разделю шрифты на 3 группы:
- которые есть везде и у всех
- шрифты, которые есть у всех, у кого такая же версия операционной системы, например Windows или MAC
- специфические шрифты, которых ни у кого нет.
Так вот, чтобы не наступить на грабли, стоит внимательно относиться к шрифтам - либо использовать те, которые у всех есть (в гугле можно найти информацию), но тут вы скорее всего столкнетесь с тем, что внешне вас эти шрифты не устраивают, либо, при использовании шрифта, загружать его на сайт и выдавать браузеру, чтобы если шрифта нет на компьютере, браузер мог скачать этот шрифт с сайта и использовать.
Шрифты
Есть множество сайтов, где можно скачать шрифты.
webfonts.pro - лишь один из них.
Вот ссылка на DIN PRO
Проматываем страницу вниз до кнопки "Скачать DIN Pro ZIP" - жмем ее.
Там предложат помочь проекту. Хотите - помогите, не хотите - жмите, как и я "Не хочу, мне трудно".
Скачается архив со шрифтом. Его нужно распаковать.
Появится папка DIN PRO. Ее нужно будет скопировать в проект, но сначала давайте рядом с папкой img сделаем папку fonts, куда в дальнейшем будем складывать шрифты. В эту папку перенесите или скопируйте папку DINPro.
Должно получиться вот так:
Теперь нам нужно "подтянуть" этот шрифт к нашему проекту. Для этого в нашем index.html в самом конце перед закрывающим тегом </body> нужно указать ссылку на файл stylesheet.css, который у нас лежит в папке со шрифтом.
Должен получиться вот такой код:
<link href="fonts/DINPro/stylesheet.css" type="text/css" rel="stylesheet">
</body>
<link> - это еще один тег, который используется для указания ссылок, например, на файлы стилей.
У него 2 атрибута:
- href - там указывается путь к файлу
- type="text/css" - здесь мы указываем тип подключаемого файла. Это файл типа text/css.
- rel="stylesheet" - определяет отношение подключаемого документа к текущему документу. В нашем случае таблица стилей.
О файле stylesheet.css и как он работает немного позже расскажу.
Давайте подключим наш шрифт DIN Pro на сайт.
Для этого достаточно дополнить параметр font-family для тега body в нашем блоке описания стилей <style> новой записью.
Должно получиться вот так.
body {
font-family: "DIN Pro", sans-serif;
padding: 50px 0;
}
В Chrome посмотрите, как изменился шрифт.
Что мы сделали.
- Мы положили к нам в проект папку со шрифтами и таблицей стилей, описывающих эти шрифты.
- Мы подключили таблицу стилей stylesheet.css на нашу страницу.
- Мы на странице в блоке <style> описали параметры стиля для тега body (и других тегов), в частности мы описали параметр font-family и указали ему следующее значение: font-family: "DIN Pro", sans-serif;
Параметры css работают следующим образом:
указывается имя тега (body) - это селектор, а в фигурных скобках описывается стиль.
font-family отвечает за семейство шрифтов, которое будет применено к выбранному селектору. Шрифты можно перечислять через запятую. Нестандартные шрифты пишутся в кавычках - мы написали "DIN Pro", стандартные шрифты без кавычек. sans-serif означает, что будет использоваться "рубленный" шрифт без засечек. Работает это так: если браузеру удалось использовать первый шрифт в списке, то он возьмет DIN Pro, если нет - идет к следующему - в нашем случае это sans-serif. Рекомендуется всегда стандартный шрифт указывать в списке на случай, если браузер не сможет использовать ваш. Так хотя бы будет шрифт такого же типа, а не какой-то неожиданно другой.
Мы применили шрифт к body - головной селектор всего нашего документа. Соответственно, все дочерние элементы будут использовать такой же шрифт, если не указано другое (а это нужно всегда проверять, потому что каждый браузер в каждой операционной системе считает, что он лучше знает, какой стиль где использовать - поэтому может так получиться, что несмотря на то, что элемент дочерний, придется для него все равно "в лоб" прописать нужный стиль.
Стили CSS
На самом деле, у нас в коде уже образовалась помойка стилей. Так делать не принято и нельзя. Стили нужно выносить отдельно. Этим сейчас и займемся.
Вообще писать style="стили стили стили" прям в html внутри тега - это "аварийный" вариант. Так лучше не делать.
Давайте создадим отдельный файл со стилями для нашего проекта.
Для этого создадим папку css в корне проекта рядом с fonts и img, а в ней создадим новый файл "general.css" (в phpstorm это New->Stylesheet или New->file)
Должно получиться так:
У нас есть такой код в нашем index.html
<style>
body {
font-family: "DIN Pro", sans-serif;
padding: 50px 0;
}
div {
max-width:1200px;
margin: 0 auto;
}
a,
a:focus,
a:visited{
color: darkslategrey;
text-decoration: none;
border-bottom:1px solid transparent;
transition: all ease-in 200ms;
}
a:hover {
border-bottom-color:black;
color: black;
}
</style>
Давайте его полностью перенесем в наш general.css.
Если, вдруг, вы не знаете, то вырезать - это CTRL+X (CMD+X на MAC), а вставить - это CTRL+V (CMD+V на MAC).
В файле general.css нужно убрать теги <style> и его закрывающий тег </style>. В CSS файле нужны только свойства css. Теги недопустимы.
Попробуйте, кстати, обновить страницу - увидите, как она "поплыла", шрифты "отлетели".
Чтобы все снова заработало, нам нужно по аналогии с stylesheet.css от шрифта подключить наш general.css - добавляем тег <link> со ссылкой на general.css сразу под предыдущим link на stylesheet.css.
Попробуйте сами, а потом сравните с кодом, который я предлагаю.
<link href="css/general.css" type="text/css" rel="stylesheet">
Продолжаем наводить порядок в стилях нашего документа.
Селекторы CSS по ID элемента
У нас на странице есть фотография. Мы к ней применяли так называемы inline стиль, чтобы она огибала справа все другие элементы.
Давайте разберемся, как вынести ее стиль в таблицу стилей.
Код изначально был вот такой:
<div><img src="img/975-200x300.jpg" alt="Иванов Иван Иванович" style="float: right"></div>
К каждому элементу на странице можно задать ID. ID должен быть уникальный. То есть больше 1 такого элемента на странице быть не может. В целом, у нас основная фотография на странице одна - дадим ей id "primary_photo".
Для того, чтобы задать ID к элементу, есть специальный атрибут id. Работает он точно также, как и все остальные атрибуты: имя атрибута, знак равно, значение в кавычках.
Прописываем id для нашей фотографии и полностью удаляем style.
<div><img id="primary_photo" src="img/975-200x300.jpg" alt="Иванов Иван Иванович"></div>
Теперь переходим в наш файл general.css
Там в самом низу на новой строке пишем.
#primary_photo { float: right; }
Поясню: раньше мы обращались к элементам на странице по имени тега, а сейчас впервые обратились по ID. Для того, чтобы использовать селектор по ID, используется знак решетки и id элемента. А дальше, как обычно: фигурные скобки и описываем стили через точку с запятой.
Давайте еще добавим к нашей фотографии внешний отступ слева и снизу по 15px, чтобы она не "прилипала" к тексту.
#primary_photo { float: right; margin: 0 0 15px 15px; }
Еще у нас в резюме в опыте работы срок работы был серым шрифтом и указан был с помощью style прямо внутри тега.
<span style="color: gray">1 год 3 месяца</span>
Если бы такая надпись была всего одна на странице, мы бы использовали ID, но у нас их несколько. Как быть?
Для этого есть классы. В целом все точно также, как и id, только элементов выбранного класса может быть сколько угодно, атрибут называется class, а в css к таким селекторам мы обращаемся не с помощью решетки, а с помощью точки.
Давайте назовем этот класс "experience" от английского "Опыт, стаж".
Меняем везде код <span style="color: gray"> на
<span class="experience">
Кстати, если нажать CTRL+R (CMD+R в MAC) в Phpstorm, то сверху появится панель "замены", где в верхнюю строку можно ввести старый код, а в нижнюю - новый код, после чего можно нажать "Replace ALL" и все экземпляры старого кода будут заменены на новый. Либо можно жать "Replace" и пройтись по каждому экземпляру, чтобы перепроверить.
В наш css файл дописываем новый селектор .experience и описываем его серый цвет шрифта.
.experience {
color: gray;
}
Ну и самая жесть у нас была в ключевых навыках.
<li style="float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;">Adobe Photoshop</li>
И такое полотно inline стилей мы прописали для каждого навыка.
Разумеется, нужно сделать класс skill, убрать все style="" из тегов li и заменить их на короткое class="skill", а один общий стиль прописать в general.css. Попробуйте сами.
То есть все строки li с описанным громоздким стилем превратятся в
<li class="skill">Adobe Photoshop</li>
А в файле general.css у нас появится одна красивая запись
.skill {
float: left;
padding: 10px;
margin: 5px;
background: lightgray;
border-radius: 5px;
}
Давайте теперь разобьем страницу визуально на блоки с помощью рамок и отступов.
Предлагаю "подвести черту" под списком городов и перед названием желаемой должности.
Найдите это в коде.
<div>
<p>Москва, готов к переезду (Нидерланды, Австрия, Чехия, Люксембург, Норвегия, ОАЭ, Бельгия, Сербия, Великобритания, США, Швеция, Греция, Германия, Ирландия, Финляндия, Испания, Италия, Сингапур, Швейцария, Кипр, Канада, Португалия, Венгрия, Эквадор, Лихтенштейн, Хорватия, Словения, Уругвай, Индонезия), готов к командировкам</p>
</div>
<div>
<h2>Руководитель группы разработки PHP, NodeJs</h2>
Есть заголовок h2 с названием должности. Над ним открывается родительский блок <div> - для этого div и добавим новый стиль.
Добавим ID для этого блока. Назовем его id="jobname".
</div>
<div id="job-name">
<h2>Руководитель группы разработки PHP, NodeJs</h2>
А в стилях для id job-name добавим рамку сверху толщиной в 1px сплошную светло-серого цвета, внешний отступ в 40px и внутренний отступ в 20px
#job-name { border-top:solid lightgray 1px; margin-top:40px; padding-top:20px }
Чуть подробнее о рамке.
border - описывает стиль рамки. Здесь задается тип (solid - сплошная, dotted - точками и т.д., цвет и толщина)
Можно описывать рамку для конкретной стороны, например border-top, border-right.
Можно описывать только цвет рамки border-color, стиль - border-style, толщину - border-width, можно даже все тоже самое, но только для конкретной стороны - border-bottom-color.
Я описал все и сразу для рамки сверху - border-top.
Попробуйте, кстати, заменить solid на dotted или dashed, поиграть с толщиной рамки. Посмотрите, что получится.
Сверимся?
У меня пока получается такая страница. Уже довольно красивая.
Помните ужасающий промежуточный результат с предыдущих занятий?
Мне, честно говоря, не нравится, что заголовки h3 похожи на h2. Давайте поменяем им цвет и толщину шрифта.
В general.css допишем следующее:
h3 {
font-weight: 400;
color: gray;
font-size: 22px;
}
Понятно, что применили сразу ко всем заголовкам h3.
color:gray нам уже знакомо.
font-weight - это ширина шрифта. В зависимости от операционной системы, браузера, шрифта может работать по-разному. Попробуйте поменять на 100, 300, 400, 600 - увидите результат.
font-size - это размер шрифта. Я решил сделать чуть побольше, чем было.
У нас на странице есть еще один мелкий косяк, который хотелось бы исправить.
Контент в колонках таблицы вертикально позиционирован по центру, а нам нужно, чтобы было сверху.
В целом нам нужно, чтобы так было для всех таблиц в проекте по умолчанию, поэтому мы это пропишем сразу ко всему тегу td.
Добавляем такой стиль в наш css:
td {
vertical-align: top;
}
Цвета и их hex-коды
Давайте наконец разберемся с цветами. Ато мы все пишем gray, lightgray и подобное. На самом деле, цвета записываются в виде hex-кода в шестнадцатеричной системе исчесления (школу помним? 0 1 2 3 4 5 6 7 8 9 A B C D E F, то есть от 0 до 15 в таком вот виде). Код ярко-красного цвета - это #FF0000, зеленого - #00FF00, синего - #0000FF.
Как это работает? На экране используется палитра RGB, то есть RED GREEN BLUE, то есть Красный зеленый синий. Из смеси этих трех основных цветов получается наш цвет и код.
Кто не понимает, как это работает, рекомендую к просмотру научное видео смешариков, в котором все понятно рассказано для любого возраста:
Собственно, первые два символа обозначают яркость красного цвета, вторые два - зеленого, последние два - синего.
Обратите внимание на phpstorm.
Если в строке есть цвет, то слева есть квадратик, нажав на который дважды, вы откроете окно настройки цвета.
Давайте для всего body сделаем цвет чуть посветлее черного. Черный вообще использовать не очень хорошо - он режет глаз, а на некоторых мониторах очень сильно режет глаз.
Добавим к body цвет шрифта #333333.
body {
font-family: "DIN Pro", sans-serif;
padding: 50px 0;
color: #333333; }
Все, мне нравится.
Результат этого урока можно скачать по ссылке ниже:
https://github.com/madmaker/srmt22-webclasses-lsn4/archive/refs/tags/lsn4.zip
Самостоятельное задание
1. У вас в коде остались еще inline-стили в html. Их нужно вынести в css.
2. Поиграйтесь со стилями
- Примените color к разным блоком разный, поиграйтесь с цветами
- Примените разный фон (background:) - работает точно также, как и color
- Попробуйте применить рамки border, отступы margin, padding
- Поэкспериментируйте с размером шрифта для разных элементов
- Добавьте еще изображение на страницу
- Добавьте видео с YouTube на страницу (любое)
3. Учитесь использовать ресурсы с документацией по языку программирования или инструменту.
- https://www.w3schools.com/cssref/default.asp - вот ссылка на разные CSS свойства. Посмотрите, поиграйтесь с ними. Мы в процессе обучения дальше будем рассматривать разные свойства, но будет полезно попробовать самостоятельно
- https://www.w3schools.com/tags/default.asp - вот ссылка на разные HTML теги. Посмотрите, попробуйте использовать разные, поэкспериментируйте.
Спасибо, что дочитали и за ваш интерес к миру веб-разработки.
Что делать дальше и как нам помочь?
1. Поставить лайк
2. Написать в комментарии, за сколько времени удалось сделать урок, с чем возникли сложности, что бы хотелось разобрать более детально
3. Подписаться на этот канал
4. Добавиться к нам в группу в наш открытый клуб веб-разработки в телеграм: https://t.me/srmt22_webclub
5. Подписаться на наш канал курсов в телеграм: https://t.me/srmt22class
6. Сделать репост этого урока.
7. Скрин результата своей работы прислать в комментарии к этой статье.
Что мы узнали на этом занятии?
Смешарики - очень крутой мульфильм, в котором современный веб-разработчик может найти много полезной информации- webfonts.pro - отсюда можно брать шрифты
- <link href="fonts/DINPro/stylesheet.css" type="text/css" rel="stylesheet"> - так подключаются таблицы стилей
- font-family - свойство CSS, которое отвечает за семейство шрифтов
- font-size - отвечает за размер шрифта
- style в html, а не в таблице стилей использовать плохо
- css селекторами могут выступать имена тегов (td, body), ID (#primary_photo), Class (.skill)
- vertical-align: top; - применяется к колонке таблицы <td> и задает позиционирование контента по верху, а не по центру, как по умолчанию
- #333333 - так задаются коды цветов и можно задать любой цвет, который можно выбрать прямо в phpstorm
- color - цвет шрифта
- background - фон элемента
- border - рамка
Что будет на следующем занятии?
Наша страница уже выглядит довольно хорошо. Думаю, что пора нам регистрировать домен, брать в аренду (не пугайтесь, это не дорого) сервер и размещаться в интернете.
