https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
Каскад таблицы стилей, означает, что порядок следования правил в CSS имеет значение;
h1 {
color: red;
}
h1 {
color: blue;
}<h1>This is my heading.</h1>Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу.
.main-heading {
color: red;
}
h1 {
color: blue;
}<h1 class="main-heading">This is my heading.</h1>Некоторые значения свойства CSS, установленные для родительских элементов наследуются их дочерними элементами, а некоторые нет.
Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это "включает наследование".
Устанавливает значение свойства, применённого к выбранному элементу, равным initial value этого свойства (в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)
Чтобы понять ключевое слово initial, мы должны помнить важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером.
Ключевое слово initial говорит браузеру использовать значение по умолчанию для заданного CSS-свойства. Например, для свойства color значение initial всегда будет black.
Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как inherit, иначе оно действует как initial.
3 фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.
- Порядок следования
- Специфичность
- Важность (!important)
https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model
https://codepen.io/alexps2/embed/ExLWoev
В CSS два типа элементов — блочные и строчные.
Если элемент определён как блочный, то он будет вести себя следующим образом:
- Начнётся с новой строки.
- Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что блок станет такой же ширины, как и его контейнер, заполняя 100% доступного пространства.
- Будут применяться свойства width и height.
- Внешние и внутренние отступы, рамка, будут отодвигать от него другие элементы.
Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, <h1>) и <p>, все используют block как свой внешний тип отображения по умолчанию.
Если элемент имеет тип отображения inline (строчный), то:
- Он не будет начинаться с новой строки.
- Свойства width и height не будут применяться.
- Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.
- Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.
Элемент <a>, используемый для ссылок, <span>, <em> и <strong> — всё это примеры по умолчанию строчных элементов.
Использование display: inline-block
Существует особое значение display, которое представляет собой золотую середину между inline и block. Это полезно в ситуациях, когда вы не хотите, чтобы элемент переносился на новую строку, но нужно, чтобы он применял width и height и избегал перекрытия, показанного выше.
Элемент с display: inline-block применяет ряд свойств блочного элемента, о которых мы уже знаем:
- Применяются свойства width и height.
- Использование padding, margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.
- Он не перенесётся на новую строку и станет больше, чем его содержимое, только если вы явно зададите свойства width и height.
Каждый блок в CSS имеет внешний тип отображения, который определяет, блочный он или строчный и внутренний тип отображения, который определяет расположение элементов внутри них.
Если мы установим display: flex; для элемента, внешний тип отображения примет значение block, но внутренний тип изменится на flex.
Любые прямые дочерние элементы этого блока станут flex-объектами
Содержимое: область, где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как width и height.
Внутренний отступ: отступы располагаются вокруг содержимого в виде пустого пространства; их размер контролируется с помощью padding и связанных свойств.
Рамка: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью border и связанных свойств.
Внешний отступ: внешний слой, заключающий в себе содержимое, внутренний отступ и рамки, представляет собой пространство между текущим и другими элементами. Его размер контролируется с помощью margin и связанных свойств. (Внешний отступ не считается в фактическом размере объекта.)
Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью.
Блочная модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице.
box-sizing: content-box;
В стандартной блочной модели, если указать элементу атрибуты width и height, это определит ширину и высоту содержимого. Любые отступы и рамки затем добавляются к этой ширине и высоте для получения общего размера элемента.
Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно 410px в ширину (350 + 25 + 25 + 5 + 5) и 210px в высоту (150 + 25 + 25 + 5 + 5), поскольку отступы и рамки добавляются к размерам поля содержимого.
box-sizing: border-box;
При использовании альтернативной модели любая ширина — это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина рамки и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}прочитать https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
- Внешний отступ — это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него.
- Может быть как положительным, так и отрицательным.
- Негативное значение может привести к перекрытию некоторых элементов страницы.
- Независимо от того, используете ли вы стандартную или альтернативную блочную модель, внешний отступ всегда добавляется после расчёта размера видимого блока.
margin: top right bottom left
margin: 10px 0;
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
margin: 0 10px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
margin: 0 10px 0;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
margin: 0 0 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;Если у вас есть два элемента, внешние отступы которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения отрицательны, то сумма отрицательных значений будет вычтена из общей суммы.
Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны). Это поведение известно как схлопывание внешних отступов (margin collapsing).
Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.
Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0.
Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.
Рамка располагается между margin и padding блочного элемента
Если вы используете стандартную блочную модель, размер рамки прибавляется к значениям width и height элемента.
Если вы используете альтернативную блочную модель, то размер рамки уменьшает поле контента своего блока, так как значения рамки входят в заданные ему width и height.
border: 1px solid red;
border-width: 1px;
border-style: solid; none|hidden|dotted|dashed|double|groove|ridge|inset|outset
border-color: red;https://codepen.io/alexps2/embed/XWqMVxR
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
font-size: 24px;1em – в типографике относительная единица длины, равная размеру текущего шрифта
Размеры в em – относительные, они определяются по текущему контексту.
rem (как и em) относительная единица измерения.
rem — это единица измерения, относительно размеров корневого элемента («r» в rem означает: root).
Относительные единицы предпочтительнее пикселей, потому что они учитывают предпочтения пользователя и настройки его браузера. Браузер позволяет пользователю изменить размер шрифта по умолчанию. Это значение применяется к размеру шрифта по умолчанию для корневого элемента. Поскольку rem вычисляется относительно размера основного шрифта, то размеры, указанные в rem будут пропорционально масштабироваться.
vw – 1% ширины окна
vh – 1% высоты окна
vmin – наименьшее из (vw, vh) - если высота окна браузера меньше ширины, 1 vmin будет равен 1 vh. Если ширина браузера меньше его высоты, 1 vmin равен 1 vw.
vmax – наибольшее из (vw, vh) - Если ширина браузера больше его высоты, 1 vmax равен 1 vw. Если высота браузера больше ширины, 1 vmax равен 1 vh.
Проценты %, как и em – относительные единицы.
Процент будет от значения свойства родителя с тем же названием, но не всегда.
font-size - процент берётся от размера шрифта родителя.
line-height - процент берётся от текущего размера шрифта
Для width/height обычно процент от ширины/высоты родителя
fractional unit - единица гибкости
https://codepen.io/alexps2/embed/bGMqajX
Flexbox разметка в CSS даёт один из наиболее эффективных способов расстановки, выравнивания и распределения места между элементами внутри контейнера, даже если их размер неизвестен или динамичен (собственно, по этому его и называют flex, от слова flexible, что по-английски имеет двойственное значение — гибкий и уступчивый, что очень сочетается с моделью поведения flexbox).
Основной целью flexbox является предоставление возможности изменения своих элементов по ширине и высоте, для того, чтобы они максимально эффективно умещались в доступном месте родительского контейнера, в частности — это удобно в тех случаях, когда нужно соответствовать всем типам дисплеев устройств и размерам экранов.
Flex контейнер расширяет вложенные элементы для того, чтобы заполнить доступное пространство или же урезает их, чтобы избежать переполнения.
Элементы в flexbox могут располагаться вдоль основной оси (от main-start до main-end) или же вдоль поперечной оси (от cross-start до cross-end).
Main axis — основная ось flex контейнера, вдоль которой располагаются flex элементы.
может быть гор. или вертикальной
Main-start | main-end — Flex элементы расположены в рамках контейнера, начиная от main-start и заканчивая main-end.
Main-size — высота или ширина flex элемента, что зависит от того, в каком направлении идёт основная ось.
Cross axis — ось перпендикулярная главной оси, называется поперечной. Её направление зависит от направления главной оси.
Cross-start | cross-end — flex линии, заполненные элементами и расположенные в контейнере от cross-start до cross-end.
Cross-size — Ширина или высота flex-элемента, в зависимости от направления главной оси.
display: flex | inline-flex
создаем flex контейнер - инлайновый или блочный
flex-direction: row | row-reverse | column | column reverse;
Устанавливает направление главной оси и определяет направление flex элементов размещенных в flex контейнере.
- row (стандартное положение) — слева направо.
- row-reverse — элементы располагаются справа налево.
- column — тоже самое, что и row, только сверху вниз.
- column-reverse — тоже самое, что и row-reverse, но снизу вверх.
flex-wrap: wrap | nowrap | wrap-reverse
Изначально все flex-элементы будут пытаться уместиться в одну строку.
- nowrap — это значение по-дефолту, при котором все flex элементы будут выстраиваться в одну линию.
- wrap — flex элементы будут переноситься на несколько строк, от верха к низу.
- wrap-reverse — flex элементы будут переноситься на несколько строк снизу вверх.
flex-flow (shorthand for flex-direction and flex wrap)
Это сокращение flex-direction и flex-wrap свойств, которые вместе определяют направление главной и поперечной оси.
По-дефолту оно имеет значение row nowrap.
justify-content: flex-start | flex-end | center | space between | space-around | space-evenly;
Свойство определяет выравнивание вдоль главной оси.
- flex-start — дефолтное состояние, при котором элементы расставляются от начала строки.
- flex-end — состояние, в котором элементы размещены с конца строки.
- center — элементы центрированы вдоль строки.
- space-between — элементы равномерно распределены по строке, первый элемент находится вначале строки, последний в конце.
- space-around — элементы равномерно распределены по строке с равным местом вокруг них. Учтите, что визуально пробелы не равномерны, так как все элементы имеют одинаковые пробелы с двух сторон. Первый элемент получит одну единицу свободного места от границы контейнера, но получит две единицы свободного места от следующего элемента, так как у него тоже есть одна единица свободного места с каждой из сторон.
- space-evenly — элементы распределены таким образом, что свободное пространство между любыми двумя элементами равномерно, как и место до границы края контейнера.
align-items: flex-start | flex-end | center | baseline | stretch;
Это свойство определяет стандартное поведение того, как flex элементы будут располагаться вдоль поперечной оси на заданной строке. Это своебразная версия justify-content, но только для поперечной оси, которая перпендикулярна главной.
- flex-start — всё размещается с начала поперечной оси
- flex-end — все элементы размещаются с конца поперечной оси
- center — элементы центрируются по поперечной оси
- baseline — элементы выравниваются по базовой линии
- stretch — это дефолтное состояние, при котором элементы заполяют контейнер, с учетом min-width и max-width.
align-content (cross axis - adjust to largest item):
flex-start | flex-end | center | stretch | space between | space-around
Это свойство выравнивает и распределяет строки контейнера, когда есть свободное пространство в поперечной оси, подобно тому как justify-content, оно выравнивает элементы по главной оси.
Учтите, что это свойство не приности эффекта, когда есть только одна строка flex элементов.
- flex-start — строки расположены от начала контейнера.
- flex-end — строки расположены от конца контейнера.
- center — строки расположены от центра контейнера.
- space-between — строки равномерно распределены, первая строка находится вначале контейнера, тогда как последняя находится в конце.
- space-around — строки равномерно распределены с равным местом вокруг каждой строки.
- stretch — стандартное состояние, при котором строки растягиваются на вся оставшееся место.
order
По-дефолту, флекс элементы располагаются в исходном порядке 1, 2, 3 и т.д. Однако, свойство order контролирует порядок в котором элементы могут располагаться.
flex-grow
Это свойство определяет способность flex элемента при необходимости становится больше.
Оно указывает какое количество свободного места внутри контейнера элемент должен взять.
flex-shrink
Это свойство определяет способность flex элемента сокращаться при необходимости.
flex-basis
Это свойство определяет стандартный размер элемента, перед тем как оставшееся место будет распределено.
flex-basis: размер flex-элементов перед тем, как они разместятся в контейнере.
flex-basis ограничивается min-width и max-width.
Если flex-basis не указан, то он опирается на свойство width этого же элемента. А если уже и width не указан, то flex-basis опирается на ширину, посчитанную по контенту.
flex: shorthand for grow, shrink, and basis (default: 0 1 auto)
Это сокращение для flex-grow, flex-shrink и flex-basis — все вместе взятые. Второй и третий параметры опциональны, то есть flex-shrink и flex-basis. По-дефолту оно имеет значение 0 1 auto.
align-self: overrides alignment set on parent
Это свойство позволяет стандартному выравниванию (или если точно align-items) элементов, быть перезаписанному для определенного flex элемента.
margin: Если вы применяете автоматические внешние отступы на flex-элементе, то этот элемент автоматически заберет в отступ все дополнительное свободное пространство контейнера, в зависимости от направления, в котором применяется auto-margin.
https://codepen.io/alexps2/embed/LYmWegd
CSS Grid - двумерная систему сеток в CSS.
Grid шаблон работает по системе сеток. Grid это набор пересекающихся горизонтальных и вертикальных линий
display: grid
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1f;
grid-template-columns: 100px 250px 500px;
grid-column: 1 / 5;
(
grid-column-start: 1;
grid-column-end: 5;
)
grid-column: 5 / 13;
(
grid-column-start: 4;
grid-column-end: 13;
)
grid-column: span 4 / span 4;
grid-column: span 8 / span 8;В шаблоне созданном на гридах есть такие значения, как auto-fill и auto-fit, которые позволяют вам создавать грид с множеством треков определенного размера, которые будут помещаться в указанном контейнере. Это говорит о том, что грид является адаптивным, то есть в нем элементы меняют свои позиции с тем, как вы меняете размер окна браузера.
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
Использование auto-fill заставит треки повторяться такое количество раз, пока они не заполнят контейнер.
auto-fit работает практически также, как и auto-fill. Разница тут только в том, что auto-fit стягивает все пустые треки в конце размещения, в то время как auto-fill нет. Лучший способ тут, это демонстрация со сравнение
Auto-fill оставляет пустые треки в конце по указанным размерам, а auto-fit растягивает пустой трек, что ведёт к заполнению треков растянутыми элементами для заполнения пространства.
Явный грид — это грид, который вы определяете в grid-template-rows, grid-template-colums и в grid-template-areas.
Неявные гриды автоматически генерируются самим грид-контейнером всякий раз когда грид-элементы располагаются за пределами явного грида. Контейнер генерирует неявные грид треки, добавляя неявные строки в грид.
Неявный грид использует grid-auto-rows и grid-auto-columns
grid-auto-flow: row | column;
Это свойство позволяет указывать, что нужно использовать для авто-размещения элементов, строки или колонки.
dense, которое может помочь в создании компактного грида и предостеречь от больших пробелов между грид-элементами в случае непоследовательных размеров всех грид-элементов в контейнере. Применение этого значения приведет к тому, что элементы будут показываться не по порядку, так как последующие элементы могут вернуться назад в порядке и заполнить пробелы, которые появлялись ранее, но это не подходит для каждой ситуации.
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://codepen.io/alexps2/embed/xxjqpQP
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Свойство определяет, как элемент позиционируется в документе. Свойства top, right, bottom, left, определяют расположение позиционируемых элементов.
position =
static |
relative |
absolute |
sticky |
fixed |static
Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу.
relative
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static.
Это значение создаёт новый контекст наложения, когда значение z-index не auto.
absolute
Элемент удаляется из обычного потока документов. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он размещается относительно исходного содержащего блока.
https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
Его конечная позиция определяется значениями top, right, bottom, и left.
Это значение создаёт новый контекст наложения, когда значение z-index не auto.
fixed
Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство.
sticky
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left
Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto) внутри его корня потока (или в контейнере, в котором он прокручивается)
Липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком.
https://developer.mozilla.org/ru/docs/Web/CSS/z-index
свойство z-index определяет положение позиционированного элемента и его дочерних элементов или флекс-элементов по оси z. Перекрывающие элементы с большим значением z-index будут накладываться поверх элементов с меньшим z-index.
Контекст наложения (stacking context) это концепция трёхмерного расположения HTML-элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML-элементы занимают это место по порядку, основанному на атрибутах элемента.
https://codepen.io/alexps2/embed/QWrpaJb
https://codepen.io/alexps2/embed/eYrvyQg
Свойство overflow определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.
overflow: auto;
overflow: hidden;
overflow: visible;
overflow: scroll;
overflow-x: auto;
overflow-y: auto;visible
По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
hidden
Контент обрезается, без предоставления прокрутки.
scroll
Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
auto
Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.
max-width
Свойство CSS max-width устанавливает максимальную ширину элемента. Оно предотвращает используемое значение свойства width от становления больше, чем значение, указанное для max-width.
min-width
Свойство CSS min-width устанавливает минимальную ширину элемента. Оно предотвращает используемое значение свойства width от становления меньше, чем значение, указанное для min-width.
max-height
Свойство CSS max-height устанавливает максимальную высоту элемента. Оно предотвращает используемое значение свойства height от становления больше, чем значение, указанное для max-height.
min-height
Свойство CSS min-height устанавливает минимальную высоту элемента. Оно предотвращает используемое значение свойства height от становления меньше, чем значение, указанное для min-height.
max-height перекрывает height, но min-height перекрывает max-height.
font-family: font-sans font-serif font-mono
Моноширинный, или непропорциональный шрифт, — шрифт, в котором все знаки имеют одинаковую ширину.
font-family: Arial
font-family: "Times New Roman"
font-family: monospace
font-family: Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: monospace
font-family: Roboto, Arial, sans-serifhttps://codepen.io/alexps2/embed/rNvyJYd
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
https://moderncss.dev/totally-custom-list-styles/
https://yoksel.github.io/url-encoder/
https://codepen.io/alexps2/embed/oNdZpPd
https://developer.mozilla.org/ru/docs/Web/CSS/calc
calc() - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения.
https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties
CSS переменные (пользовательские CSS-свойства) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе.
Они устанавливаются с использованием custom property нотации (например. --main-color: black;) и доступны через функцию var() (например. color: var(--main-color);)
:root {
--color-primary: red;
}
.heading {
--width: 100px;
color: var(--color-primary);
}
.heading__item{
--gap: calc((var(--width) + 100px);
width: var(--gap);
}<div class="heading">
<div class="heading__item"></div>
</div>https://css-tricks.com/couple-takes-sticky-footer/
https://npofizika.ru/dokumenty-i-sertifikaty
https://codepen.io/alexps2/embed/BaxWJqg
https://codepen.io/alexps2/embed/Rwypxeq
Псевдоклассы
https://developer.mozilla.org/ru/docs/Web/CSS/Pseudo-classes
Разница между width и flex-basis
Вёрстка на Flexbox в CSS. Полный справочник
Всё о магии отступов в CSS Flexbox
Мистический inline-flex и что он делает
Плиточная раскладка на CSS Flexbox с помощью order и :nth-child()
Вертикальное и горизонтальное центрирование всего и вся в CSS Flexbox
Как работает Flex-grow в CSS. Подробное руководство
Как работает flex-shrink в CSS. Подробное руководство
Что такое единица гибкости fr в CSS, доступным и простым языком
Вёрстка на Grid в CSS. Полное руководство и справочник
Поразительный CSS Grid Area
Как работают auto-fill и auto-fit в CSS Grid
Правильно используем CSS Grid
Блочный контекст форматирования
https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Block_formatting_context
Селекторы:
https://code.tutsplus.com/ru/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Про центрирование
https://moderncss.dev/resource-the-complete-guide-to-centering-in-css/
https://www.figma.com/file/iI4TMmMO1XKcw608G9GA8b/Project
Сверстать шаблон по фигме
в меню повесить hover эффект, при наведении на др пункты
Шрифт - Roboto
- Regular - 400
- Medium - 500
- Bold - 700
figma
ctrl+f4 - показать\скрыть сетку
Validator
проверить верстку в валидаторе