У каждого селектора есть свой вес в CSS
Теги == p, a == 10%
Классы == .menu == 30%
Атрибуты == [type="text"] == 40%
Псевдоклассы == :hover == 40%
ID == #container == 70%
Инлайность == style="" == 90%
!important == == 100%

я не скажу как его использовать и ткд
потому что его редко когда используют но и
ЕГО НУЖНО ИСПОЛЬЗОВАТЬ ОСТОРОЖНО
а лучше вообще не использовать

#cssВес

Свойство | Значение | Что делают
—————————————————
color |red, #333, rgb(0, 0, 0) | меняет цвет текста
backround-color| —||— | меняет фон
у background много значение и свойств

background: [цвет] [изображение] [позиция] / [размер] [повторение] [привязка] [начальное положение];
Пример
background: url('bg.jpg') no-repeat center/cover fixed;

| Свойство | Что делает
| `background-color` | Цвет фона |
| `background-image` | Картинка (`url('image.jpg')`) |
| `background-repeat` | Повтор: `repeat`, `no-repeat`, `repeat-x`, `repeat-y`|
| `background-position` | Положение: `center`|
| `background-size` | Размер: `cover`, `contain`, `100px 200px` |
| `background-attachment` | Прокрутка: `scroll`, `fixed`|
| `background-origin` | Откуда считать фон|
| `background-clip` | Где обрезать фон|

используют или первые 5 отдельно
или просто background: ;
#стили1

Свойство | Значение | Что делают
—————————————————
|font-size: 24px; | размер текста
|font-family: normal; шрифт
|font-weight: 700; жирность текста
|text-align: center; размещение текста
|width: 100px; ширина
|height: 100px; высота

|margin: 10px 20px 30px 40px
он делает внешний отступ

10px
40px 20px
30px

вот как он работает как Часы
или можна использовать
margin-top
margin-right
margin-bottom
margin-left

padding так само как и margin
только он делает внутренний отступ

border это граница элемента
border: 1px solid black;

ВНИМАНИЯ!
когда вы хотите сделать отступ ТЕКСТА или ДРУГОЕ то лучше использовать padding
а если хотите сделать отступ только с ФОТКОЙ то ТУТ MARGIN

#стили2

FLEX
Flexbox (display: flex) — это способ выравнивать и распределять элементы по главной оси (горизонтально или вертикально).

можна научиться благодаря сайту
https://flexboxfroggy.com/
чтобы там было на русском допишите #ru или на укр #ua

чтобы начать использовать его нужно в контейнер добавить
display: flex;
и дальше там выбераете и пишите

1. justify-content: ...;
👉 Выравнивает элементы по главной оси (Х — )

flex-start или start -- слева
flex-end или end — справа
center — про центру
space-between — Элементы с равными отступами между собой, по краям — нет.
space-around — Отступы вокруг каждого элемента, но по краям — в 2 раза меньше, чем между элементами.
space-evenly — Все отступы равны — и между элементами, и от краёв.

2.align-items: ...;
👉 Выравнивает элементы по поперечной оси (Y | )

stretch (по умолчанию) — растягивает по высоте/ширине
flex-start — к началу поперечной оси
flex-end — к концу
center — по центру
baseline — по базовой линии текста

3.align-content: ...;
👉 Выравнивает несколько рядов флекс-элементов (если они переносятся)
Работает только если flex-wrap: wrap и есть несколько строк:

flex-start, flex-end, center
space-between, space-around, space-evenly
stretch (по умолчанию)

4.flex-wrap: ...;
👉 Управляет тем, будут ли элементы переноситься на новую строку

nowrap — всё в одну строку (по умолчанию)
wrap — переносить вниз
wrap-reverse — переносить вверх

5.flex-direction: ...;
👉 Определяет направление главной оси

row (по умолчанию) — слева направо
row-reverse — справа налево
column — сверху вниз
column-reverse — снизу вверх

6.gap: ...;
👉 Отступы между элементами (аналог margin, но удобнее)
10px, 20em

7.flex: ;
👉 Краткая запись для flex-grow, flex-shrink, flex-basis

 flex: 1 1 calc((100% - 30px * 3) 4);

flex-grow: 1 — элемент может расти
flex-shrink: 1 — может сжиматься
flex-basis — базовая ширина
calc((100% - 30px * 3) 4)

Значит:

Всего 100% ширины
90px (30px * 3) — занимают промежутки
Остаток = 100% - 90px
Делим на 4, чтобы каждому элементу дать равную ширину

8.align-self: ...;
👉 Переопределяет align-items для конкретного элемента

9.flex-basis: ...;
👉 Начальный размер элемента до распределения пространства(200px...)

10. flex-shrink: ...;
👉 Насколько элемент может сжиматься, если не хватает места(1...)

11.flex-grow: ...;
👉 Насколько элемент может расти, если есть свободное место

.item {
  flex-grow: 2; /* В 2 раза больше, чем у grow: 1 */
}

12. order: ...;
👉 Меняет порядок отображения элементов
2, -2, -1, 1, 47

#flex

Всем доброго дня
сегодня расскажу что лучше не надо использовать на сайтах просто тег <img>
Если вы используете эти теги без понимания, это может:

🧱 поломать адаптивность на разных экранах
🐌 замедлить загрузку страницы
🦯 ухудшить доступность (например, для людей с ограничениями)
💔 подорвать SEO

✅
Указывай alt, чтобы картинка имела смысл даже без отображения.
Используй <picture> только когда реально нужно адаптировать изображения под размер экрана или формат (например, WebP vs JPEG).
Добавляй loading="lazy" к <img>, чтобы не грузить всё сразу.
Не забывай о srcset и sizes для адаптивной графики.

ТАК ДЕЛАТЬ НЕ НАДО
<img src="cat.jpg">
❌ нет alt — недоступно для скринридеров;

❌ не адаптивно — на мобильных может грузиться слишком большая картинка;

❌ нет отложенной загрузки — всё грузится сразу.

А НУЖНО ДЕЛАТЬ ТАК
1. Базовый <img>:

<img 
  src="cat.jpg" 
  alt="cat" 
  loading="lazy" 
  width="600" 
  height="400">

2. Адаптивные картинки: srcset и sizes:

<img 
  src="cat.jpg" 
  srcset="cat-small.jpg 480w, cat-medium.jpg 800w, cat-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="Кот на диване" 
  loading="lazy">

3. <picture> — когда нужен контроль над типом изображения (например, WebP для современных браузеров)
И ЕГО НУЖФНО ИСПОЛЬЗОВАТЬ

<picture>
  <source 
    srcset="image-desktop@1x.jpg 1x, image-desktop@2x.jpg 2x" 
    media="(min-width: 1440px)">

  <source 
    srcset="image-laptop@1x.jpg 1x, image-laptop@2x.jpg 2x" 
    media="(min-width: 1024px)">

  <source 
    srcset="image-tablet@1x.jpg 1x, image-tablet@2x.jpg 2x" 
    media="(min-width: 600px)">

  <img 
    src="image-mobile@1x.jpg" 
    srcset="image-mobile@1x.jpg 1x, image-mobile@2x.jpg 2x" 
    alt="Картинка для всех устройств" 
    loading="lazy">
</picture>

1.media="..." — выбирает нужное устройство по ширине.
2.srcset="... 1x, ... 2x" — даёт браузеру выбор между обычным и высоким качеством (например, для Retina-экранов).
3.Браузер сам решает, что показывать:
например, на iPhone с Retina-экраном он выберет 2x.

🧠 Советы:
—Используй сжатые форматы: WebP, AVIF — они легче и качественнее JPEG.
—Не загружай огромные 2x-картинки без нужды — это трафик и скорость.
—Упорядочи имена файлов по логике: @1x, @2x, -mobile, -tablet, -desktop.

#img

Свойство position — что это?
Управляет, как элемент располагается на странице.

Основные значения:

1.static — значение по умолчанию
Элемент располагается согласно нормальному потоку документа.
Не реагирует на top, left и т.п.

2.relative — относительное позиционирование
Элемент остаётся на своём месте, но сдвигается относительно этого места с помощью top, left, bottom, right.

3.absolute — абсолютное позиционирование
Элемент вырван из нормального потока, позиционируется относительно ближайшего родителя с position не static (например, relative, absolute или fixed). Если такого нет — относительно окна браузера.

4.fixed — фиксированное позиционирование
Элемент фиксируется относительно окна браузера и не двигается при прокрутке.

5.sticky — «липкое» позиционирование
Элемент ведёт себя как relative до тех пор, пока не достигнет заданного значения прокрутки, после чего ведёт себя как fixed.


Подробнее про absolute

.parent {
  position: relative; /* родитель должен быть с относительным позиционированием */
}
.child {
  position: absolute;
  top: 10px;
  left: 20px;
}

—.child позиционируется относительно .parent (его ближайшего позиционированного предка).
—Абсолютный элемент выводится из потока, поэтому не влияет на расположение других элементов.
—Задавая top, left, right, bottom, ты управляешь точным положением.

Кратко про остальные:
relative — сдвигает элемент относительно его обычного места.
fixed — фиксирует элемент на экране (например, шапка, меню).
sticky — элемент прилипает, когда доходишь до него при прокрутке.

#position

на счёт position: sticky;

я в айти как рыба в воде
#мем