Syntax

	h1 {
		color: blue;
		font-size: 12px;
	}
  • none - убрать значение
  • inherit - унаследовать значение от родителя
  • initial - сбросить значение до базового (зависит от браузера)
  • Желательно прописывать свойства внутри селектора в алфавитном порядке
  • Если необходимо указать приоритетное значение, то к значению свойства перед ; добавляется !important. Например, color: black !important; Самым приоритетным считается последний !important в стеке
  • Комментарий указывается /* так */

Color

  • Names - red
  • RGB - rgb(255, 0, 0)
  • HEX - #ff0000 или #f00
  • RGBA - rgba(255, 0, 0, 1)
  • HSL - hsl(0, 100%, 50%)
  • HSLA - hsla(0, 100%, 50%, 0.3)
  • Абсолютно прозрачный - transparent

Displays

  • display: inline / block / flex / inline-block / inline-flex / inline-table / list-item / run-in / table / table-caption / table-column-group / table-header-group / table-footer-group / table-row-group / table-cell / table-column / table-row / none;
  • Различные дисплеи имеют различные свойства в разных браузерах, но есть и схожие. block всегда занимает 100% от ширины родителя даже если указать ему меньшие размеры. inline игнорирует некоторые параметры размеров и некоторые паддинги. run-in должен подстраиваться под контекст и быть либо block, либо inline. flex стоит разобрать отдельно. Табличные значения сложно описать и лучше игнорировать их существование. none убирает элемент из верстки

Flex

  • display: flex / inline-flex; Очень удобно использовать для определенных задач, например, для того, чтобы сделать все блоки одинаковой высоты, равной наибольшей среди них. При этом фактического задания высоты нет, и изменение контента в блоках будет автоматически влиять на размер всех блоков. flex влияет только на блоки внутри контейнера (flex-items), у которого приписан display: flex; и никак не влияет на контент внутри этих блоков. Есть две оси: основная и дополнительная. Вдоль основной оси идет распределение flex-items внутри одной строки (столбца). Вдоль дополнительной оси идут эти строки (столбцы)
  • direction меняет направление расположения flex-items
  • Свойства можно прописывать как к flex-container, так и к flex-items, но свойства разные
  • flex-direction: row / row-reverse / column / column-reverse; Определяет направление основной оси. В строку / в строку в противоположном направлении / в столбец / в столбец в противоположном направлении
  • justify-content: flex-start / flex-end / center / space-between / space-around; Определяет как будут выравнены flex-items внутри flex-container по главной оси. В начале (зависит от flex-direction) / в конце / посередине / равномерно без отступов по краям flex-container / с отступами
  • align-items: stretch / center / flex-start / flex-end / baseline; Определяет как расположена основная ось относительно дополнительной и как будут себя выравнивать flex-items. Растягиваются до одной наибольшей величины (высоты или ширины) / центры flex-items лежат на одной линии, размеры не меняются / прилегают к началу дополнительной линии / прилегают к концу дополнительной линии / по бейслайну как у vertical-align: baseline
  • flex-wrap: nowrap / wrap / wrap-reverse; Будут ли flex-items переносится на новую строку, если не помещаются на строке. Не будут / будут / будут, но в обратно порядке
  • align-content: stretch / center / flex-start / flex-end / space-between / space-around; Как будут выравнены flex-items относительно дополнительной линии. Растянуты равномерно, чтобы оптимально занять всё пространство / по центру без изменения размеров / к началу дополнительной линии / к концу / равномерно без отступов по краям / с отступами
  • flex-flow: f-direction f-wrap; Сокращенная запись
  • До этого всё прописывалось у контейнера. Следующие нужно прописывать у итемов
  • order: number; Определяет порядок итема, аналогично изменению положения в html-разметке
  • align-self: auto / stretch / center / flex-start / flex-end / baseline; Меняет align-items для конкретного элемента
  • flex-grow: number; Определяет насколько по сравнению с другими итемами данный итем может увеличиваться, занимая пространство. Чтобы работало у остальных итемов тоже нужно прописать flex-grow
  • flex-shrink: number; Схоже с flex-grow, только уменьшение итема
  • flex-basis: auto / 20px / 20%; Определяет базовый минимальный размер итема
  • flex: f-grow f-shrink f-basis; Сокращенная запись

Position

  • position: static / absolute / fixed / relative; static - стандартное позиционирование. absolute позиционируется относительно ближайшего родителя с relative, если такого нет, то относительно body. fixed привязывается к окну. relative нужен для позиционирования absolute, ведет себя как static, но его можно двигать теми же способами, что и absolute, при этом остальные элементы обращают внимание только на начальное положение
  • bottom: auto / 40px / -40px / 40% / -40%; Выравнивает нижний край блока относительно нижнего края опорного блока. Проценты берутся от размеров опорного блока, а не самого блока
  • top, right, left аналогично
  • Если указать значения для противоположных направлений, то блок растянется так, чтобы соответствовать обоим требованиям
  • z-index: auto / 3 / -3; Определяет порядок отображения по оси Z. Не работает для position: static. Число указывается с оглядкой на z-index его родителя, даже если он не указан явным образом, он всё равно есть и зависит от порядка в верстке. Если у родителя z-index: 2, у его ребенка z-index: 4, а у соседнего с родителем блока z-index: 3, то сосед будет выше и родителя, и ребенка, потому что у ребенка на самом деле z-index: 4 только внутри родителя, а снаружи он равен родительскому. Если z-index у двух блоков равны, то приоритетнее тот, который позже стоит в верстке

Float

  • float: none / left / right; Вырывает элемент из стандартного потока и помещает в специальный, который начинается с той стороны, которая указана в свойстве
  • clear: none / left / right / both; Определяет, что в начале блока с этим свойством нужно закончить все специальные потоки и пересчитать размер родителя с блоками в специальных потоках
  • Clear Fix:
    	.clearfix::after {
    		content: "";
    		display: table;
    		clear: both;
    	}
    

Overflow

  • overflow: visible / hidden / scroll / auto; Определяет как отображать содержимое, которое выходит за границы данного элемента. Работает только если у элемента явным образом заданы размеры. scroll добавляет скроллы даже если они не нужны. auto проверяет, нужны ли они
  • Можно указывать 2 различных свойства для оси X и Y. overflow-x и overflow-y
  • resize: none / both / vertical / horizontal; Определяет возможность ресайза блока. Работает нормально только при указанных размерах блока и с overflow в любом значении, но не в visible

Clip

  • clip: auto / rect(0, 25px, 50px, 0); Определяет видимую область для блока. Работает только для блоков с position: absolute и position: fixed. rect описывается как отклонение по 4 направлениям от верхнего левого угла блока. rect(top, right, bottom, left). Проценты недопустимы, отрицательные значения допустимы, но не имеют смысла, разве что для анимации

Cursor

  • Можно изменять курсор внутри определенного блока, всех блоков или определенных ситуаций. Также можно менять курсор на картинку
  • cursor: alias / all-scroll / auto / cell / context-menu / col-resize / copy / crosshair / default / e-resize / ew-resize / grab / grabbing / help / move / n-resize / ne-resize / nesw-resize / ns-resize / nw-resize / nwse-resize / no-drop / none / not-allowed / pointer / progress / row-resize / s-resize / se-resize / sw-resize / text / url(cursor.png) / vertical-text / w-resize / wait / zoom-in / zoom-out;
  • pointer-events: auto / none; Определяет будет ли срабатывать нажатие на элемент

Background

  • Может быть несколько фоновых изображений. Раньше - приоритетнее. Каждое свойство можно написать для каждого фона отдельно по порядку
  • background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
  • background-attachment: scroll / fixed / local;
    • scroll - default
    • fixed - привязан к экрану
    • local - привязан к элементу (по сути, тоже самое, что и fixed, только для отдельного элемента)
  • background-clip: border-box / padding-box / content-box; определяет откуда начинается отображение фона
  • background-color: blue;
  • background-image: url("back.jpg"); определяет фоновое изображение, можно несколько (раньше - выше)
  • background-origin: padding-box / border-box / content-box; определяет откуда начинается позиционирование фона
  • background-position: left top / center / right bottom / 51% 63% / 10px 40px;
  • background-repeat: repeat / repeat-x / repeat-y / no-repeat;
  • background-size: 100px 80px / 40% 50% / cover / contain;
  • Можно указывать градиенты как бекграунд. Синтаксис для разных браузеров отличается, поэтому лучше делать через colorzilla. Здесь укажу синтаксис по-умолчанию. Работает в Хроме
  • background: linear-gradient(to bottom right / -45deg, rgba(255,0,0,0) 10%, rgba(255,0,0,1) 20%, blue 45%, green);
  • background: repeating-linear-gradient(red, yellow 10%, green 20%);
  • background: radial-gradient(ellipse / circle, red, yellow 10%, green 100%);
  • background: repeating-radial-gradient(red, yellow 10%, green 15%);
  • background: radial-gradient(farthest-side / closest-side / farthest-corner / closest-corner at 60% 60%, red, yellow, green); Определяет в какую сторону и в каком проценте будет отклонен и изменен в размере градиент. То есть дальняя сторона / ближняя сторона / дальний угол / ближний угол блока, для которого прописан градиент. Опорные точки выбираются в зависимости от процентов, указанных выше. Важно заметить, что размер градиента меняется в зависимости от опорной точки. Ближняя и дальняя стороны ограничивают градиент со своей стороны, но не ограничивают с противоположной и он может там уйти за пределы блока. С углами аналогично, но распространение градиента останавливает именно угол, а не стороны этого угла
  • background-blend-mode: normal / multiply / screen / overlay / darken / lighten / color-dodge / saturation / color / luminosity; Определяет для каждого слоя бекграунда как он будет накладываться на другие свои слои, а также на визуальное отображение других блоков

Box-sizing

  • box-sizing: content-box / border-box; Определяет что включать в width и height: только сам контент или контент вместе с паддингами и бордерами

Borders

  • Отдельно могут быть указаны стороны и различные параметры для каждой из сторон: стиль, цвет, ширина, радиус скругления
  • Может менять размер блока
  • border: 5px solid red;
  • border-width: 5px;
  • border-style: dotted / dashed / solid / double / groove / ridge / inset / outset / none / hidden;
  • border-color: red;
  • border-radius: 5px; Можно указывать даже если не инициализирован бордер
  • Можно указывать два радиуса скругления (для определенного угла, например)
  • border-top-left-radius: 20px 40px;
  • border-radius: 50px/15px;
  • Бордеры делят пространство в углах блока по диагонали, поэтому можно добиться скошенных углов через указание прозрачного цвета одного из бордеров. Если конфликта распределения места нет, то нет и скошенного угла, поэтому нужно определять оба конфликтующих бордера, а не один
  • Можно использовать картинку, она будет нарезаться на 9 сегментов 3х3, центральный сегмент игнорируется и делается прозрачным по-умолчанию, но можно дописать fill у border-image-slice и тогда он не будет игнорироваться и будет заполнять свободное пространство внутри блока
  • border-image: bi-source bi-slice bi-width bi-outset bi-repeat;
  • border-image-source: url(border.png);
  • border-image-slice: 30 / 30% / 30 fill / 30% fill; Если писать числовое значение, то определяет в пикселях размер сегмента для растрового изображения и координаты для векторного
  • border-image-width: 10px / 2 / 30% / auto; Определяет ширину границы или новым числом, или множителем относительно border-width
  • border-image-outset: 20px / 5; Задает насколько граница будет отступать наружу от блока
  • border-image-repeat: stretch / repeat / round / space; Определяет как заполнять элементами пространство

Outline

  • Отличается от border лишь тем, что физически не занимает места и не влияет на блок. Всё остальное аналогично border
  • Также есть свойство outline-offset, которое задает отступ аутлайна наружу от блока

Margin

  • Внешние отступы
  • margin: 50px / 10% / auto; Процентный марджин берется всегда от ширина блока, auto работает только по вертикали (можно выравнивать по краям и по центру, но только с указанной шириной и display: block)
  • Margin Collapse: если есть 2 блока с display: block, то вертикальный марджин между ними не будет суммироваться, а будет равен максимальному из двух. С другими display этого не происходит
  • Допустимы отрицательные значения
  • Можно указывать отдельные значения для разных направлений

Padding

  • Внутренние отступы
  • padding: 50px / 10%; Процентные паддинг берется всегда от ширина блока
  • Отрицательные значения недопустимы
  • Можно указывать отдельные значения для разных направлений
  • При стандартном box-sizing увеличивает размеры блока

Height, Width

  • height: 50px / 50% / auto;
  • width: 50px / 50% / auto;
  • Процентные значения правильно берутся от значений родителя: высота от высоты, ширина от ширины
  • auto рассчитывается браузером
  • При действующих border, margin, padding могут быть проблемы с задаваемыми размерами и реально отображаемыми
  • Также можно задавать минимальные и максимальные значения для высоты и ширины (min-height, min-width, max-height, max-width). При этом обычные значения height и width можно задавать только процентными или автоматическими значениями

Font

  • @font-face позволяет подключать шрифты. Форматы: TTF/OTF, WOFF, WOFF2, SVG, EOT
  • font: f-style f-variant f-weight f-size/line-height f-family | caption | icon | menu | message-box | small-caption | status-bar; caption и прочие значения выбирают базовый браузерный шрифт для той или иной задачи
  • Можно подключать шрифты, состоящие из иконок, для плавной анимации изменения цвета
  • font-style: normal / italic / oblique; oblique - больше наклон, чем у italic, но хуже поддерживается браузерами
  • font-family: "Times New Roman", Times, serif;
  • font-weight: normal / bold / bolder / lighter / 700; normal = 400, bold = 700
  • font-variant: normal / small-caps;
  • font-size: 10px / 2em / 2rem / 200% / medium / xx-small / x-small / small / large / x-large / xx-large / smaller / larger; em и % берет умноженное значение у родителя или предка, rem всегда у body
  • font-kerning: auto / normal / none; Применять ли кернинг к тексту. Браузер сам решает / применять / не применять
  • font-stretch: ultra-condensed / extra-condensed / condensed / semi-condensed / normal / semi-expanded / expanded / extra-expanded / ultra-expanded; Сжимает или вытягивает буквы по горизонтали

Text

  • color: red;
  • text-align: left / right / center / justify; Можно выравнивать блоки с display: inline и display: inline-block как текст (работают все возможные значения, даже justify)
  • text-align-last: auto / left/ right / center / justify / start / end; Переопределяет text-align для последней строки текста. start и end зависят от направления текста (direction) и привязываются соответственно к началу и концу строки
  • text-justify определяет как будет вести себя текст с text-align: justify На данный момент (01.02.2017) работает только в IE, причем аж с версии 5.5
  • text-decoration: none / underline / overline / line-through;
  • text-decoration-color, text-decoration-line и text-decoration-style на данный момент поддерживаются очень плохо
  • text-transform: none / capitalize / uppercase / lowercase;
  • text-indent: 50px; Определяет размер отступа красной строки. Допустимы отрицательные значения
  • letter-spacing: normal / 5px; Определяет размер межбуквенного интервала. Допустимы отрицательные значения
  • line-height: normal / 30px / 3 / 30%; Определяет высоту строки текста. Может быть использована для выравнивания однострочного текста по вертикали. Процентные и числовые значения зависят от размера шрифта
  • direction: ltr / rtl; Определяет направление текста. Нормально разворачивает текст только с параметром unicode-bidi
  • word-spacing: normal / 30px; Определяет размер интервала между словами. Допустимы отрицательные значения
  • text-shadow: h v blur color; Тень текста, может быть несколько через запятую. Приоритет теней по порядку указания в свойстве. Допустимы отрицательные значения h и v. h - отклонение по x, v - отклонение по y. blur - радиус размытия в пикселях. Сама тень является копией текста по контуру
  • text-overflow: clip / ellipsis / "string"; Определяет как отображать непоместившийся в блок текст. Работает очень криво на момент 25.01.2017, только с дополнительными white-space: nowrap и overflow: hidden
  • unicode-bidi: normal / embed / bidi-override; Определяет каким образом реагировать на свойство direction. normal не изменяет направления. embed отталкивается от значения direction. bidi-override меняет направление в зависимости от символов
  • vertical-align: baseline / 30px / -30% / sub / super / text-top / top / middle / text-bottom / bottom;
    • baseline - выравнивание по последним строкам текста
    • 30px - сдвиг относительно бейслайна. Положительные значения - вверх, отрицательные - вниз
    • 30% - то же самое, что с пикселями, только проценты берутся от line-height
    • sub - нижний индекс
    • super - верхний индекс
    • text-top - по верхнему краю текста в родительском блоке. Не совсем понятно как ведет себя при выравнивании блоков
    • top - по верхней границе блоков
    • middle - по центровой линии блоков
    • text-bottom - по нижнему краю текста в родительском блоке. Аналогично с text-top непонятно как себя ведет с блоками
    • bottom - по нижней границе блоков
  • white-space: normal / nowrap / pre / pre-line / pre-wrap;
    • normal - перенос текста идет по-обычному, зависит от формы родителя
    • nowrap - игнорирует форму родителя, переносы текста можно делать только с помощью <br>
    • pre - игнорирует форму родителя, переносы текста можно делать с помощью <br> и простых переносов строки в коде
    • pre-line - то же самое, что и pre, но не игнорирует форму родителя, и игнорирует индентации в коде
    • pre-wrap - то же самое, что и pre-line, только не игнорирует индентации в коде
  • word-wrap: normal / break-word; Определяет как переносятся длинные слова. normal - стандартные правила, перенос только в правильных местах (например, на дефисах). break-word - переносит с любого места
  • word-break: normal / break-all / keep-all; Определяет как могут переносится слова не азиатских языков. normal - обычные правила, break-all - перенос может быть где-угодно. keep-all запрещает переносы вообще
  • writing-mode: horizontal-tb / vertical-rl / vertical-lr / sideways-rl / sideways-lr; Определяет направление текста по горизонтали или вертикали:
    • horizontal-tb - по горизонтали слева направо и сверху вниз
    • vertical-rl - по вертикали сверху вниз и справа налево
    • vertical-lr - по вертикали сверху вниз и слева направо
    • sideways-rl - текст располагается вертикально сверху вниз, а затем все символы поворачиваются боком вправо
    • sideways-lr - вертикально сверху вниз, а затем все символы поворачиваются боком влево
  • tab-size: 8 / 16px; Базово табуляция отображается как один символ пробела. Это свойство определяет как отображать табуляцию: определенное количество символов пробела / определенное количество пикселей
  • user-select: auto / none / text / all; Определяет может ли пользователь выделять текст перемещением курсора и двойным кликом. Определяется браузером / нельзя / выделяет только текст / выделяет весь текст одним кликом
  • hyphens: none / manual / auto; Определяет переносы. Чтобы использовать словари переносов необходимо прописывать lang и указывать язык
    • none - переносов нет, но <br> скорее всего не игнорируется
    • manual - переносы на местах &shy и <wbr>
    • auto - на основе словаря

Lists

  • Прописываются для списка, а не для элементов списка
  • list-style: ls-type ls-position ls-image;
  • list-style-position: outside / inside; Определяет являются ли пометки элементов списка частью списка
  • list-style-image: none / url(list.png);
  • Для ul list-style-type: disc / circle / square / none;
  • Для ol list-style-type: armenian / cjk-ideographic / decimal / decimal-leading-zero / georgian / hebrew / hiragana / hiragana-iroha / katakana / katakana-iroha / lower-alpha / lower-greek / lower-latin / lower-roman / none / upper-alpha / upper-latin / upper-roman;

Tables

  • border-collapse: separate / collapse; Прописывается у самой таблицы. Определяет будут ли убираться множественные бордеры между элементами таблицы
  • border-spacing: 10px 20px; Определяет расстояние между бордерами при border-collapse: separate;
  • caption-side: top / bottom; Определяет где отображать тег <caption>, в котором указывают описание таблицы
  • empty-cells: show / hide; Определяет будут ли отображены бордеры и бекграунд для пустых ячеек таблицы
  • table-layout: auto / fixed; Определяет каким образом будет определяться размер ячеек таблицы: подстраивается под контент или фиксированный одинаковый размер

Columns

  • column-count: auto / number; Определяет количество колонок. Работает только при column-width: auto;
  • column-fill: balance / auto; Размер колонок либо одинаковый, либо зависит от контента
  • column-gap: normal / 50px; Расстояние между двумя колонками
  • column-width: auto / 250px; Задает ширину одной колонки. Работает только при column-count: auto;
  • column-span: 1 / all; Определяет будет ли элемент находится внутри одной колонки или растянется на все колонки
  • columns: auto / column-width | column-count; Сокращенная форма
  • column-rule: cr-width cr-style cr-color;
  • column-rule-color: red; Определяет цвет границы между колонками
  • column-rule-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset; Определяет стиль границы между колонками. Схоже со стилями бордеров
  • column-rule-width: medium / thin / thick / 10px; Определяет ширину границы между колонками

Pseudo-elements

  • after, before
  • Необходимо указать хотя бы пустое значение для свойства content: "";, иначе псевдо-элемент не будет создаваться. В content можно прописывать url(pseudo.png)
  • Остальные псевдо-элементы прописаны ниже в селекторах, начинаются с ::
  • content: normal / none / counter / attr / "string" / open-quote / close-quote / no-open-quote / no-close-quote / url(content.png); attr позволяет отображать значение любого из атрибутов элемента в HTML. counter позволяет выводить значение определенного счетчика
  • counter-reset: none / name [number]; Инициализирует счетчик и сбрасывает его до 0. Если указать число после имени счетчика - сбросит до этого числа. Пишется у body
  • counter-increment: none / name [number]; Определяет инкремент счетчика при появлении элемента, у которого он прописан. Инкремент срабатывает раньше отображения на странице. Если указать число, можно изменить шаг или реализовать декремент
  • Можно определять что будет происходить при нажатие на клавиши со стрелками на клавиатуре. Почти везде не работает
  • nav-index: auto / number; Определяет порядок таббинга по элементам навигации
  • nav-up: auto / id / target-name; Определяет куда передвигать экран при нажатии на стрелку вверх. Браузер решает / к блоку с id / к целевому frame
  • nav-down, nav-left, nav-right, nav-up определяет кнопку

Transforms

  • transform: translate(x, y); Сдвигает блок. Ниже перечислены все возможные вариации этого свойства. Не анимируйте изменение положения блока через transition для left, right, top и bottom. Юзайте именно транслейт
    • translateX(n);
    • translateY(n);
    • translateZ(n);
    • translate3d(x, y, z);
  • transform: scale(x, y); Масштабирует блок
    • scaleX(n);
    • scaleY(n);
    • scaleZ(n);
    • scale3d(x, y, z);
  • transform: rotate(angle); Поворачивает блок
    • rotateX(angle);
    • rotateY(angle);
    • rotateZ(angle);
    • rotate3d(x, y, z, angle); здесь x, y, z должны быть любыми числами. Если число отрицательное - свойство по данной оси применится наоборот, если ноль - не применится, если положительное - применится в прямом направлении
  • transform: skew(x-angle, y-angle); Скашивает блок под определенным углом
    • skewX(angle);
    • skewY(angle);
  • transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY); Сокращенная запись
    • matrix3d(16 значений);
  • transform-origin(x, y[, z]); Изменяет опорную точку трансформаций
  • transform-style: flat / preserve-3d; Как отображать 3D-трансформации: как плоские или объемные
  • perspective(15px); Определяет сколько пикселей тратить на 3D-отображение неплоского блока. Прописывается у родителя того блока, которому нужно 3D-отображение
  • perspective-origin(x, y); Определяет опорную точку для перспективы. Прописывается у родителя
  • backface-visibility: visible / hidden; определяет видно ли содержимое блока, если показана его задняя стенка

Transition

  • transition: t-property t-duration t-timing-function t-delay; Сглаженное изменение значений свойств
  • transition-property: none / all / width; Для какого свойства, можно несколько через запятую
  • transition-duration: 2s; Как долго идет
  • transition-timing-function: linear / ease / ease-in / ease-out / ease-in-out / step-start / step-end / steps(int, start | end) / cubic-bezier(n, n, n, n); По какой функции менять значения. cubic-bezier лучше всего делать через Ceaser. steps делит всё время в transition-duration на int равных шагов и отображает изменение либо в начале шага (start), либо в конце (end)
  • transition-delay: 2s; Задержка перед изменением

Animation

  • @keyframes animationname {from {style1;} to {style2;}}
    • @keyframes animationname {25% {style1;} 50% {style2;} 75% {style3;}}
  • animation: a-name a-duration a-timing-function a-delay a-iteration-count a-direction a-fill-mode a-play-state;
  • animation-name: none / animationname; Имя анимации, прописанной в @keyframes
  • animation-duration: 2s; Продолжительность
  • animation-delay: 2s; Задержка перед выполнением первого цикла анимации. На последующих циклах задержки не будет
  • animation-iteration-count: 3 / infinite; Количество циклов анимации
  • animation-direction: normal / reverse / alternate / alternate-reverse; Направление анимации: прямое, обратное, сначала прямое, потом обратное и наоборот
  • animation-timing-function: linear / ease / ease-in / ease-out / ease-in-out / step-start / step-end / steps(int, start | end) / cubic-bezier(n, n, n, n); Функция изменения. steps тут делит каждый отрезок анимации на int, а не всю анимацию
  • animation-play-state: running / paused; Текущее состояние анимации
  • animation-fill-mode: none / forwards / backwards / both; Будут ли применены стили из анимации к блоку после, до, после и до анимации. При none берется текущее состояние объекта, меняется на то, что написано в анимации, анимируется и возвращается в исходное

Filters

  • filter позволяет применять фильтры ко всему содержимому блока и ему самому. Может быть несколько примененных фильтров через пробел
  • filter: blur(5px); Размытие. Неотрицательные значения
  • filter: brightness(75%); Яркость. 100% - оригинал, меньше - темнее, больше - светлее
  • filter: contrast(75%); Контраст. 100% - оригинал, меньше - менее контрастно, больше - более
  • filter: drop-shadow(h v blur spread color); Аналог box-shadow
  • filter: grayscale(60%); Бесцветность. 0% - оригинал, 100% - абсолютно бесцветное. Неотрицательные значения
  • filter: hue-rotate(150deg); Сдвигает каждый цвет по цветовому спектру. Каждый 360 градусов эффект повторяется, поэтому нелогично использовать значения меньше 0 и больше 360, но ошибки в этом не будет
  • filter: invert(60%); Инвертирует цвета. На 50% изображение становится серым монотонным фоном, на 100% полностью инвертируется. Больше 100% бессмысленно, но валидно. Меньше 0% невалидно
  • filter: opacity(50%); Непрозрачность. 100% - оригинал, 0% - полностью прозрачное. Больше 100% - бессмысленно, но валидно, меньше 0% - невалидно
  • filter: saturate(50%); Насыщенность цвета. 100% - оригинал, меньше - серее, больше - более цветное
  • filter: sepia(60%); Сепия. 100% - полная сепия, 0% - оригинал
  • filter: url(filter.svg); Ссылка на SVG-фильтр

Other Visual Effects

  • visibility: visible / hidden / collapse; hidden не отображает элемент в верстке, но он всё ещё занимает необходимое ему место. collapse используется только для таблиц и делает то же самое, что и hidden. Если использовать collapse не для табличной ячейки, то он отрендерится как hidden
  • opacity: 0.6; Непрозрачность. Для IE8 и ниже прописывают фоллбек filter: alpha(opacity=50); Это тоже самое, что и opacity(0.5). Непрозрачность влияет на весь блок и всех детей внутри него. Изменение значения непрозрачности для детей изменит его лишь относительно уже заданного значения родителя. Указывать можно лишь числа от 0 до 1
  • quotes: "~" "~"; Добавляет кавычки к началу и концу блока
  • box-shadow: h v blur spread color [inset]; Всё аналогично text-shadow, но есть параметр spread, который меняет масштаб тени, то есть значение может быть отрицательным. Если указан inset, то тень становится внутренней
  • Сглаживание шрифтов, которое работает далеко не везде: {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
  • image-rendering: auto / crisp-edges / pixelated; Определяет алгоритм интерполирования изображения при масштабировании:
    • auto - встроенный алгоритм
    • crisp-edges и pixelated - сохраняют наборы цветов и резкость контуров
  • mix-blend-mode - аналог background-blend-mode для элементов
  • clip-path - обрезка элемента по маске
  • object-fit - аналог background-size для img

All

  • all: initial / inherit / unset; Переопределяет значения всех свойств кроме unicode-bidi и direction. Делает их базовыми (зависит от браузера) / наследуемыми у родителя / неопределенными

Selectors

  • Нечувствительны к регистру
  • Классы и Айди не могут начинаться с чисел
  • Комбинируются от наиболее глобальных к более конкретным
  • .class
  • #id - должны быть уникальны, но по факту нет
  • #id .class
  • .class1 .class2
  • .class1.class2 - к элементу с двумя классами одновременно
  • .class1, .class2 - к 2 разным классам
  • * - ко всем элементам
  • ul * - ко всем элементам внутри ul
  • ul
  • ul li - ко всему, что внутри li (на любом уровне вложенности) и к самому li
  • ul > li - ко всему, что внутри li (вниз на один уровень вложенности) и к самому li
  • h4 + p - к p, который идет сразу после h4
  • h4 ~ p - ко всем p, которые идут после h4
  • form[target] - имеется такой атрибут
  • [target=_blank] - атрибут с таким значением
  • [name~=flower] - есть несколько значений и одно из них - flower
  • [name|=flower] - значение либо равно, либо начинается с flower
  • [name^=flower] - значение начинается с flower
  • [name$=flower] - значение заканчивается на flower
  • [name*=flower] - значение содержит flower как подстроку
  • :active - нажатый элемент
  • :checked - отмеченные элементы (например, checkbox)
  • :default - применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов. Например, у нас может быть две кнопки для отправки данных формы на сервер. Одна из этих кнопок задана по умолчанию (первая)
  • :disabled - отключенные элементы
  • :empty - пустые элементы (абсолютно)
  • :enabled - не отключенные элементы
  • :first-child - первый ребенок своего родителя
  • :first-of-type - первый по типу элемента
  • :focus - элемент в фокусе
  • :fullscreen - применяется к элементам, если браузер находится в полноэкранном режиме
  • :hover - элемент, на который навели мышь
  • :in-range - со значением в определенном диапазоне
  • :indeterminate - инпут с неопределенным значением
  • :invalid - с неправильным значением
  • :lang(ru) - с атрибутом lang в нужном значении
  • :last-child - последний ребенок своего родителя
  • :last-of-type - последний по типу
  • :link - не посещенный элемент
  • :not(p) - все элементы, не являющиеся p
  • :nth-child(n) - Nный ребенок своего родителя
  • :nth-last-child(n) - Nный ребенок своего родителя с конца
  • :nth-last-of-type(n) - Nный элемент по типу с конца
  • :nth-of-type(n) - Nный элемент по типу
  • :only-of-type - единственный элемент по типу
  • :only-child - единственный ребенок своего родителя
  • :optional - без атрибута required
  • :out-of-range - со значением вне определенного диапазона
  • :read-only - с атрибутом readonly
  • :read-write - без атрибута readonly
  • :required - с атрибутом required
  • :root - корневой элемент (обычно <html>, но у :root приоритет выше)
  • :target - по активному анкору
  • :valid - с правильным значением
  • :visited - посещенный элемент
  • ::after - псевдо-элемент
  • ::backdrop - отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице (на данный момент работает только с <dialog>)
  • ::before - псевдо-элемент
  • ::first-letter - первая буква
  • ::first-line - первая строка
  • ::placeholder - placeholder элемента
  • ::selection - выделение
  • @document - стили на основе адреса документа
  • @viewport - аналог meta viewport в html

Media Queries

  • Позволяет применять стили только при выполнении условий
  • @media [only / not] mediatype and (mediafeature) {}
  • mediatype может быть all / print / screen / speech
  • mediafeature может быть очень много каким
  • @media screen and (max-width: 699px) and (min-width: 480px), (min-width: 1200px) {}