LEARN X · ЗА 14 МИН
CSS
CSS за 14 минут: селекторы, специфичность, блочная модель, flexbox, grid, переменные, медиазапросы и анимации — весь язык на одной странице в комментариях.
CSS (Cascading Style Sheets) описывает, как HTML-элементы выглядят на экране. Весь язык — на одной странице, объяснения внутри комментариев /* ... */.
1. Синтаксис и подключение
Правило состоит из селектора и блока объявлений.
/* Это комментарий. Однострочных // в CSS НЕТ — только такие. */
/* Структура правила:
селектор { свойство: значение; свойство: значение; } */
h1 {
color: red; /* свойство color, значение red */
font-size: 32px; /* каждое объявление завершается ; */
}
/* Подключают CSS тремя способами:
1. Внешний файл (рекомендуется):
<link rel="stylesheet" href="style.css">
2. Тег <style> в <head> HTML.
3. Inline-атрибут: <p style="color:blue"> — избегайте. */
/* Несколько селекторов через запятую — общие стили: */
h1, h2, h3 {
font-family: sans-serif;
}2. Селекторы
/* По тегу */
p { color: #333; }
/* По классу — атрибут class="box" в HTML */
.box { padding: 10px; }
/* По id — атрибут id="main" (id уникален на странице) */
#main { width: 800px; }
/* По атрибуту */
a[target] { color: green; } /* есть атрибут target */
input[type="text"] { border: 1px solid; }/* точное значение */
a[href^="https"] { color: teal; } /* начинается с https */
a[href$=".pdf"] { color: red; } /* заканчивается на .pdf */
/* Универсальный селектор — все элементы */
* { margin: 0; }
/* Комбинаторы */
div p { color: blue; } /* p внутри div на ЛЮБОЙ глубине */
div > p { color: navy; } /* p — ПРЯМОЙ потомок div */
h2 + p { margin-top: 0; }/* p сразу ПОСЛЕ h2 (соседний) */
h2 ~ p { color: gray; } /* все p после h2 (общий родитель) */
/* Псевдоклассы — состояние/положение */
a:hover { color: orange; } /* наведение мыши */
a:visited { color: purple; } /* посещённая ссылка */
input:focus { outline: 2px solid; }/* элемент в фокусе */
button:disabled { opacity: .5; } /* отключённый */
li:first-child { font-weight: bold; } /* первый среди соседей */
li:last-child { border: none; } /* последний */
li:nth-child(2) { color: red; } /* второй */
li:nth-child(odd){ background: #eee; } /* нечётные (зебра) */
p:not(.skip) { color: black; } /* все p, кроме .skip */
/* Псевдоэлементы — создают/стилизуют часть элемента (двойное ::) */
p::first-line { font-weight: bold; } /* первая строка */
p::first-letter { font-size: 2em; } /* буквица */
.box::before { content: "→ "; } /* вставка ПЕРЕД */
.box::after { content: " ✓"; } /* вставка ПОСЛЕ */
::selection { background: yellow; } /* выделение мышью */3. Специфичность и каскад
Когда несколько правил задают одно свойство, побеждает более специфичное.
/* Вес селектора считают как тройку (id, классы, теги):
тег / псевдоэлемент → 0,0,1
класс / атрибут / псевдокласс → 0,1,0
id → 1,0,0
inline style="..." → перебивает почти всё
!important → перебивает вообще всё (крайняя мера) */
p { color: black; } /* специфичность 0,0,1 */
.text { color: green; } /* 0,1,0 — победит над тегом */
#intro { color: red; } /* 1,0,0 — победит над классом */
/* При РАВНОЙ специфичности побеждает то, что НИЖЕ в коде (каскад): */
.btn { color: blue; }
.btn { color: teal; } /* применится именно это */
/* Крайняя мера — старайтесь не использовать: */
p { color: black !important; }
/* Наследование: некоторые свойства (color, font-*) дети получают
от родителя автоматически. Сбросить можно ключевыми словами: */
.child {
color: inherit; /* взять у родителя явно */
margin: initial; /* значение по умолчанию */
border: unset; /* inherit, если наследуется, иначе initial */
}4. Цвета и единицы
.colors {
color: red; /* именованный цвет */
color: #ff0000; /* HEX, RRGGBB */
color: #f00; /* короткий HEX */
color: #ff000080; /* HEX с альфой (80 ≈ 50%) */
color: rgb(255, 0, 0); /* красный, зелёный, синий 0-255 */
color: rgba(255, 0, 0, 0.5); /* + прозрачность 0-1 */
color: hsl(0, 100%, 50%); /* тон°, насыщ.%, светлота% */
color: hsla(0, 100%, 50%, 0.5); /* + альфа */
color: transparent; /* полностью прозрачный */
}
.units {
/* Абсолютные */
width: 200px; /* пиксели — фиксированный размер */
/* Относительные к шрифту */
font-size: 1.5em; /* em — относительно шрифта РОДИТЕЛЯ */
font-size: 1.5rem;/* rem — относительно шрифта <html> (надёжнее) */
/* Относительные к контейнеру/экрану */
width: 50%; /* % от размера родителя */
width: 100vw; /* vw — 1% ШИРИНЫ окна (viewport width) */
height: 100vh; /* vh — 1% ВЫСОТЫ окна */
font-size: 5vmin; /* vmin/vmax — от меньшей/большей стороны окна */
}5. Текст и шрифты
.text {
font-family: "Helvetica", Arial, sans-serif; /* список с запасными */
font-size: 16px;
font-weight: bold; /* или 100–900 (400 = normal, 700 = bold) */
font-style: italic; /* курсив */
line-height: 1.5; /* высота строки (множитель — лучший выбор) */
letter-spacing: 0.05em; /* трекинг между буквами */
text-align: center; /* left | right | center | justify */
text-decoration: underline; /* подчёркивание */
text-decoration: line-through; /* зачёркивание */
text-transform: uppercase;/* ВЕРХНИЙ регистр (lowercase/capitalize) */
text-indent: 2em; /* красная строка */
white-space: nowrap; /* запрет переноса строк */
overflow-wrap: break-word;/* разрыв длинных слов */
}
/* Подключение своего шрифта */
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
}6. Блочная модель
Каждый элемент — это контент + padding + border + margin.
.box {
width: 300px;
height: 150px;
/* padding — ВНУТРЕННИЙ отступ (между контентом и рамкой) */
padding: 20px; /* со всех сторон */
padding: 10px 20px; /* верх/низ | лево/право */
padding: 5px 10px 15px 20px; /* верх право низ лево (по часовой) */
padding-top: 10px; /* отдельная сторона */
/* border — рамка: толщина | стиль | цвет */
border: 2px solid black; /* solid | dashed | dotted | none */
border-top: 1px solid #ccc; /* отдельная сторона */
/* margin — ВНЕШНИЙ отступ (между элементами) */
margin: 20px;
margin: 0 auto; /* верх/низ 0, лево/право auto — центрирование */
/* box-sizing — как считать width/height: */
box-sizing: border-box; /* width включает padding и border (удобнее!) */
/* content-box (по умолч.): width — только контент, padding добавляется */
}
/* Частый сброс: считать размеры по border-box для всего */
*, *::before, *::after { box-sizing: border-box; }7. Display и position
/* display управляет типом отображения */
.block { display: block; } /* на всю ширину, с новой строки (div, p) */
.inline { display: inline; } /* в строку, width/height игнорируются (span) */
.ib { display: inline-block; } /* в строку, НО размеры работают */
.hidden { display: none; } /* убрать из потока (места не занимает) */
.invis { visibility: hidden; } /* спрятать, НО место остаётся */
/* position управляет позиционированием */
.static { position: static; } /* по умолчанию, в обычном потоке */
.relative {
position: relative; /* сдвиг ОТНОСИТЕЛЬНО своего места */
top: 10px; left: 20px; /* + якорь для absolute-потомков */
}
.absolute {
position: absolute; /* вырван из потока; координаты от ближайшего
позиционированного предка (или окна) */
top: 0; right: 0;
}
.fixed {
position: fixed; /* привязан к ОКНУ, не скроллится (шапки, кнопки) */
bottom: 20px; right: 20px;
}
.sticky {
position: sticky; /* обычный, пока не доскроллит до порога — потом
прилипает (липкие заголовки) */
top: 0;
}
.layer { z-index: 10; } /* порядок наложения (больше = выше) */8. Flexbox
Одномерная раскладка — выстраивает элементы в ряд или колонку.
.flex {
display: flex; /* включает flex для ПРЯМЫХ детей */
flex-direction: row; /* row (→) | column (↓) | row-reverse */
flex-wrap: wrap; /* перенос на новую строку при нехватке места */
gap: 16px; /* промежуток между элементами */
/* выравнивание ВДОЛЬ главной оси (по горизонтали при row) */
justify-content: center;
/* flex-start | center | flex-end | space-between |
space-around | space-evenly */
/* выравнивание ПОПЕРЁК оси (по вертикали при row) */
align-items: center;
/* stretch | flex-start | center | flex-end | baseline */
}
/* Свойства детей */
.item {
flex-grow: 1; /* как делить свободное место (0 = не растягивать) */
flex-shrink: 1; /* как сжиматься при нехватке места */
flex-basis: 200px; /* базовый размер до распределения */
flex: 1 1 200px; /* шорткат: grow shrink basis */
align-self: flex-end; /* переопределить align-items для себя */
order: 2; /* изменить порядок (по умолчанию 0) */
}9. Grid
Двумерная раскладка — строки и колонки одновременно.
.grid {
display: grid;
/* колонки: три по 100px */
grid-template-columns: 100px 100px 100px;
/* fr — доля свободного места. Ниже: 1 + 2 части (узкая и вдвое шире) */
grid-template-columns: 1fr 2fr;
/* repeat — повтор. auto-fit + minmax = адаптивная сетка без медиа: */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: auto 1fr auto; /* строки: шапка, контент, подвал */
gap: 16px; /* промежутки (row-gap / column-gap отдельно) */
/* выравнивание ячеек */
justify-items: center; /* по горизонтали внутри ячейки */
align-items: center; /* по вертикали внутри ячейки */
}
/* Растягивание элемента на несколько ячеек */
.wide {
grid-column: 1 / 3; /* с линии 1 до линии 3 (две колонки) */
grid-column: span 2; /* или просто: занять 2 колонки */
grid-row: 1 / 3; /* на две строки */
}
/* Именованные области — наглядный макет */
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.layout .head { grid-area: header; }10. Фон, границы, тени
.bg {
background-color: #f0f0f0;
background-image: url("bg.jpg");
background-size: cover; /* cover (заполнить) | contain | 100% 50% */
background-position: center;
background-repeat: no-repeat;
/* шорткат для всего сразу: */
background: #fff url("bg.jpg") no-repeat center / cover;
/* градиент как фон */
background: linear-gradient(to right, red, orange);
background: radial-gradient(circle, white, gray);
}
.rounded {
border-radius: 8px; /* скругление всех углов */
border-radius: 50%; /* круг (для квадрата) */
border-radius: 8px 0 8px 0;/* по углам: верх-лево ... */
}
.shadow {
/* box-shadow: смещениеX смещениеY размытие растяжение цвет */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 5px gray; /* inset — тень ВНУТРЬ */
/* тень для текста: X Y размытие цвет */
text-shadow: 1px 1px 2px black;
opacity: 0.8; /* прозрачность всего элемента (0-1) */
}11. Переменные и функции
/* Кастомные свойства (CSS-переменные). :root — корень документа */
:root {
--main-color: #3498db;
--gap: 16px;
--max-width: 1200px;
}
.button {
/* var() читает значение переменной; 2-й аргумент — запасное значение */
background: var(--main-color);
padding: var(--gap);
color: var(--text-color, white); /* white, если --text-color не задана */
}
/* Переменные наследуются и переопределяются локально */
.dark {
--main-color: #1a1a2e; /* внутри .dark все var(--main-color) — тёмные */
}
.calc {
/* calc() — вычисления, можно смешивать единицы */
width: calc(100% - 40px);
height: calc(100vh - var(--gap));
font-size: calc(1rem + 1vw); /* «резиновый» размер */
/* min / max / clamp — адаптив без медиазапросов */
width: min(600px, 100%); /* меньшее из двух */
width: max(300px, 50%); /* большее из двух */
font-size: clamp(1rem, 2vw, 2rem);/* мин, желаемое, макс */
}12. Адаптивность и анимации
/* Медиазапросы — стили под размер экрана (mobile-first) */
@media (min-width: 768px) {
.container { width: 750px; } /* для экранов ШИРЕ 768px */
}
@media (max-width: 600px) {
.menu { display: none; } /* для экранов УЖЕ 600px */
}
@media (min-width: 600px) and (max-width: 900px) {
.box { font-size: 14px; } /* диапазон */
}
@media (prefers-color-scheme: dark) {
body { background: #111; color: #eee; } /* системная тёмная тема */
}
/* transition — плавный переход при изменении свойства */
.btn {
background: blue;
/* свойство длительность функция задержка */
transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
background: navy; /* изменится плавно благодаря transition */
transform: scale(1.1); /* увеличение на 10% */
}
/* transform — трансформации (не влияют на поток, быстрые) */
.fx {
transform: translate(10px, 20px); /* сдвиг */
transform: rotate(45deg); /* поворот */
transform: scale(1.5); /* масштаб */
transform: rotate(45deg) scale(1.2); /* несколько сразу */
}
/* @keyframes — покадровая анимация */
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.6; }
100% { transform: scale(1); opacity: 1; }
}
.heart {
/* имя длительность функция повторы направление */
animation: pulse 1.5s ease-in-out infinite;
}
/* Уважение к настройкам доступности */
@media (prefers-reduced-motion: reduce) {
* { animation: none; transition: none; }
}