CSS

CSS свойство transform позволяет манипулировать элементами на вашей веб-странице, изменяя их форму, размер и положение.

Свойство transform может принимать следующие значения:

• none — никакого преобразования не применяется.
• rotate(angle) — вращает элемент на заданный угол.
• scale(x,y) — масштабирует элемент по осям X и Y.
• translate(x,y) — перемещает элемент на заданные координаты.
• skew(x-angle,y-angle) — наклоняет элемент на заданные углы по осям X и Y.

Есть некоторые другие варианты преобразований, например, на основе матриц — смотрите их в спецификации. Но они для математиков всяких :)

background-image позволяет добавить изображение в качестве фона для выбранного элемента. Фоновое изображение может быть любого типа и повторяться или масштабироваться в зависимости от настроек.

Синтаксис

selector {
  background-image: url("image.jpg");
}

Любой элемент на странице сайта представляет собой прямоугольный блок, который имеет ширину и высоту, у него могут быть внутренние и внешние отступы и границы. Это и есть блочная модель — box model.

Внешние отступы margin определяют расстояние между элементом и его окружением. Указывают отступы в пикселях (px), условных единицах (em), процентах (%) по отношению к ширине родительского блока или задают значение auto. Благодаря margin блоки не слипаются и располагаются на отведённом для них по макету месте.

Flexbox, наряду с Grid, используют для построения сеток и микросеток. Флекс-контейнер создают с помощью display: flex или display: inline-flex. Свойство flex задают его элементам: это сокращённая запись flex-grow, flex-shrink и flex-basis, которые управляют размером элемента вдоль главной оси. Выбор между флексами и гридами зависит от задачи.

CSS Grid Layout — это способ разметки, который позволяет создавать на странице простые и сложные двумерные сетки. Вы можете добавить любое количество столбцов или строк и указать, сколько ячеек должен занимать каждый элемент.

Например, с помощью гридов легко создать такой раздел:

Если пока не знаете, в чём разница, прочитайте, когда использовать флексы, а когда гриды.

CSS-свойство transition служит для создания плавных переходов между двумя состояниями элемента. Оно помогает избежать резких и нежелательных изменений, делая анимацию более естественной и приятной для глаз.

Свойство в общем виде записывается так:

transition: property duration timing-function delay;

• property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all, переходы будут применяться ко всем свойствам элемента.
• duration — определяет длительность перехода. Задаётся в секундах (s) или миллисекундах (ms).
• timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear, ease, ease-in, ease-out, ease-in-out.
• delay — время задержки перед началом перехода. Задаётся в секундах (s) или миллисекундах (ms).

CSS-свойство overflow отвечает за то, что происходит с содержимым блочного элемента, когда оно выходит за границы. Например, если картинка выпадает из родительского контейнера, вы можете её обрезать или добавить полосу прокрутки.

Чтобы указать, как должно отображаться содержимое элемента…

<div class="container">
	<p>Константиновский Константин Константинович</p>
</div>

…нужно задать этому элементу стили:

.container {
  overflow: auto;
}

В этом примере мы добавим контейнеру полосу прокрутки, если имя не будет в нём помещаться.

Свойство display определяет тип отображения элемента, как он будет отображаться на веб-странице: как блок, строчный элемент или каким-то другим способом.

CSS-свойство filter добавляет визуальные эффекты к элементам на странице. Например, вы можете поменять цвет, яркость и насыщенность элемента, наложить размытие или изменить прозрачность, инвертировать цвета или сделать что-то ещё.

Всего фильтров девять, и вот как они работают:

CSS-свойство width определяет ширину элемента на странице. Оно позволяет управлять размером элемента и адаптировать его под разные размеры экрана.

Свойство width записывается так:

selector {
  width: значение;
}

Ширина может быть автоматической — если её не указать, то она будет иметь значение auto. В этом случае браузер сам решит, какую ширину установить элементу на основе размеров родительского элемента и содержимого.

Если вы хотите управлять шириной, укажите значение — определённую вами ширину элемента. Тогда она будет постоянной или будет меняться в зависимости от всего вокруг на странице. Можно использовать единицы измерения — например, px, %, em, rem.

Вот так — в пикселях, тогда ширина будет постоянной. В этом случае — 200 пикселей.

p {
  width: 200px;
}

А так — в процентах, тогда ширина будет меняться при изменении размеров окна. В этом случае — 50% от ширины родительского элемента.

p {
  width: 50%;
}

В любом варианте к ширине нужно относиться внимательно, чтобы всё сошлось с макетом.

Если пока не понимаете, зачем здесь фигурные скобки — прочитайте о селекторах.