[WIP] CSS

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

• Можно определять что будет происходить при нажатие на клавиши со стрелками на клавиатуре. Почти везде не работает
• 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) {}