CSS-стиль:

Инструменты, формирующие содержимое страницы

• Ширина: ширина } авто/инициал

• высота: высота } мин/макс

• наследовать: сохраняет уже определенную меру

• поле: верхнее/левое/правое/нижнее

• отступ: пространство между внутренним и внешним содержимым

• размер окна: возвращает элемент к заранее заданным размерам.

Цвета в CSS

• RGB: значения от 0 до 255, определяющие оттенки красного, зеленого и синего, разделенные запятой. Пример:

#rgb{
   color: rgb(250, 30, 70);
}

Значение 250 представляет красный цвет, 30 — зеленый, а 70 — синий, что в данном случае приведет к чему-то похожему на:

• RGBA: очень похоже на RGB, но добавляется коэффициент прозрачности, который варьируется от 0 до 1;
• HEX: шестнадцатеричное число, определяемое от 0 до 9 и от A до F, где F — наибольшее значение, по шаблону, аналогичному RGB. Пример:

00FF00 -> Зеленый
FF0000 -> Красный
0000FF -> Синий

#hex{
  color: #03BB76;
}

Это приведет к чему-то вроде:

• HSL (оттенок, насыщенность, яркость): определение цвета через его оттенок (0 красный, 120 зеленый, 240 синий), насыщенность (0 % серый тон, 100 % полноцветный), яркость (0 % черный) , 100% белый) — существует также HSLA, который использует альфа-фактор (от 0 до 1) для измерения уровня прозрачности. Пример:

#hsl{
  color: hsla(120, 100%, 50%, 1.0);
}

Это программирование приведет к полностью зеленому цвету, но вы можете поискать другие тона, используя цветовой круг HSL.

Фонды

• background-color: сплошной цвет фона
• фоновое изображение: эталонное изображение в фоновом режиме
• линейный градиент: линейный градиент
• радиальный градиент: круговой градиент
• повторение: эффект повторения

background-size: определяет размер фона элемента, сопровождаемый настройками:

• авто: автоматическая регулировка
• обложка: покрыть все пространство элемента
• содержит: измените размер содержимого так, чтобы появилось полное/необрезанное изображение
• значение: установить размер изображения внутри элемента

Повторение background-repeat: определяет ось, по которой изображение повторяется:

• повтор: максимально возможное повторение
• повтор-x: повторяется только по оси X (горизонтально)
• повтор-y: повторяется только по оси Y (вертикально)
• пробел: повторяется по обеим осям без разделения на пробелы
• круглый: повторяется во всех направлениях без обрезки, просто изменяется размер
• no-repeat: никаких повторений

Background-position: расположение фоновых изображений
центр, слева, справа, x%,y%

background-attachment: как изображение будет вести себя в зависимости от окна браузера

• исправлено: не двигается
• прокрутка: привязана к объекту
• local: «прокручивается» рядом с содержимым

background-origin: определяет область позиционирования изображения

• padding-box: исходный угол рядом с отступом
• border-box: изображение начинается рядом с внешней областью границы
• content-box: ниже отступа, выравнивается по содержимому элемента

background-flip: определяет, покрывает ли цвет элемента края

• padding-box: выровнено по отступу
• рамка-бокс: выровнена по границе
• content-box: заполняет область содержимого
• clip-text: фон в тексте (цвет должен быть прозрачным)

background-bland-mode: эффекты на фоне элементов

Края

• border-width: размер границы
• стиль границы: тип границы
• border-color: цвет границы
• border-radius: Округляет границу

изображение границы

• источник: установите путь к изображению
• ширина: ширина изображения рамки
• повтор: контролируйте, будет ли изображение повторяться или нет
• начало: расстояние от края элемента
• срез: разделить на регионы

Контент (изображение или видео)

object-fit : как содержимое элемента ведет себя в установленном поле

• fill: заполнить все пространство и исказить
• содержать: не будет искажаться, но будет укладываться в установленные размеры
• обложка: заполнить все пространство, не искажая
• нет: игнорирует размеры родительского объекта и использует исходные размеры
• уменьшение масштаба: наименьшая настройка изображения без искажений

позиция объекта: центральное изображение

• ось X и ось Y
• слева, справа, по центру, сверху, снизу