Документация по CSS
Краткий справочник по CSS с примерами. Прочитай концепцию, посмотри код, а затем потренируйся в курсе Coddy.
Начать пошаговый курс по CSSНачало работы
- Inline CSSInline CSS записывает объявления прямо в элемент через атрибут style. Разберем синтаксис, когда встроенные стили уместны, почему они сильнее таблиц стилей и чем отличаются от внутреннего и внешнего CSS.
- Внешний CSSВнешний CSS хранится в файле .css, который каждая страница подключает через <link rel="stylesheet">; внутренний CSS находится в элементе <style> на одной странице. Разберем оба способа, пути к файлам и то, какое правило побеждает при их встрече.
- Комментарии CSSВ CSS один синтаксис комментариев, /* ... */, и для одной строки, и для нескольких. Разберем, где можно писать комментарии, как закомментировать правило и почему // и вложенные комментарии незаметно ломают следующее правило.
- !important в CSS!important делает объявление сильнее обычных объявлений, какой бы ни была их специфичность. Разберем, что именно он перебивает, что перебивает его, как устроена специфичность и какие есть более чистые способы выиграть конфликт стилей.
- Переменные CSSПеременные CSS (custom properties) хранят значение в одном месте и переиспользуют его через var(). Разберем, как объявлять их в :root, ограничивать и переопределять, задавать значения по умолчанию, переключать темы через JavaScript и не попасть в ловушку невалидного значения.
Селекторы
- Селекторы CSSСелектор CSS выбирает элементы, к которым применяется правило. Разберем все виды селекторов, четыре комбинатора (потомка, дочерний, соседний и общий родственный), селекторы атрибутов, группировку и проверим селекторы вживую.
- Селектор классаСелектор класса (.name) оформляет все элементы с этим классом, селектор ID (#name) один элемент с этим id. Разберем синтаксис, несколько классов и их цепочки, разницу между class и id, правила именования и переключение классов через JavaScript.
- Псевдоклассы CSSПсевдоклассы выбирают элементы по позиции или состоянию: :nth-child(), :first-child, :not(), :focus, :checked, :has() и другие. Разберем синтаксис, формулу an+b с живым тестером и разницу между nth-child и nth-of-type.
- ::before и ::after::before и ::after вставляют генерируемое содержимое первым и последним дочерним элементом прямо из CSS. Разберем свойство content, зачем нужен пустой content, позиционирование, подсказки через attr(), счетчики и где они не работают.
- Hover в CSSПсевдокласс :hover оформляет элемент, пока над ним находится указатель. Разберем эффекты наведения для кнопок и карточек, плавные переходы, цвета ссылок через :link, :visited, :hover и :active в правильном порядке и hover на сенсорных экранах.
Блочная модель
- Блочная модель CSSКаждый элемент это блок из четырех слоев: содержимое, padding, border и margin. Разберем, как каждый слой влияет на размер, как box-sizing: border-box меняет расчет, и посмотрим, как все слои измеряются вживую.
- Padding в CSSPadding это внутренний отступ элемента, между его содержимым и рамкой. Разберем сокращенную запись padding с 1 до 4 значений, свойства отдельных сторон, логический padding, проценты и то, как padding меняет размер элемента.
- Margin в CSSMargin это прозрачное пространство за рамкой элемента, которое отталкивает другие элементы. Разберем сокращенную запись margin, центрирование через margin: 0 auto, отрицательные отступы, margin auto во flexbox и почему вертикальные отступы схлопываются.
- Margin и paddingPadding это пространство внутри рамки элемента, margin снаружи. Посмотрите на оба на одном блоке, рядом и вживую, а затем разберитесь, что использовать для фона, кликабельной области, промежутков между элементами и центрирования.
- Рамка borderСвойство border рисует линию вокруг padding элемента. Разберем сокращенную запись border, все стили рамки, цвет и отдельные стороны, скругленные углы через border-radius и чем рамка отличается от outline.
- Width и heightwidth и height задают размер блока элемента. Разберем фиксированные и процентные размеры, почему height: 100% часто не работает, min-height и max-width для гибкой раскладки, auto и 100% и ключевые слова fit-content.
Текст и шрифты
- Размер шрифтаСвойство font-size задает размер текста. Разберем, какие единицы оно принимает (px, rem, em, %, ключевые слова, vw), как изменить размер шрифта в HTML, почему rem надежный выбор по умолчанию и как размеры в em перемножаются.
- Font-weightСвойство font-weight делает текст жирным, тонким или чем-то между. Разберем числовую шкалу от 100 до 900, normal и bold, относительные bolder и lighter и почему иногда насыщенность шрифта ничего не меняет.
- Line-heightline-height задает высоту каждой строки текста, а значит, и расстояние между строками. Разберем, почему число без единиц лучший выбор по умолчанию, как по-разному наследуются px, em и %, и какие значения хороши для текста и заголовков.
- Цвет текстаТег <font color> устарел; цвет текста в HTML задается свойством CSS color. Разберем, как покрасить всю страницу, одно слово, ссылку или заголовок именованными цветами, hex и rgb и как сохранить текст читаемым.
- ПодчеркиваниеПодчеркните текст через text-decoration, а затем управляйте линией: ее цветом, стилем, толщиной и расстоянием от текста. А также как убрать подчеркивание у ссылок и когда этого делать не стоит.
- Тень текстаtext-shadow рисует одну или несколько теней за текстом. Разберем четыре значения (смещение по x, смещение по y, размытие, цвет), как складывать тени для свечения, обводки и объемного текста и как тень помогает читать текст на пестром фоне.
Цвета и фоны
- Цвета CSSВсе способы записать цвет в CSS: именованные цвета, hex-коды, rgb() и rgba(), hsl(), прозрачность через альфа-канал, currentColor и новые oklch() и color-mix(). Каждый с живым примером и конвертером.
- Цвет фонаbackground-color заливает блок элемента цветом. Разберем, как задать цвет фона всей страницы, div, строки таблицы или одного слова, как работает прозрачность, почему bgcolor устарел и чем background-color отличается от сокращенного свойства background.
- Фоновое изображениеbackground-image размещает изображение или градиент за содержимым элемента. Разберем url() и градиенты, background-size (cover и contain), background-position, background-repeat, несколько слоев фона и сокращенное свойство background.
- Градиент CSSГрадиенты CSS это изображения, которые браузер рисует из цветов. Разберем radial-gradient (форма, размер, позиция), linear-gradient (направление и углы), conic-gradient, цветовые точки, резкие переходы для полос, повторяющиеся градиенты и градиентный текст.
- Тень box-shadowbox-shadow рисует тени вокруг блока элемента. Разберем пять значений (x, y, размытие, spread, цвет), внутренние тени inset, наложение нескольких теней для реалистичной глубины, кольца фокуса через spread и ошибки, от которых тени выглядят грязно.
Раскладка
- Display в CSSСвойство display определяет, как элемент участвует в раскладке. Разберем block, inline и inline-block на измеренных блоках рядом, display none и visibility hidden, а также место flex, grid, flow-root и contents.
- Position в CSSposition: absolute размещает элемент по точным координатам внутри ближайшего позиционированного предка. Разберем, как absolute работает вместе с position: relative, затем fixed и sticky, свойства top/right/bottom/left и inset и почему sticky иногда не прилипает.
- z-index в CSSz-index решает, какой из перекрывающихся элементов рисуется сверху. Разберем, на какие элементы он действует, как контексты наложения группируют элементы так, что z-index 9999 все равно проигрывает, что создает контекст наложения и как починить неработающий z-index.
- Overflow в CSSoverflow решает, что происходит с содержимым, которое не помещается в блок: показать его, обрезать или добавить полосы прокрутки. Разберем visible, hidden, scroll, auto и clip, overflow-x и overflow-y, многоточие в тексте и побочные эффекты overflow для раскладки.
- Float и clearfloat прижимает элемент к одной стороне и позволяет тексту обтекать его, как фотографии в журнале. Разберем float left, right и inline-start, clear, почему родитель схлопывается вокруг float и как это исправляет display: flow-root, и почему float больше не используют для раскладки страницы.
- Div по центруВсе способы выровнять div по центру по горизонтали, по вертикали или сразу по обеим осям: flexbox, grid, margin auto, абсолютное позиционирование с transform, inset с margin auto и align-content. Каждый работает вживую и сам измеряет свое центрирование, а таблица подскажет, когда какой использовать.
- Картинка по центру<img> это строчный элемент, поэтому он центрируется как текст: text-align: center у родителя. Или сделайте его блоком с margin: 0 auto, или центрируйте через flexbox или grid, в том числе по вертикали. Каждый способ работает вживую и измеряет результат.
Flexbox и Grid
- Flexbox CSSFlexbox выстраивает элементы в строку или колонку и управляет тем, как они делят пространство и выравниваются. Разберем display: flex, главную и поперечную оси, все свойства контейнера, flex-grow, flex-shrink и flex-basis в живой песочнице, которая измеряет, куда попадает каждый элемент.
- justify-content CSSjustify-content размещает flex-элементы вдоль главной оси, а align-items вдоль поперечной. Посмотрите на все значения рядом, с замерами, на кликабельную сетку выравнивания, align-self и причины, по которым justify-content иногда ничего не делает.
- flex-wrap в CSSflex-wrap решает, сжимаются ли flex-элементы в одну строку или переходят на следующую, а flex-direction решает, идут ли они строкой или колонкой. Разберем оба свойства на живых примерах, сокращение flex-flow, align-content и адаптивный ряд карточек без медиазапросов.
- CSS GridCSS Grid размещает элементы сразу по строкам и колонкам. Разберем display: grid, grid-template-columns, единицу fr, repeat() и minmax(), auto-fill и auto-fit, размещение элементов через grid-column и grid-template-areas на живой сетке, которую можно менять и измерять.
Адаптивный дизайн
- Медиазапросы CSSМедиазапрос применяет CSS, только когда условие истинно: минимальная ширина экрана, темная цветовая схема или указатель-мышь. Разберем синтаксис @media, брейкпоинты mobile first, синтаксис диапазонов, prefers-color-scheme, matchMedia в JavaScript и контейнерные запросы.
- Единицы rem и emrem считается от размера шрифта корневого элемента, em от размера шрифта текущего элемента, px фиксирован, а % зависит от свойства. Посмотрите на каждую единицу с замером во вложенном примере, почему em перемножается, когда что использовать и как работают vw, vh и dvh.
- Функция clamp()clamp(MIN, PREFERRED, MAX) возвращает предпочтительное значение, но никогда не меньше MIN и не больше MAX. Разберем, как она делает размеры шрифта и отступы плавными без медиазапросов, как вычислить среднее значение и как с ней связаны min() и max().
- Функция calc()calc() позволяет считать в CSS и смешивать единицы, например 100% минус боковая панель фиксированной ширины 200px. Разберем правила синтаксиса (пробелы важны), calc() с CSS-переменными, типичные задачи, которые она решает, и почему невалидный calc() молча игнорируется.
Переходы и эффекты
- Transition в CSSПереход CSS анимирует свойство от старого значения к новому, когда оно меняется, например при наведении. Разберем сокращенную запись transition, все функции плавности рядом, что можно и что нельзя анимировать переходом, обход height: auto и уменьшение движения.
- Анимация CSSCSS-анимации проводят элемент через шаги, которые вы описали в @keyframes, сами по себе и сколько угодно раз. Разберем синтаксис @keyframes, все восемь свойств animation, fill-mode и direction, индикаторы загрузки, паузу и уважение к уменьшению движения.
- Transform в CSSСвойство transform перемещает, масштабирует, поворачивает и наклоняет элемент, не меняя раскладку вокруг него. Разберем все функции transform, почему важен порядок функций, transform-origin, отдельные свойства translate, scale и rotate и прием центрирования translate(-50%, -50%).
- Поворот rotateПоверните элемент через transform: rotate(45deg) или новое свойство rotate. Разберем единицы углов (deg, turn, rad), поворот вокруг угла через transform-origin, поворот текста и иконок, вращающийся индикатор загрузки и 3D-поворот через rotateX и rotateY.
- Прозрачность opacityopacity делает прозрачным весь элемент и все, что внутри, от 0 (невидимый) до 1 (сплошной). Разберем значения, почему opacity делает бледным и текст и как сделать прозрачным только фон, opacity: 0, visibility и display, а также затухание при наведении.
- Размытие blurfilter: blur(5px) размывает элемент, а backdrop-filter: blur() размывает то, что за ним. Разберем все функции фильтров (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) с живыми ползунками, как их сочетать и проблему размытых краев.
