Дан текст
Песенка про елочку В лесу родилась ёлочка, В лесу она росла. Зимой и летом стройная, Зелёная была. Метель ей пела песенку: - «Спи, ёлочка, бай-бай!» Мороз снежком укутывал: - «Смотри, не замерзай!» Теперь я умею Использовать заголовочные теги h1, h2 etc. Выделять цвет жирным шрифтом через strong Выделять цвет наклонным шрифтом через em Использовать разрывы строк br и абзацы p
сверстать его как на картинке [добавил чуток уточнений чтобы было проще]
Найти текст с тремя абзацами. И сверстать следующим образом.
как-то так (в принципе, чем трешовее тем лучше =)
Заменить стили на классы, чтобы проще было разбираться со следующим заданием
добавить реакцию на наведение мышки, по вкусу
Сверстать как на картинке
Сверстать вот так
если вдруг, то тут три строчки и у каждой колонки в строчке фиксированная ширина и высота, то есть flex-grow колонкам не ставим.
Сверстать вот так
если сразу один в один не получится, то попробуй просто сверстать максимально приближено. Тут главное не запутаться в структуре организации флексов: какой горизонтальный, какой вертикальный…
Сверстать заголовок инсты, по возможности максимально похоже.
Обрати внимание на то что у круглых картинок есть границы, тень и и небольшой padding, градиентную границу у аватрки делать не надо, ее штатными средставми не получится сделать. Также цвет фона не белый а немного сероватый, чтобы сделать такой же добавь background-color в стиль body.
Смело используй margin и padding когда хочешь увеличить пространство между колонками или строками. Можно всегда указать значение только с одной стороны если добавить к свойству слова left, right, top, bottom, например:
.column-1 {
margin-left: 10px;
margin-right: 25px;
margin-bottom: 10px;
margin-top: 30px;
}
для выравниваний не забывай про justify-content и align-items, они очень похоже себя ведут.
Для строки, justify-content отвечает за выравнивание по горизонтали, align-items – по вертикали.
А для колонки (когда flex-direction: column) наоборт: justify-content отвечает за выравнивание по вертикали, align-items – по горизонтали.
на картинке примерная структура, чтобы соориентироваться
Создаем где-нибудь папку, в которой будем хранить работы
Теперь запускаем Visual Studio Code, тыкаем Open Folder…
и выбираем папку
откроется что-то такое
создаем html файлик
Запускаем файлик в браузере, проще всего прямо из папки
И так первое что можно сделать это написать какое-нибудь слово
Удаленка
прямо в файлике
нажать Ctrl+S чтобы сохранить файл и перегрузить страничку в браузере
видим
можно предложение написать
Хочу на удаленку
можно в две строки
Хочу
на удаленку
ой, что-то не так. Мы ж в две строки написали, а вывелось в одну. Как так?
Дело в том, что html переносы строк игнорирует и если хочется сделать перенос строки надо об этом явно ему сказать, делается это так:
Хочу<br>
на удаленку
так как писать треугольные скобочки лениво можно писать то что внутри них и тыкать TAB или Enter
теперь все четко
Если тебе уже надоело тыкать перегрузку страницы каждый раз. То сделай следующее
ждем
в браузере по умолчанию откроется ссылка вида (у тебя может быть чуток другая)
http://127.0.0.1:5500/test01.html
если надо открыть в другом браузере просто скопируй ее туда.
дело в том, что у нас не совсем валидный код, по идее все что мы пишем должно писаться внутри базовой разметки html.
Добавить ее очень легко, пишешь восклицательный знак и тыкаешь TAB, а заем все что мы пишем вставляешь между <body> и </body> вот так
и теперь проверяем авто перезагрузку. На всякий еще раз кликни на имя файла правой кнопкой и выбери пункт меню Open with Live Server и там, где была открыта ссылка http://127.0.0.1:5500/test01.html перегрузи страницу.
И теперь каждый раз как ты будешь сохранять файл он автоматом будете перегружать страницу
еще html игнорирует больше более одного пробела, а также то что мы делали внутри body тоже особо не влияют на отображение, можно даже так сделать
Хочу <br>
на удаленку
это все равно нарисуется так
в случаях, когда вот очень-очень хочется больше одного пробела используют специальные конструкции начинающиеся с амперсанда &
Хочу <br>
на удаленку
– это явное указание на вставить пробел (No-Break Space), тут я целых 4 вставил
но в природе так делать не рекомендуется, и вообще людей которые так делают не очень любят…
есть другие способы добавить пространства, но о них позже.
Вот так штучка которая выглядит как <br> называется тегом. Большинство тегов парные.
То есть, есть открывающий тег, содержимое тега и закрывающий тег. Например, я могу явно выделить какую-то часть текста жирным шрифтом:
Хочу <br>
на <strong>удаленку</strong>
стало быть
<strong> – открывающий тег</strong> – закрывающий тег, выглядит как открывающий только со слешем перед названиемникто не запрещает вставлять теги внутри других тегов. То есть я, например, могу весь текст выделить жирным текстом и причем оставить внутри перенос на новую строку
<strong>Хочу <br>
на удаленку</strong>
более красиво писать так:
<strong>
Хочу <br>
на удаленку
</strong>
получим вот такое:
В общем существует джентельменский набор тегов для оформления кода, которые вроде как каждый должен знать.
Но на деле используются они только когда нет времени заморачиваться со стилями. Плюс иногда для семантической верстки. Собственно, вот они:
<h1>Заголовок первого уровня</h1>
<h2>Второго уровня</h2>
<h3>Третьего</h3>
<h4>4-го</h4>
<h5>5-го (помоему никто такие не используют)</h5>
<h6>пффф, шестой...</h6>
попробуй сама писать теги, типа набираешь h1 и тыкаешь TAB и внутри чего-нибудь пишешь
он такой комбинированный тег. Там есть открывающий тег ol (от англ. ordered list), внутри которого пишутся вложенные li теги (от англ. list item)
<ol>
<li>Первый пункт меню</li>
<li>Второй пункт меню</li>
<li>Третий пункт меню</li>
</ol>
он сам циферки добавляет:
тоже что и выше только без циферок, и тег называется ul (unordered list)
<ul>
<li>Не могу понять какой я пункт меню, может второй?</li>
<li>А я наверное четвертый</li>
<li>Ну я то точно первый</li>
</ul>
рисует точечки вместо циферок
<strong>Я просто сидел на самоизоляции</strong>
<br>
<em>Помогите, падаю ООО</em>
<br>
<u>Иду по рельсам</u>
<br>
<strike>Я передумал тут чего-то писать</strike>
обрати внимание, что тут я вставляю br теги чтобы у меня каждый элемент был с новой строки.
Кстати часто вместо br используют тег p.
Если br – это разрыв строки, то p – это начало нового абзаца
<strong>Я просто сидел на самоизоляции</strong>
<p>
<em>Помогите, падаю ООО</em>
<p>
<u>Иду по рельсам</u>
<p>
<strike>Я передумал тут чего-то писать</strike>
абзацы сильнее разрывают строки
И так, собственно база для того что бы что-то можно было писать уже есть. Попробуй теперь сделать 1-ое задание
Начнем со следующего кода
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Варкалось. Хливкие шорьки<br>
Пырялись по наве,<br>
И хрюкотали зелюки,<br>
Как мюмзики в мове.<br>
</body>
</html>
дальше буду писать только то что находится в body.
И так современный html код примерно на 95% состоит из комбинаций тега div, который мы почему-то пока ни разу не упомянули.
Этот тег в отличие от тех что мы рассматривали в предыдущем задании, никак на оформление не влияет, и именно поэтому является идеальным кандидатом в качестве некоторой оболочки для контента.
Попробуем обернуть код в тег div
<div>
Варкалось. Хливкие шорьки<br>
Пырялись по наве,<br>
И хрюкотали зелюки,<br>
Как мюмзики в мове.<br>
</div>
выглядит все один в один
Зачем же он собственно нужен? А для того чтобы указывать стили для каждого блока.
Например, вот хочу я чтобы текст был выровнен по центру. Как мне это сделать?
Тут нам пригодятся так называемые атрибуты. Добавим атрибут для указания стиля
и пропишем в нем стиль который укажет что мы хотим выравнивать текст по центру (стиль text-align)
проверяем
мы можем указать несколько стилей, например, я могу указать чтобы весь текст был толстым (стиль font-weight):
то есть в целом, любой стиль имеет вид:
название: значение;
соответственно, если несколько стилей, то пишем
название1: значение1; название2: значение2; ...
по сути div тег является таким обобщенным тегом который позволяет более тонко настраивать отображение текста.
Я могу использовать сколько угодно тегов div
<div style="text-align: center; font-weight: bold;">
Варкалось. Хливкие шорьки
</div>
<div style="text-align: right; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="text-align: left; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="text-align: center; font-style: italic;">
Как мюмзики в мове.
</div>
плюс нет необходимости использовать тег переноса на новую строку, так как div по умолчанию занимает все строку и не позволяет другим divам находится на той же строке
Вообще надо понять принцип поведения блока div.
Он занимает все расстояние от левого до правого края и расширяется в высоту в зависимости от содержимого.
Добавим границу к нашему блоку. Для этого есть стиль border
<div style="text-align: center; border: 1px solid black;">
Варкалось. Хливкие шорьки
</div>
получится так
формат стиля border такой:
а если запихать текст побольше, он начнет расширять область в высоту
<div style="text-align: center; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в Москве,
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в летнюю серенькую пару,
был маленького роста, упитан, лыс, свою приличную шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
сверхъестественных размеров очки в черной роговой оправе.
Второй – плечистый, рыжеватый, вихрастый молодой человек в
заломленной на затылок клетчатой кепке – был в ковбойке,
жеваных белых брюках и в черных тапочках.
</div>
<div style="text-align: right; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="text-align: left; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="text-align: center; font-style: italic;">
Как мюмзики в мове.
</div>
кстати еще один интересный момент, несмотря на переносы в тексте, в html они игнорируются, но тем не менее браузер автоматически делает переносы текста и расширяет область, чтобы текст влезал на страницу.
Еще один очень важный стиль, который очень часто используется в природе это padding (отступ). Грубо говоря это расстояние от текста до границы блока. Задавать его можно тремя разными способами:
<div style="text-align: center; padding: 8px 16px; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в Москве,
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в летнюю серенькую пару,
был маленького роста, упитан, лыс, свою приличную шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
сверхъестественных размеров очки в черной роговой оправе.
Второй – плечистый, рыжеватый, вихрастый молодой человек в
заломленной на затылок клетчатой кепке – был в ковбойке,
жеваных белых брюках и в черных тапочках.
</div>
Тоже регулярно используется. Допусти добавлю я все div-ам рамки:
<div style="text-align: center; padding: 8px 16px; border: 1px solid black;">
<!-- это комментарий, его копировать не надо, я его сюда вставил чтобы весь текст не копировать ... -->
</div>
<div style="text-align: right; border: 1px solid black; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="text-align: left; border: 1px solid black; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="text-align: center; border: 1px solid black; font-style: italic;">
Как мюмзики в мове.
</div>
выглядит это все слеплено:
так вот, внешние границы позволяют убрать эту склееность. Формат тот же что и у padding
добавляем:
<div style="margin: 8px 0; text-align: center; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
<div style="margin: 8px 0; text-align: right; border: 1px solid black; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="margin: 8px 0; text-align: left; border: 1px solid black; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="margin: 8px 0; text-align: center; border: 1px solid black; font-style: italic;">
Как мюмзики в мове.
</div>
вот теперь красота:
Часто хочется как-то выделить или раскрасить блок. Для этого используется стиль background. У него очень много всяких форм, но мы рассмотрим две, для заливки одним цветом или для заливки градиентом
<div style="background: #a6ff00; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
чтобы подкорректировать цвет просто наведи мышку на цвет и немного подожди:
получится как-то так:
градиент делается вот так
<div style="background: linear-gradient(90deg, #00aeff, #ffa6f3); text-align: right; margin: 8px 0; border: 1px solid black; text-decoration: underline;">
Пырялись по наве,
</div>
а выглядит вот так:
Иногда очень хочется ограничить размеры блока. Тут на помощь приходит свойство width, формат простой:
<div style="width: 300px; background: #a6ff00; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
причем указывать размер не обязательно в px, можно указать в процентах, например, 50%:
<div style="width: 50%; background: #a6ff00; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
правда он все равно займет не 50 процентов. На деле окажется что 50% будет занимать только сам текст, а плюсом будет еще идти всякие padding и margin и даже ширина границы
чтобы такое поведение подправить надо добавить свойство box-sizing: border-box;, вот так:
<div style="box-sizing: border-box; width: 50%; background: #a6ff00 ; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
вот тогда все будет четко
Вообще, не пугайся что мы так много пишем в этот несчастный атрибут style, в следующем задании мы научимся делать классы, и писать станет сильно комфортнее.
Помимо управления видом самих блоков, можно также управлять видом отдельных частей текста.
Для этого используется тег span. Он также используется в качестве обертки текста.
А главное отличие от div заключается в том, что он не добавляет переносы на новую строку.
То есть я могу выделить отдельное слово и, например, изменить фон текста:
<div style="...">
Однажды весною, в час небывало жаркого заката, в <span style="background: red;">Москве</span>,
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в летнюю серенькую пару,
был маленького роста, упитан, лыс, свою приличную шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
сверхъестественных размеров очки в черной роговой оправе.
Второй – плечистый, рыжеватый, вихрастый молодой человек в
заломленной на затылок клетчатой кепке – был в ковбойке,
жеваных белых брюках и в черных тапочках.
</div>
будет выглядеть вот так:
могу padding добавить:
<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в <span style="padding: 8px; background: red;">Москве</span>,
<!-- ... -->
</div>
странно выглядит, правда:
дело в том, что span пытается не нарушать межстрочных интервалов и вообще стандартной логики поведения текста.
Но часто хочется прямо вот сильно выделить слово. Для этого добавляется специальный стиль display: inline-block;, вот так:
<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в <span style="display: inline-block; padding: 8px; background: red;">Москве</span>,
<!-- ... -->
</div>
тогда оно выглядит нормально
вот такие дела =)
Ну думаю хватит пока, можно теперь и задание поделать
И так вот намучились мы с этими стилями. Особенно муторно было, наверное, прописывать подсветку прилагательных.
А теперь представь, что тебе приходят и говорят, что прилагательные все должны выделятся серо-буро-малиновым и чтобы с каемочкой.
И вот ты идешь в документ и правишь каждый span. Хотя конечно можно воспользоваться заменой, но что делать если ты не только прилагательные желтым выделяла, а еще и чуваков всяких, в этом случае придется все равно вручную проверять.
Чтобы не сталкиваться с такой проблемой, были придуманы классы.
Класс – это именованный набор атрибутов. Который можно привязать к тегу через атрибут class.
Я буду использовать твой документик, так что можешь править его.
Он такой у меня
<div style="background:#cceb92 ;text-align: center;font-weight: bold; padding: 8px 16px ;border: 2px solid rgb(230, 139, 21)"">
Однажды весною, в час небывало <span style="background: yellow;">жаркого </span> заката, в <span style="display: inline-block; padding: 8px; background: red;">Москве,</span>
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в <span style="background: yellow;">летнюю серенькую </span> пару,
был <span style="background: yellow;">маленького</span> роста, упитан, лыс, свою <span style="background: yellow;">приличную</span> шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
<span style="background: yellow;">сверхъестественных</span> размеров очки в <span style="background: yellow;">черной роговой</span> оправе.
Второй – <span style="background: yellow;">плечистый, рыжеватый, вихрастый молодой</span> человек в
<span style="background: yellow;">заломленной на затылок клетчатой</span> кепке – был в ковбойке,
<span style="background: yellow;"> жеваных белых</span> брюках и в <span style="background: yellow;">черных</span> тапочках.
</div>
<br>
<div style="text-align: right; width: 500px; background:linear-gradient(90deg, #9bd8f5, #e97f84 ); padding: 8px 16px; border: 4px solid rgb(17, 0, 255);">
Первый был не кто иной , как <span style="display:inline-block; padding: 6px; background: linear-gradient(80deg, yellow , red); ">Михаил Александрович Берлиоз</span>,
председательно правления одной из <span style="background: yellow;">курпнейших московских литературных</span> ассоциаций, сокращенно именуемой МАССОЛИТ, и редактор <span style="background: yellow;">толстого художественного</span>
журнала, а <span style="background: yellow;"> молодой спутник его поэт </span>
<span style="display: inline-block; padding: 8px; background: wheat;"> Иван Николаевич Понырев </span>, пишущий под
псевдонимом <span style="display: inline-block; padding: 5px; background: yellow;">Бездомный</span>
</div>
<br>
<div style="text-align: left; width: 50%; background: linear-gradient(50deg, white, red); padding: 8px 16px; border: 10px solid green;">
Попав в тень чуть <span style="background: yellow; border: 1px solid black;">зеленеющих</span> лип, писатели
первым долгом бросились к <span style="background: yellow;">пестро раскрашенной </span>
будочке с надписью "Пиво и воды"
</div>
все прилагательные выделены у нас следующим образом, у всех (почти) одинаковый атрибут style
<span style="background: yellow;">пестро раскрашенной </span>
чтобы добавить класс, надо вставить в разметку кода специальный парный тег <style>, например, прям после всех дивов
<div style="background:#cceb92 ;text-align: center;font-weight: bold; padding: 8px 16px ;border: 2px solid rgb(230, 139, 21)"">
<!-- ... -->
будочке с надписью "Пиво и воды"
</div>
<style>
/* коментарии внутри style пишутся вот так */
/* щас мы тут класс создадим */
</style>
добавляем внутрь style класс. Имя класса внутри стайл тега, надо писать с точечки, вот так
<style>
.adjective {
}
</style>
внутри фигурных скобок мы будем собственно перечислять стили, у нас один стиль, его и добавил
<style>
.adjective {
background: yellow;
}
</style>
теперь у всех прилагательных уберем атрибут style и добавил атрибут class, то есть
<span style="background: yellow;">пестро раскрашенной </span>
заменяем на
<span class="adjective">пестро раскрашенной </span>
обрати внимание что в атрибут мы пишем название без точечки.
Дальше делаем так со всеми прилагательными. Так как они выглядит одинаково мы можем воспользоваться мультикурсором и заменить все сразу.
Для этого выделяем один style со стилем, вот так
а затем начинаем тыкать Ctrl+D пока не будут выделены все элементы с таким же содержимым:
и пишем сразу во всех местах
визуально ничего не должно поменяться
просто теперь все прилагательные привязаны к классу adjective.
Самое классное что теперь мы можем поменять у них всех цвет изменив всего одну строчку, вот так:
<style>
.adjective {
background: yellowgreen;
}
</style>
можем рамочку добавить
.adjective {
background: yellowgreen;
border: 2px dashed black;
}
добавим несколько прикольных стилей:
.adjective {
background: yellowgreen;
border: 2px dashed black;
display: inline-block; /* это мы уже знаем, просто чтобы прилагательные были как блоки */
margin: 2px; /* отступы со всех сторон */
padding: 0 4px; /* отступы внутри границы */
border-radius: 8px; /* закруглим границы */
box-shadow: 0 0 8px grey; /* добавим тень, 0 0 это ее сдвиг относительно блока, 8px радиус тени ну и цает */
}
выглядит уже интереснее:
кстати у нас там есть одно прилагательное с границей, которому мы забыли добавить класс, из-за этого оно выбивается из общего стиля
на самом деле мы можем подцепить его к классу, и тем не менее оставить стиль. То есть добавим класс в
<span style="background: yellow; border: 1px solid black;">зеленеющих</span>
получится так
<span class="adjective" style="background: yellow; border: 1px solid black;">зеленеющих</span>
получится вот так
на самом деле тут произошли некоторые очень важные штуковины. А именно стили из style переписали те что были в классе adjective. То есть для фона используется желтый цвет, вместо зеленого из adjective и рамка тоненькая и без разрывов. Это стандартное поведение. То есть стиль всегда важнее того что в классе.
Хотя на самом деле мы можем заставить стиль класса быть важнее стиля тега, для этого надо добавить слово !important. Например, я хочу, чтобы рамочка из класса перезаписывала стиль, то я сделаю так:
.adjective {
background: yellowgreen;
border: 2px dashed black !important; /* добавил в конец !important */
/* ... */
}
тыдыщь:
в качестве особых извращений мы в принципе можем запихать !important внутрь стиля и тогда он станет важнее того что в классе:
<span class="adjective" style="background: yellow; border: 1px solid black !important;">
вернулись к началу
Но вообще людей использующих !important очень не любят и могут даже побить. Так что никогда не используй !important.
Еще один функционал, которые добавляют классы — это возможность реагировать на мышь. Для этого используются так называемые псевдоклассы.
Когда ты наводишь мышь на тег, то ему неявно добавляется класс :hover, и мы можем изменить то как будет отображаться блок добавив новый класс, вот так
<style>
.adjective {
/* … */
}
.adjective:hover {
/* сейчас сюда чего-нибудь добавим */
}
</style>
например, добавим смену фона, например:
.adjective:hover {
background: skyblue;
}
как видишь стили из .adjective:hover перезаписывают значения класса. Туда можно добавить и какие-то стили которые не присутствуют в базовом классе. Например, я могу сделать чтобы курсор превращался в указательный палец
.adjective:hover {
background: skyblue;
cursor: pointer;
}
во как
кстати “зеленеющих” не реагирует на смену цвета, потому что там в атрибует !important.
Возможно ты заметила что смена цвета происходит сильно резко.
Мы можем добавить так называемые переходы между параметрами, то есть один цвет будет плавно переплывать в другой. Для этого достаточно добавить в базовый класс следующий стиль
.adjective {
/* ... */
transition: all 0.3s; /* all означает что сглаживаем все преобразования, 0.3s -- это скорость перехода в секундах */
}
/* это не трогаем */
.adjective:hover {
background: skyblue;
cursor: pointer;
}
теперь все очень гладенько меняется
если поиграть со стилями можно очень необычных эффектов
.adjective:hover {
background: skyblue;
cursor: pointer;
border-width: 4px; /* меняю ширину границы, да можно только ширину указать */
padding: 6px; /* меняю отступы от границы */
box-shadow: 0 0 30px white; /* делаю тень белой и побольше, получается иллюзия свечения */
}
Но лучше конечно не злоупотреблять особенно размерами и отступами.
Все можно теперь задание пилить =)
Теперь поговорим о комбинациях классов
Помимо того, что мы можем описывать внутри тега <style> конкретный класс, мы можем прописать иерархию классов.
Допустим хочу я чтобы в первом параграфе все прилагательные были белые, но не хочу менять класс прилагательного. Зато я могу сделать новый комбинированные иерархический стиль — вот так:
<style>
.paragraph1 {/* ... */}
.paragraph2 {/* ... */}
.paragraph3 { /* ... */ }
.adjective {/* ... */}
.adjective:hover { /* ... */ }
/* добавил новый стиль, пробел между названиями классов обязателен */
.paragraph1 .adjective {
background: white;
}
</style>
так как комбинированный стиль имеет больший приоритет чем простой стиль, то цвет из класса .adjective будет перезаписан и получим:
вообще строя разные комбинации можно получать очень интересные эффекты. Например я могу менять цвет всех прилагательных при наведении мыши на абзац. Для этого я добавляю стиль с псевдоклассом:
<style>
/* ... */
.paragraph1 .adjective {
background: white;
}
/* теперь при наведении мышки на абзац поменяется цвет всех прилагательных */
.paragraph1:hover .adjective {
background: red;
}
</style>
получится так
правда теперь если я захочу, чтобы прилагательные все-таки меняли цвет при наведении мышки внутри первого абзаца, надо будет добавить еще один стиль
.paragraph1:hover .adjective:hover {
background: yellow;
}
Мы пока что указывали только один класс у каждого тега. Есть возможность указывать несколько классов. Особенно часто это используется во всяких подключаемых библиотечках со стилями, которые мы попробуем попозже.
Используется это для целей декомпозиции. Например, я хочу сделать отдельный стиль под блок с рамочкой.
Для этого я разбиваю класс прилагательного на два, вот так:
.adjective {
/* тут оставил только цвет и активацию плавных переходов */
background: yellowgreen;
transition: all 0.3s;
}
.bordered {
/* в этот новый стиль вынес все связанной с блоком и рамкой */
border: 2px dashed black;
display: inline-block;
margin: 2px;
padding: 0 4px;
border-radius: 8px;
box-shadow: 0 0 8px grey;
}
из-за этого у меня естественно все рамки слетят
зато я теперь могу добавить рамочки все тегам каким захочу без необходимости создавать новый класс.
Например, абзацу могу добавить, для этого в атрибут class добавляю через пробел второй класс:
<div class="paragraph1 bordered">
<!-- ... -->
</div>
получится так
тут у меня слетели отступы, я могу добавить уточняющий класс который будет учитывать поведение абзаца в комбинации с классом bordererd. Для этого я определяю комбинированный стиль следующим образом
/* тут пробел уже не ставим, прямо склеиваем имена классов */
.paragraph1.bordered {
margin: 16px 0;
border-width: 6px;
}
получится так
ну можно теперь и задание поделать
До этого мы работали с блоками по отдельности. А тут попробуем уже поработать с общей структурой.
В целом, какой сайт не возьми, получается набор строк и столбцов. И строки мы в принципе уже умеем делать, то есть какой бы div мы не вставили он уже полностью занимает всю строку:
<div class="block"></div>
<style>
.block {
border: 1px solid black;
height: 1rem; /* явно указал высоту блока в единице измерения rem, которая равна стандартной высоте одной строки */
margin-bottom: 0.5rem; /* отступ снизу */
}
</style>
и если я добавлю три блока, то все они будут занимать одну строку
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
и вот встает вопрос, а что делать если я хочу, чтобы они выводились не построчно, а все вместе встали бы в одну строку?
Для этого мы воспользуемся возможностями специального набора стилей именуемых флексами (flex).
Сначала обернём все три наших блока в один див, и присвоим ему класс row:
<div class="row">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
визуально ничего не изменится
а теперь пропишем стили для класса row
<style>
.block { /* ... */ }
.row {
display: flex;
}
</style>
И тут же у нас все блоки схлопнутся в строку, и видны останутся только границы
а теперь самое главное мы укажем у наших блоков сколько относительного места им полагается занимать в строке. Для этого используется свойство flex-grow, добавим его в класс block
<style>
.block {
border: 1px solid black;
height: 1rem;
margin-bottom: 0.5rem;
flex-grow: 1; /* добавил */
}
.row {
display: flex;
}
</style>
и так, теперь все блоки растянулись по строке, и каждый, так как у всех flex-grow один и тот же, занимает одинаковую долю равную 1:
я могу заставить какой-нибудь блок заставить быть в два раза больше других для этого я прям добавлю ему стиль и укажу значение flex-grow: 2
<div class="row">
<div class="block"></div>
<div class="block" style="flex-grow: 2;"></div>
<div class="block"></div>
</div>
теперь второй блок занимает две доли, а остальные по одной
правда все это начинает себя очень интересно вести, когда мы не просто пустые блоки, а еще добавляем туда какое-нибудь содержимое.
Чтобы было веселее я буду вместе с текстом использовать иконки.
Для иконок существует замечательная библиотечка fontawesome в которой тьма иконок на любой цвет и вкус.
Чтобы начать ее использовать в своем файле надо добавить ссылку на ее стили, у всех библиотечек это делается немного по-разному.
Для fontawesome следующим образом. Вверху файлика, там где
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
добавляем ссылку где-то внутри тега head, вот так
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
теперь выбираем категорию, я буду добавлять звериков
затем тыкаю на котяру напирмер
и копирую тег с классом
теперь вставляю себе в блоки
<div class="row">
<div class="block">
тут собачка живет
<i class="fas fa-dog"></i>
</div>
<div class="block" style="flex-grow: 2;">
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
</div>
<div class="block">
<i class="fas fa-kiwi-bird"></i>
дом киви
</div>
</div>
получится как-то так:
иконки кажутся сильно маленькими, поэтому я добавлю класс fa-2x встроенный в библиотечку который позволяет увеличить размер иконок
так, чего-то все повылазили из блоков… а, ну это потому что мы явно высоту блока в классе прописали, уберем там стиль height
<style>
.block {
border: 1px solid black;
/* убрал height: 1rem; */
margin-bottom: 0.5rem;
flex-grow: 1;
}
/* ... */
</style>
добавим им немного воздушного пространства
<style>
.block {
border: 1px solid black;
margin-bottom: 0.5rem;
margin: 0.25rem; /* оступы вокруг блоков */
padding: 0.5rem; /* отступы внутри блоков */
flex-grow: 1;
}
/* ... */
</style>
все теперь вроде ок выглядит.
Вот между прочим я хотел, чтобы второй блок был вдвое больше остальных по ширине, а он получается едва ли не меньше первого блока, плюс первый и последний блоки должны быть равны.
Как же так получается, мы же там вот это flex-grow: 1; прописывали. Дело в том, что flex-grow пытается распределить именно пустое место в блоках не учитывая места занимаемое содержимым
а за размер содержимого отвечает стиль flex-basis, который по умолчанию пытается уместить все содержимое в одну строку.
Чтобы flex-grow начал учитывать и содержимое, надо прописать свойство flex-basis: 0
.block {
border: 1px solid black;
margin-bottom: 0.5rem;
margin: 0.25em;
padding: 0.5em;
flex-grow: 1;
flex-basis: 0; /* добавил */
}
от теперь все как прописано во flex-grow, первый и последний равны, второй вдвое больше
сейчас у нас получается резиновая верстка
но иногда хочется, чтобы какой-то блок не реагировал на растяжения, например, я хочу, чтобы домик киви всегда был фиксированного размера.
Для этого я могу указать свойство flex-grow равным нулю, ну то есть grow – значит расширятся, а если поставить 0 то мы говорим что не расширяйся, добавим прямо в блок этот стиль
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0;">
<i class="fas fa-2x fa-kiwi-bird"></i>
дом киви
</div>
</div>
хм, чет сильно ужали эту киви
вообще тут интересно на самом деле, то есть собака и котики находятся в корректной пропорции, а киви ужато по самое не могу, так чтобы кошки и собаки заняли максимальное возможно пространство.
Как же облегчить судьбу несчастной птицы? Помнишь мы указывали свойство flex-basis: 0 для всех блоков, чтобы растяжение было пропорционально. Так вот, через это свойство мы можем указать конкретную ширину блока, это по сути аналог width но для флексовой верстки. Например, поставлю туда 250px
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0; flex-basis: 250px;">
<i class="fas fa-2x fa-kiwi-bird"></i>
дом киви
</div>
</div>
и усё, теперь птичка круче всех:
но вообще конечно это перебор, если надо чтобы просто птичка не была ужата, просто укажем значение auto
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0; flex-basis: auto;">
<i class="fas fa-2x fa-kiwi-bird"></i>
дом киви
</div>
</div>
и тогда блок займет ровно столько места сколько ему надо:
В общем, теперь можем добавлять сколько угодно строк и в каждом прописывать уникальные поведение блоков
<div class="row">
<!-- ... -->
</div>
<!-- добавил второй ряд -->
<div class="row">
<div class="block" style="flex-grow: 3; text-align: center;">
<i class="fas fa-2x fa-dog"></i>
<i class="fas fa-2x fa-dog"></i>
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-grow: 1; ">
<i class="fas fa-2x fa-horse"></i>
лошадка
</div>
</div>
вот такие дела
Сегодня будем учится верстать в столбик. В строчку вроде как уже умеем.
В строчку обычно как? Например, вот так
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
<div class="row">
<div class="block">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
<style>
.row {
display: flex;
}
.block {
border: 1px solid black;
margin: 0.25em;
padding: 0.5em;
}
</style>
</body>
</html>
и по умолчанию все зверики занимают ровно столько сколько им надо
если я хочу, чтобы каждый занимал какое-то специфическое пространство я стало быть добавляю свойство flex-grow: 1
<div class="row">
<div class="block" style="flex-grow: 1;">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-grow: 1;">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
в этом случае как ты помнишь идет равномерное распределение пустого пространства
то есть, если я хочу, чтобы равномерными были именно размеры, то я добавляю flex-basis: 0
<div class="row">
<div class="block" style="flex-basis: 0; flex-grow: 1;">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
и все ровно встает:
А теперь посмотрим, как все это работает, когда я делаю верстку в столбик.
Чтобы сделать верстку в столбик надо добавить свойство flex-direction: column, вот так
<style>
.block {
/* ... */
}
.column { /* переименовал в column, не забудь переименовать выше, где class="row" */
display: flex;
flex-direction: column; /* добавил */
}
</style>
и тут же все превращается в колонку
Попробую-ка я сделать, чтобы кошечка в два раза больше места занимала:
<div class="column">
<div class="block" style="flex-basis: 0; flex-grow: 1;">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 2;"> <!-- заменил тут на flex-grow: 2; -->
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
проверяем:
Хм, шо за ерунда?
А дело в том, что у вертикальной верстки есть мини проблема, которая заключается в том, что у браузера нет по сути чёткого понятия высоты.
То есть 100% ширины — это всегда понятно сколько, от левого края до правого. А вот 100% высоты — это не понятно, как считать. Это от верха видимого куска страницы до низа видимого куска страницы, или до низа если проскроллить, или еще как? Неясно в общем.
Поэтому при вертикальной верстке всегда важно указывать высоту колонки. Например, я укажу что высота моей колонки 300px
<div class="column" style="height: 300px"> <!-- добавил height: 300px -->
<div class="block" style="flex-basis: 0; flex-grow: 1;">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 2;">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
о, и сразу все заработало
flex-basis: 0; ведет себя точно так же как и в горизонтальной верстке, то есть без него будет попытка распределить пустое пространство:
тут не сильно разницу видно, но она есть.
На самом деле наличие резиновых блоков по вертикали не очень часто нужно. То есть сейчас у нас, и собачка и кошка и киви все находятся в резиновых блоках. Но резина весьма условная, так как высота родительского блока у нас фиксированная
Уберу-ка я у блоков flex-grow и flex-basis и добавлю цвет колонке
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<div class="block" style="">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
получится так
и теперь воспользуюсь невероятной возможностью выравнивать содержимое внутри блока. Для этого есть свойство, которое именуется align-items, для блока-колонки она определяет, как выравниваются блоки внутри по горизонтали.
По умолчанию оно имеет значение stretch (что переводится как растянуть)
.column {
align-items: stretch; /* добавил, прописал значение по умолчанию*/
display: flex;
flex-direction: column;
}
и соответственно меняя его я могу менять то, как будут выравниваться блоки по горизонтали внутри:
Например align-items: flex-start;
или align-items: center;
или в конец если хочу загнать align-items: flex-end;
но самая радость появляется что мы можем управлять положением блоков не только по горизонтали, но и по вертикали. Для этого используется свойство justify-content. По умолчанию оно имеет значение flex-start, то есть выравнивать по верху блока
.column {
justify-content: flex-start; /* добавил */
align-items: flex-end;
display: flex;
flex-direction: column;
}
но я могу так же попросить его выравнивать по центру
.column {
justify-content: center; /* поменял на center */
align-items: flex-end;
display: flex;
flex-direction: column;
}
а если еще и align-items: center; сделать:
можно и вниз опустить
.column {
justify-content: flex-end; /* поменял на flex-end */
align-items: center;
/* ... */
}
еще есть интересный режим который равномерно распределяет расстояние между блоками, почти как flex-grow только блоки занимают ровно столько места сколько им надо:
.column {
justify-content: space-between; /* поменял на space-between */
align-items: center;
/* ... */
}
есть еще такой:
.column {
justify-content: space-around; /* поменял на space-around */
align-items: center;
/* ... */
}
и такой:
.column {
justify-content: space-evenly; /* поменял на space-evenly */
align-items: center;
/* ... */
}
используя эти свойства можно быстро и красиво выровнять содержимое любого блока.
Естественно одна колонка — это не очень интересно, и намного интереснее объединять колонки в строчки. Используя уже знакомый нам горизонтальный флекс.
Допустим хочу я три колонки в ряд, сначала я просто скопирую блок с колонкой три раза:
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
он мне все три колонки положит в одну мега колонк (то есть каждая колонка окажется под следующей), потому что это стандартное поведение div блоков, и по сути я получу колонку в три раза выше.
Чтобы поставить колонки в строчку я оберну все в обыкновенный flex блок, вот так
<div style="display: flex;">
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
</div>
и ура, теперь три колонки в ряд:
каждой колонке я могу указать как размещать блоки в ней
<div style="display: flex;">
<div class="column" style="justify-content: flex-start; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="align-items: stretch; justify-content: space-evenly; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="align-items: flex-end; justify-content: flex-end; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
</div>
вот так получится
на большом экране они скорее всего займут не всю строчку
если ты хочешь, чтобы они растягивались на всю ширину, просто добавь свойство flex-grow: 1 каждой колонке. Я еще цвет каждой поменял тут чтобы лучше видно было
<div style="display: flex;">
<div class="column" style="flex-grow:1; justify-content: flex-start; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="flex-grow:1; align-items: stretch; justify-content: space-evenly; height:300px; background-color: rgb(126, 171, 255);">
<!-- ... -->
</div>
<div class="column" style="flex-grow:1; align-items: flex-end; justify-content: flex-end; height:300px; background-color: rgb(171, 147, 255);">
<!-- ... -->
</div>
</div>
колонки ведут себя так же как обыкновенные блоки. То есть я могу попросить вторую колонку стать в два раза толще других, если укажу ей flex-grow: 2
<div style="display: flex;">
<div class="column" style="...">
<!-- ... -->
</div>
<div class="column" style="flex-grow:2; align-items: stretch; justify-content: space-evenly; height:300px; background-color: rgb(126, 171, 255);">
<!-- ... -->
</div>
<div class="column" style="...">
<!-- ... -->
</div>
</div>
тут опять распределится именно пустое пространство, если хочешь чтобы было четко, то добавляешь flex-basis: 0
<div style="display: flex;">
<div class="column" style="flex-basis: 0; ...">
<!-- ... -->
</div>
<div class="column" style="flex-basis: 0; flex-grow:2; ...">
<!-- ... -->
</div>
<div class="column" style="flex-basis: 0; ...">
<!-- ... -->
</div>
</div>
хошь конкретные размеры, прописываешь в пикселях в свойство flex-basis, попутно убирая flex-grow:
<div style="display: flex;">
<div class="column" style="flex-basis: 100px; justify-content: flex-start; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="...">
<!-- ... -->
</div>
<div class="column" style="...">
<!-- ... -->
</div>
</div>
в общем все как обычно, прямо как в прошлой задачке. Ну все можно пилить задачку =)
Картинку вставляют через тег img, вот так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="" alt="">
</body>
</html>
собственно, у него одно главное свойство это src, в которую можно вставить ссылку на любую картинку.
Ссылку в браузере можно получить очень легко, если тыкнуть на любую картинку и выбрать
и дальше скопированное значение вставить в атрибут src
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
правда она немедленно займет ровно столько места сколько ей нужно:
поэтому по-хорошему размеры картинок лучше ограничивать используя те же стили. Например, я могу сказать, чтобы высота картинки была ровно 250px
<img style="height: 250px" src="..." alt="">
и получится уже так
так как картинка — это обыкновенный блок, то ее можно стилизовать как угодно, например, добавить тень или границу
<img class="main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
<style>
.main-image {
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
}
</style>
Вообще, чтобы сделать квадратную картинку, в идеале нужно чтобы и исходник был квадратный. Можно конечно попробовать указать свойство width равное height вот так
<style>
.main-image {
height: 250px;
width: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
}
</style>
но тогда у картинки поползут пропорции
в общем самый универсальный способ, которые работает и для квадратных и для прямоугольных картинок – это положить картинку в квадратный блок:
<div class="main-image-wrapper"> <!-- обернули в блок -->
<img class="main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
</div>
<style>
/* в блок перенесли все свойства из main-image */
.main-image-wrapper {
width: 250px;
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
}
.main-image {
height: 100%; /* тут поставили такое свойство, чтобы картинка по высоте равнялась высоте обертки */
}
</style>
Чет не работает… если присмотреться, то видно, что на заднем фоне появилась квадратная тень, но картинка то все равно не квадратная
Тут проблема в том, что картинка вылазит за границы блока, а блок ее никак не ограничивает.
Чтобы ничего не вылезало, есть волшебное свойство overflow: hidden, которое отключает отрисовку кусков изображений (да и не только изображений), которые вылазят за границы.
<style>
.main-image-wrapper {
width: 250px;
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
overflow: hidden; /* добавил */
}
.main-image {
height: 100%;
}
</style>
Чтобы сделать круглую картинку надо чтобы она была квадратная, либо внутри квадратного блока. Это у нас уже готово.
Есть свойство border-radius в котором указывается радиус закругления краев блока. Мы туда пока пихали только пиксельные размер, а если поставить туда значение 50% то радиус закругления будет равен половине стороны квадраты и получится круг, вот так:
<style>
.main-image-wrapper {
width: 250px;
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 50%; /* поставил 50% */
overflow: hidden;
}
.main-image {
height: 100%;
}
</style>
все это можно обернуть во flexы и получить что-нибудь красивое
<div style="display: flex; justify-content: center;">
<div style="display: flex; flex-direction: column; align-items: center;">
<div class="main-image-wrapper">
<img class="main-image" src="..." alt="">
</div>
<div style="font-size: 2em;">Зима</div>
<div style="font-size: 1em;">близко</div>
</div>
</div>
вот и вся наука)
В fontawesome есть встроенная поддержка крутящихся иконок, прочитать подробнее можно тут: https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons в общем если хочется добавить крутящуюся иконку то делается это так:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<!-- Добавил ссылку на font-awesome, а тож не было -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
<div style="display: flex; justify-content: center;">
<div style="display: flex; flex-direction: column; align-items: center;">
<div class="main-image-wrapper">
<img class="main-image" src="..." alt="">
</div>
<!-- вставил иконку, и добавил к ней класс fa-spin чтобы она крутилась -->
<div style="font-size: 2em;">Зима <i class="fas fa-cog fa-spin"></i></div>
<div >близко </div>
</div>
</div>
Сегодня поверстаем фиксированную менюшку. Которая весит вверху окна и никуда не пропадает.
Начнем сначала просто с достаточно длинного текста. Если ты работаешь с большим окном, просто продублируй текст:
В лесу родилась ёлочка,<br>
В лесу она росла.<br>
Зимой и летом стройная,<br>
Зелёная была.<p>
Метель ей пела песенку:<br>
«Спи, ёлочка, бай-бай!»<br>
Мороз снежком укутывал:<br>
«Смотри, не замерзай!»<p>
Трусишка зайка серенький<br>
Под ёлочкой скакал.<br>
Порою волк, сердитый волк,<br>
Рысцою пробегал.
теперь попробуем добавить блок меню
<div class="menu">
Менюшка
</div>
<!-- тут длинный текст --!>
<style>
.menu {
width: 100%;
border: 1px silver solid;
box-shadow: 0 0 4px silver;
box-sizing: border-box;
padding: 1em;
}
</style>
пока не очень похоже на менюшку. Первая проблема в том, что есть отступы от края окна. Чтобы убрать отступы надо подкорректировать стиль тега body
<style>
body {
margin: 0;
padding: 0;
}
.menu {
/* ... */
}
</style>
так теперь сделаем чтобы границы была только внизу:
<style>
body {
/* ... */
}
.menu {
width: 100%;
border-bottom: 1px silver solid; /* поменял border на border-bottom*/
box-shadow: 0 0 4px silver;
box-sizing: border-box;
padding: 1em;
}
</style>
теперь обернем текст также в блок:
<div class="menu">
Менюшка
</div>
<div class="content"> <!-- обернул-->
В лесу родилась ёлочка,<br>
В лесу она росла.<br>
Зимой и летом стройная,<br>
Зелёная была.<p>
Метель ей пела песенку:<br>
«Спи, ёлочка, бай-бай!»<br>
Мороз снежком укутывал:<br>
«Смотри, не замерзай!»<p>
Трусишка зайка серенький<br>
Под ёлочкой скакал.<br>
Порою волк, сердитый волк,<br>
Рысцою пробегал.
</div>
и добавим стиль с padding в класс:
<style>
body {
/* ... */
}
.menu {
/* ... */
}
.content {
padding: 1em;
}
</style>
вот так получится
правда менюшка не держится.
Для того, чтобы заставить блок оставаться на месте есть специально свойство position. Добавим его:
<style>
body {
/* ... */
}
.menu {
/* ... */
position: fixed; /* добавили свойство, фиксированная позиция */
}
.content {
/* ... */
}
</style>
вах, что получается:
так, менюшка зафиксировалась, это хорошо. Но сразу видим первую проблему, меню прозрачное. Добавим цвета:
<style>
body {
/* ... */
}
.menu {
/* ... */
background-color: white; /* добавили цвет */
}
.content {
/* ... */
}
</style>
уже симпатичнее. Осталась вторая проблема, меню перекрывает текст.
На самом деле это совсем не проблема. Решают ее очень просто. Добавляя отступ сверху блоку content:
<style>
body {
/* ... */
}
.menu {
/* ... */
}
.content {
padding: 1em;
/* добавил отступ сверху, 4em потому что 1em -- высота строки, */
/* 1em+1em две строки padding сверху снизу в menu и 1em отступ текста от менюшки, */
/* можно указать значение в пикселях, 1em = 16px, то есть можно указать 64px, либо вообще подогнать на глаз */
padding-top: 4em;
}
</style>
вот теперь красота
И все, собственно менюшка хотя и фиксированная она все равно обыкновенный блок, можно пихать туда внутрь обыкновенные flex строки. Например, попробовать что-то похожее на менюшку инсты замутить:
<div class="menu">
<div style="display: flex; justify-content: space-between;">
<div style="flex-grow: 1; flex-basis: 0;" >
<img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="">
</div>
<div style="flex-grow: 1; flex-basis: 0; text-align: center;" >Поиск</div>
<div style="flex-grow: 1; flex-basis: 0; ; text-align: right;" >
<i class="fas fa-user"></i>
<i class="fas fa-cat"></i>
</div>
</div>
</div>
немного подправим стили:
<style>
body {
/* ... */
}
.menu {
/* ... */
padding-bottom: 0.5em; /* чуток подкорректировал отступ снизу, чтобы красивее смотрелось */
}
.content {
padding: 1em;
padding-top: 80px; /* так как лого инсты растянула меню, то и отступ содержимого увеличиваем */
}
</style>
о как:
Если мы доживем до javascript, то нам понадобятся поля для ввода. Поэтому попытаемся добавить поле для ввода, в которое можно будет что-то вписать.
Для этого используется тег input
<div class="menu">
<div style="display: flex; justify-content: space-between;">
<div style="flex-grow: 1; flex-basis: 0;" >
<!-- ... -->
</div>
<div style="flex-grow: 1; flex-basis: 0; text-align: center;" >
<input class="search"> <!-- добавили, и сразу класс какой-нибудь приклеим -->
</div>
<div style="flex-grow: 1; flex-basis: 0; ; text-align: right;" >
<!-- ... -->
</div>
</div>
</div>
так как input это просто блок в который можно только чего-то вписать его так же можно стилизовать:
<style>
/* ... */
.search {
border-radius: 3px;
background-color: #fafafa;
color: rgb(153, 153, 153);
border: 1px solid rgb(223, 223, 223);
height: 24px;
}
</style>
вот уже более похоже на настоящий
единственное при фокусе, в зависимости от браузера может появляется черная рамочка:
чтобы ее не было, надо добавить свойство outline: none
<style>
/* ... */
.search {
/* ... */
outline: none;
}
</style>
вообще, чтобы сделать как в инсте надо еще и скрипты использовать, поэтому мы не будем ее дергать. Просто добавим иконку лупы в правом углу инпута.
Так как input это особый тег в него нельзя просто взять и запихать внутрь иконку (хотя вообще можно, но не рекомендуется). Поэтому корректный способ — это обернуть input блоком:
<div class="menu">
<div style="display: flex; justify-content: space-between;">
<!-- ... -->
<div style="flex-grow: 1; flex-basis: 0; text-align: center;" >
<div> <!-- обернул -->
<input class="search"></input>
</div>
</div>
<!-- ... -->
</div>
</div>
добавить иконку
<div class="menu">
<div style="display: flex; justify-content: space-between;">
<!-- ... -->
<div style="flex-grow: 1; flex-basis: 0; text-align: center;" >
<div>
<input class="search"></input>
<i class="fa fa-search"></i> <!-- добавил -->
</div>
</div>
<!-- ... -->
</div>
</div>
получится такое безобразие:
можно попробовать сделать flex строку:
<div class="menu">
<div style="display: flex; justify-content: space-between;">
<!-- ... -->
<div style="flex-grow: 1; flex-basis: 0; text-align: center;" >
<div style="display: flex;"> <!-- превратил обертку в flex -->
<input class="search"></input>
<i class="fa fa-search"></i>
</div>
</div>
<!-- ... -->
</div>
</div>
если красиво выровнять, то вполне рабочее решение:
<div class="menu">
<div style="display: flex; justify-content: space-between;">
<!-- ... -->
<div style="flex-grow: 1; flex-basis: 0; text-align: center;" >
<div style="display: flex; align-items: center;"> <!-- поправил стиль -->
<input class="search"></input>
<i style="margin-left: 1em;" class="fa fa-search"></i> <!-- добавил стиль -->
</div>
</div>
<!-- ... -->
</div>
</div>
но если все-таки хочется иконку именно внутрь запихать (а я хочу ее в правый угол инпута запихать), то надо воспользоваться снова свойством position. Только уже с другим значением. А именно значением absolute. Если position: fixed устанавливает строгое положение элемента на экране и не учитывает скроллинг, то свойство position: absolute закрепляет элемент относительно других элементов.
Теперь поставим position: absolute
<div style="display: flex; align-items: center;">
<input class="search"></input>
<i style="margin-left: 1em; position: absolute;" class="fa fa-search"></i> <!-- добавил стиль -->
</div>
уберем margin:
<div style="display: flex; align-items: center;">
<input class="search"></input>
<i style="position: absolute;" class="fa fa-search"></i>
</div>
как видим блок уехал в самое начало
Вообще этот position: absolute весьма непредсказуем, но по идее, чтобы попросить блок встать в правый край, надо установить свойство right: 0, ну типа правая граница блока встань на расстояние ноль от правого края:
<div style="display: flex; align-items: center;">
<input class="search"></input>
<i style="position: absolute; right: 0;" class="fa fa-search"></i>
</div>
и он встанет, правда почему-то относительно всего окна:
на самом деле это стандартное поведение этого свойства, если поставить ему свойство left: 0
<div style="display: flex; align-items: center;">
<input class="search"></input>
<i style="position: absolute; left: 0;" class="fa fa-search"></i>
</div>
то уедет влево экрана:
можно еще вертикальные значения поюзать, и даже попробовать в пикселях значения указывать:
<div style="display: flex; align-items: center;">
<input class="search"></input>
<i style="position: absolute; left: 100px; top: 50px" class="fa fa-search"></i>
</div>
это конечно здорово, но совсем не то что нам надо. А мы хотим на самом деле все-таки привязаться к правой границе:
<div style="display: flex; align-items: center;">
<input class="search"></input>
<i style="position: absolute; right: 0;" class="fa fa-search"></i>
</div>
но только чтобы за правую границу считалась правая граница инпута. Для этого сделаем две вещи. Сначала укажем обертке, чтобы она стала базовым контейнером для расчета absolute значения. Это делается путем добавления свойства position: relative
<div style="display: flex; align-items: center; position: relative"> <!-- добавил !-->
<input class="search"></input>
<i style="position: absolute; right: 0;" class="fa fa-search"></i>
</div>
получится так
На самом деле иконка выравнивается по краю обертки инпута:
Таким образом если мы хотим, чтобы иконка оказалась поверх инпута, надо растянуть инпут на всю ширину обертки:
<div style="display: flex; align-items: center; position: relative">
<input class="search" style="width: 100%;"></input> <!-- добавил width !-->
<i style="position: absolute; right: 0;" class="fa fa-search"></i>
</div>
о как:
добавим небольшой отступ иконки справа:
<div style="display: flex; align-items: center; position: relative">
<input class="search" style="width: 100%;"></input>
<i style="position: absolute; right: 8px;" class="fa fa-search"></i> <!-- поменял right !-->
</div>
красота:
можем контролировать размер инпута, если нам не нравится, что он резиновый, меняя width у обертки:
<div style="display: flex; align-items: center; position: relative; width: 150px"> <!-- добавил width !-->
<input class="search" style="width: 100%;"></input>
<i style="position: absolute; right: 8px;" class="fa fa-search"></i>
</div>
Это тема такая на самом деле специфическая, эти всякие position, но если разобраться позволяет делать интересные шутки.