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
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
- переносы на местах ­
и <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
определяет кнопку
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);
Сокращенная запись
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 [only / not] mediatype and (mediafeature) {}
mediatype
может быть all / print / screen / speech
mediafeature
может быть очень много каким
@media screen and (max-width: 699px) and (min-width: 480px), (min-width: 1200px) {}