Шпаргалка CSS3

Фон

background
background: #00ff00 url("smiley.gif") no-repeat fixed center
background-attachment
Укажите, будет ли фоновое изображение зафиксировано в окне просмотра или в свитках.
background-clip
Определяет область рисования фона.
background-color
Определяет цвет фона элемента.
background-image
Определяет фоновое изображение элемента.
background-origin
Определяет область позиционирования фоновых изображений.
background-position
Определяет происхождение фонового изображения.
background-repeat
Укажите, будет ли фоновое изображение мозаичным.
background-size
Определяет размер фоновых изображений.

Граница

border
Устанавливает ширину, стиль и цвет для всех четырех сторон границы элемента.
border-bottom
Устанавливает ширину, стиль и цвет нижней границы элемента.
border-bottom-color
Устанавливает цвет нижней границы элемента.
border-bottom-left-radius
Определяет форму нижнего левого краевого угла элемента.
border-bottom-right-radius
Определяет форму нижнего правого краевого угла элемента.
border-bottom-style
Устанавливает стиль нижней границы элемента.
border-bottom-width
Устанавливает ширину нижней границы элемента.
border-color
Устанавливает цвет границы на всех четырех сторонах элемента.
border-image
Определяет, как изображение должно использоваться вместо стилей границ.
border-image-outset
Определяет величину, на которую область изображения границы выходит за границы рамки.
border-image-repeat
Указывает, должна ли граница изображения повторяться, округляться или растягиваться.
border-image-slice
Определяет внутренние смещения границы изображения.
border-image-source
Определяет местоположение изображения, которое будет использоваться в качестве границы.
border-image-width
Определяет ширину границы изображения.
border-left
Устанавливает ширину, стиль и цвет левой границы элемента.
border-left-color
Устанавливает цвет левой границы элемента.
border-left-style
Устанавливает стиль левой границы элемента.
border-left-width
Устанавливает ширину левой границы элемента.
border-radius
Определяет форму краевых углов элемента.
border-right
Устанавливает ширину, стиль и цвет правой границы элемента.
border-right-color
Устанавливает цвет правой границы элемента.
border-right-style
Устанавливает стиль правой границы элемента.
border-right-width
Устанавливает ширину правой границы элемента.
border-style
Устанавливает стиль рамки на всех четырех сторонах элемента.
border-top
Устанавливает ширину, стиль и цвет верхней границы элемента.
border-top-color
Устанавливает цвет верхней границы элемента.
border-top-left-radius
Определяет форму верхнего левого краевого угла элемента.
border-top-right-radius
Определяет форму верхнего правого краевого угла элемента.
border-top-style
Устанавливает стиль верхней границы элемента.
border-top-width
Устанавливает ширину верхней границы элемента.
border-width
Устанавливает ширину границы на всех четырех сторонах элемента.

Цвет

color
Укажите цвет текста элемента.
opacity
Определяет прозрачность элемента.
filter
Фильтр можно использовать для выполнения операций с визуальными эффектами, таких как размытие, балансировка контрастности или яркости, насыщенность цвета и т.д. над графическими элементами, такими как изображение, перед его отображением на веб-странице.
blur() | brightness() | contrast() | drop-reference-horizontal-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

Размерны

height
Укажите высоту элемента.
max-height
Укажите максимальную высоту элемента.
max-width
Укажите максимальную ширину элемента.
min-height
Укажите минимальную высоту элемента.
min-width
Укажите минимальную ширину элемента.
width
Укажите ширину элемента.

Содержимое

content
Вставляет сгенерированный контент.
quotes
Определяет кавычки для встроенных цитат.
counter-reset
Создает или сбрасывает один или несколько счетчиков.
counter-increment
Увеличивает одно или несколько значений счетчика.

Flex

align-content
Определяет выравнивание элементов гибкого контейнера внутри гибкого контейнера.
align-items
Задает выравнивание по умолчанию для элементов в гибком контейнере.
align-self
Определяет выравнивание для выбранных элементов в гибком контейнере.
flex
Определяет компоненты гибкой длины.
flex-basis
Определяет начальный основной размер элемента flex.
flex-direction
Определяет направление гибких элементов.
flex-flow
Сокращенное свойство для flex-direction и flex-wrap свойства.
flex-grow
Определяет, как гибкий элемент будет расти относительно других элементов внутри гибкого контейнера.
flex-shrink
Определяет, как гибкий элемент будет сжиматься относительно других элементов внутри гибкого контейнера.
flex-wrap
Указывает, должны ли гибкие элементы оборачиваться или нет.
justify-content
Определяет, как гибкие элементы выравниваются вдоль главной оси гибкого контейнера после разрешения любых гибких длин и автоматических полей.
order
Указывает порядок, в котором элементы Flex отображаются и размещаются в контейнере Flex.

Шрифт

font
Определяет множество свойств шрифта в одном объявлении.
font-family
Определяет список шрифтов для элемента.
font-size
Определяет размер шрифта для текста.
font-size-adjust
Сохраняет читаемость текста, когда происходит откат шрифта.
font-stretch
Выбирает нормальную, сжатую или расширенную грань шрифта.
font-style
Определяет стиль шрифта для текста.
font-variant
Укажите вариант шрифта.
font-weight
Укажите вес шрифта текста.

Список

list-style
Определяет стиль отображения списка и элементов списка.
list-style-image
Определяет изображение, которое будет использоваться в качестве маркера элемента списка.
list-style-position
Определяет положение маркера элемента списка.
list-style-type
Определяет стиль маркера для элемента списка.

Внутрений отступ

padding
Устанавливает отступы со всех четырех сторон элемента.
padding-bottom
Устанавливает отступ к нижней стороне элемента.
padding-left
Устанавливает отступ слева от элемента.
padding-right
Устанавливает отступ справа от элемента.
padding-top
Устанавливает отступ к верхней стороне элемента.

Внешний отсуп

margin
Устанавливает поле на всех четырех сторонах элемента.
margin-bottom
Устанавливает нижнее поле элемента.
margin-left
Устанавливает левое поле элемента.
margin-right
Устанавливает правое поле элемента.
margin-top
Устанавливает верхнее поле элемента.

Колонки

column-count
Определяет количество столбцов в элементе из нескольких столбцов.
column-fill
Определяет, как столбцы будут заполнены.
column-gap
Определяет разрыв между столбцами в элементе из нескольких столбцов.
column
Определяет прямую линию или «правило», которая будет проведена между каждым столбцом в элементе из нескольких столбцов.
column-color
Определяет цвет правил, нарисованных между столбцами в многостолбцовой раскладке.
column-style
Определяет стиль правила, нарисованного между столбцами в многоколоночном макете.
column-width
Определяет ширину правила, нарисованного между столбцами в многостолбцовой раскладке.
column-span
Указывает, сколько столбцов элемент охватывает в многостолбцовой схеме.
column-width
Определяет оптимальную ширину столбцов в элементе из нескольких столбцов.
columns
Сокращенное свойство для настройки column-widthи column-countсвойств.

Контур

outline
Устанавливает ширину, стиль и цвет для всех четырех сторон контура элемента.
outline-color
Устанавливает цвет контура.
outline-offset
Установите расстояние между контуром и границей элемента.
outline-style
Устанавливает стиль для контура.
outline-width
Устанавливает ширину контура.

Печать

page-break-after
Вставить разрывы страниц после элемента.
page-break-before
Вставить разрывы страниц перед элементом.
page-break-inside
Вставить разрывы страниц внутри элемента.

Таблица

border-collapse
Указывает, связаны ли границы ячейки таблицы или разделены.
border-spacing
Устанавливает интервал между границами соседних ячеек таблицы.
caption-side
Укажите положение заголовка таблицы.
empty-cells
Показать или скрыть границы и фон пустых ячеек таблицы.
div-layout
Определяет алгоритм макета таблицы.

Текст

direction
Определите направление текста / направление письма.
tab-size
Определяет длину символа табуляции.
text-align
Устанавливает горизонтальное выравнивание встроенного содержимого.
text-align-last
Определяет , как последняя строка блока или правая линия перед принудительным разрывом строки выравнивается , когда text-align есть justify.
text-decoration
Определяет украшение, добавляемое к тексту.
text-decoration-color
Определяет цвет text-decoration-line.
text-decoration-line
Определяет, какие виды линий добавляются к элементу.
text-decoration-style
Определяет стиль линий, указанных text-decoration-line свойством
text-indent
Сделать отступ в первой строке текста.
text-justify
Указывает метод выравнивания, который следует использовать, когда для text-align свойства установлено значение justify.
text-overflow
Определяет, как текстовое содержимое будет отображаться при переполнении контейнеров блоков.
text-reference-horizontal-shadow
Применяет одну или несколько теней к текстовому содержимому элемента.
text-transform
Преобразует регистр текста.
line-height
Устанавливает высоту между строками текста.
vertical-align
Устанавливает вертикальное положение элемента относительно текущей базовой линии текста.
letter-spacing
Устанавливает дополнительный интервал между буквами.
word-spacing
Устанавливает интервал между словами.
white-space
Определяет, как обрабатывается пустое пространство внутри элемента.
word-break
Определяет, как разбивать строки в словах. normal | break-all | keep-all
word-wrap
Указывает, следует ли разбивать слова, когда содержимое выходит за границы его контейнера. normal | break-word | inherit

Позиционирование

display
Определяет, как элемент отображается на экране.
position
Определяет, как элемент расположен.
top
Укажите расположение верхнего края позиционируемого элемента.
right
Укажите расположение правого края позиционируемого элемента.
bottom
Укажите расположение нижнего края позиционируемого элемента.
left
Укажите расположение левого края позиционируемого элемента.
float
Указывает, должен ли всплывать ящик.
clear
Определяет размещение элемента относительно плавающих элементов.
z-index
Определяет порядок наложения или расположения для позиционированных элементов.
overflow
Определяет обработку содержимого, которое выходит за рамки элемента.
overflow-x
Определяет, как управлять содержимым, когда оно превышает ширину области содержимого элемента.
overflow-y
Определяет, как управлять содержимым, когда оно превышает высоту области содержимого элемента.
resize
Указывает, может ли пользователь изменять размер элемента.
clip
Определяет область отсечения.
visibility
Указывает, является ли элемент видимым.
cursor
Укажите тип курсора.
box-reference-horizontal-shadow
Применяет одну или несколько теней к блоку элемента.
box-sizing
Измените стандартную блочную модель CSS.

Трансформация

backface-visibility
Определяет, видна ли «обратная» сторона преобразованного элемента при обращении к пользователю.
perspective
Определяет перспективу, с которой видны все дочерние элементы объекта.
perspective-origin
Определяет источник (точку схода для трехмерного пространства) для свойства перспективы.
transform
Применяет 2D или 3D преобразование к элементу.
transform-origin
Определяет источник преобразования для элемента.
transform-style
Определяет, как вложенные элементы отображаются в трехмерном пространстве.

2D трансформация

translate(tx,ty)
Перемещает элемент на заданную величину по осям X и Y.
translateX(tx)
Перемещает элемент на заданную величину вдоль оси X.
translateY(ty)
Перемещает элемент на заданную величину вдоль оси Y.
rotate(a)
Поворачивает элемент на указанный угол вокруг источника элемента, как определено transform-originсвойством.
scale(sx,sy)
Масштабируйте ширину и высоту элемента вверх или вниз на заданную величину. Функция не scale(1,1)имеет никакого эффекта.
scaleX(sx)
Масштабируйте ширину элемента вверх или вниз на заданную величину.
scaleY(sy)
Масштабируйте высоту элемента вверх или вниз на заданную величину.
skew(ax,ay)
Наклоняет элемент на заданный угол вдоль оси X и Y.
skewX(ax)
Наклоняет элемент на заданный угол вдоль оси X.
skewY(ay)
Наклоняет элемент на заданный угол вдоль оси Y.
matrix(n,n,n,n,n,n)
Определяет двумерное преобразование в форме матрицы преобразования, состоящей из шести значений.

3D трансформация

translate3d(tx,ty,tz)
Перемещает элемент на заданную величину вдоль осей X, Y и Z.
translateX(tx)
Перемещает элемент на заданную величину вдоль оси X.
translateY(ty)
Перемещает элемент на заданную величину вдоль оси Y.
translateZ(tz)
Перемещает элемент на заданную величину вдоль оси Z.
rotate3d(x,y,z, a)
Поворачивает элемент в трехмерном пространстве на угол, указанный в последнем параметре, вокруг вектора направления [x, y, z].
rotateX(a)
Поворачивает элемент на заданный угол вокруг оси X.
rotateY(a)
Поворачивает элемент на заданный угол вокруг оси Y.
rotateZ(a)
Поворачивает элемент на заданный угол вокруг оси Z.
scale3d(sx,sy,sz)
Масштабирует элемент на заданную величину по осям X, Y и Z. Функция не scale3d(1,1,1)имеет никакого эффекта.
scaleX(sx)
Масштабирует элемент вдоль оси X.
scaleY(sy)
Масштабирует элемент вдоль оси Y.
scaleZ(sz)
Масштабирует элемент вдоль оси Z.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)
Определяет трехмерное преобразование в форме матрицы преобразования 4 × 4 из 16 значений.
perspective(length)
Определяет вид в перспективе для трехмерного преобразованного элемента. В целом, когда значение этой функции увеличивается, элемент будет появляться дальше от зрителя.

Переход

transition
Сокращенное свойство для установки всех четырех отдельных свойств перехода в одном объявлении.
transition-delay
Указывает, когда начнется переход.
transition-duration
Определяет количество секунд или миллисекунд, которое анимация перехода должна занять для завершения.
transition-property
Задает имена свойств CSS, к которым должен применяться эффект перехода.
transition-timing-function
Указывает, как будут рассчитываться промежуточные значения свойств CSS, на которые влияет переход.

Анимация

animation
Сокращенное свойство для установки всех свойств анимации в одном объявлении.
animation-name
Задает имя @keyframesопределенной анимации, которая должна применяться к выбранному элементу.
animation-duration
Определяет, сколько секунд или миллисекунд требуется анимации для завершения одного цикла анимации.
animation-timing-function
Определяет, как анимация будет развиваться в течение каждого цикла, то есть функции замедления.
animation-delay
Указывает, когда анимация начнется.
animation-iteration-count
Определяет, сколько раз цикл анимации должен быть воспроизведен перед остановкой.
animation-direction
Определяет, должна ли анимация воспроизводиться в обратном порядке при чередующихся циклах.
animation-fill-mode
Определяет, как CSS-анимация должна применять стили к своей цели до и после ее выполнения.
animation-play-state
Указывает, работает ли анимация или приостановлена.

Можно анимировать

background
увидеть отдельные свойства
background-color
как цвет
background-position
как повторяемый список простого списка длины, процента или calc ()
background-size
как повторяемый список простого списка длины, процента или calc ()
border
увидеть отдельные свойства
border-bottom
увидеть отдельные свойства
border-bottom-color
как цвет
border-bottom-left-radius
как длина, процент или calc ()
border-bottom-right-radius
как длина, процент или calc ()
border-bottom-width
как длина
border-color
как цвет
border-left
увидеть отдельные свойства
border-left-color
как цвет
border-left-width
как длина
border-radius
увидеть отдельные свойства
border-right
увидеть отдельные свойства
border-right-color
как цвет
border-right-width
как длина
border-spacing
как простой список длины
border-top
увидеть отдельные свойства
border-top-color
как цвет
border-top-left-radius
как длина, процент или calc ()
border-top-right-radius
как длина, процент или calc ()
border-top-width
как длина
bottom
как длина, процент или calc ()
box-reference-horizontal-shadow
как список теней
clip
как прямоугольник
color
как цвет
column-count
как целое число
column-gap
как длина
column
увидеть отдельные свойства
column-color
как цвет
column-width
как длина
column-width
как длина
columns
увидеть отдельные свойства
flex
увидеть отдельные свойства
flex-basis
как длина, процент или calc ()
flex-grow
как число
flex-shrink
как число
font
увидеть отдельные свойства
font-size
как длина
font-size-adjust
как число
font-stretch
как растяжка шрифта
font-weight
как вес шрифта
height
как длина, процент или calc ()
left
как длина, процент или calc ()
letter-spacing
как длина
line-height
как число или длина
margin
как длина
margin-bottom
как длина
margin-left
как длина
margin-right
как длина
margin-top
как длина
max-height
как длина, процент или calc ()
max-width
как длина, процент или calc ()
min-height
как длина, процент или calc ()
min-width
как длина, процент или calc ()
opacity
как число
order
как целое число
outline
увидеть отдельные свойства
outline-color
как цвет
outline-offset
как длина
outline-width
как длина
padding
как длина
padding-bottom
как длина
padding-left
как длина
padding-right
как длина
padding-top
как длина
perspective
как длина
perspective-origin
как простой список длины, процентов или calc ()
right
как длина, процент или calc ()
text-decoration-color
как цвет
text-indent
как длина, процент или calc ()
text-reference-horizontal-shadow
как список теней
top
как длина, процент или calc ()
transform
как преобразование
transform-origin
как простой список длины, процентов или calc ()
vertical-align
как длина
visibility
как видимость
width
как длина, процент или calc ()
word-spacing
как длина
z-index
как целое число

Правила

@charset
Устанавливает кодировку символов внешней таблицы стилей.
@font-face
Позволяет использовать загружаемые веб-шрифты.
@import
Импортирует внешнюю таблицу стилей.
@keyframes
Указывает значения для свойств анимации в различных точках во время анимации.
@media
Устанавливает типы мультимедиа для набора правил в таблице стилей.
@page
Определяет размеры, ориентацию и поля страницы для печати.

Селекторы

*
все элементы, div *— все дочерние элементы
h1
по тегу
#id
по id
.class
по классу
.class1.class2
одновременно с двумя классами
p strong
вложенные
ul > li
только первого уровня вложенности
div + p
соседние, первый абзац следующий за div
div ~ p
родственные, все абзацы следующие за div

Псевдоклассы

:first-child
первый потомок своего родителя
:last-child
последний потомок
:only-child
единственный потомок, соседних элементов нет
:nth-child(a)
потомок номер # своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1. 2n — каждый второй, odd — нечетные, even — четные.
:nth-child(2n+3)
каждый второй потомок, начиная с 3-го
:first-of-type
Следующие псевдоклассы аналогичны предыдущим, но выбирают потомков с учетом типа
:last-of-type
Следующие псевдоклассы аналогичны предыдущим, но выбирают потомков с учетом типа
:only-of-type
Следующие псевдоклассы аналогичны предыдущим, но выбирают потомков с учетом типа
:nth-of-type
Следующие псевдоклассы аналогичны предыдущим, но выбирают потомков с учетом типа
:nth-last-of-type
Следующие псевдоклассы аналогичны предыдущим, но выбирают потомков с учетом типа
:not(селектор)
все, кроме подходящих под селектор
:empty
пустой, не содержит вложенных элементов (даже текста)
:checked, :disabled, :enabled
состояния полей ввода
:focus
ссылка или поле ввода в фокусе
:link
не посещенная ссылка
:visited
посещенная ссылка
:active
активная ссылка
:hover
элемент под курсором мыши
:target
сработает для элемента, ID которого совпадает с анкором #id в URL
:disabled
заблокированные элементы (установлен атрибут disabled)
:enabled
не заблокированные элементы (не установлен disabled)
:read-only
выберет все поля доступные только для чтения (аналог input[readonly])
:read-write
выберет все поля доступные для редактирования (аналог input:not([readonly]))
:required
выберет все объязательные поля (с атрибутом required)
:optional
выберет поля у которых не указан атрибут required
:checked
выбрть отмеченные поля checkbox или radio (не отмеченные можно выбрать через input:not(:checked))
:valid
выберет элементы, у которых введенно верное значение
:invalid
выберет элементы, у которых введенно не верное значение
:in-range
выбирает все элементы, значение которых попадает в диапазон max и min
:out-of-range
выбирает все элементы, значение которых не попадает в диапазон max и min

Псевдоэлементы

::before
добавляет содержимое в начало элемента
::after
добавляет содержимое в конец элемента
::first-line
 задает стиль первой строки форматированного текста
::first-letter
 определяет стиль первого символа в тексте элемента

Атрибуты

[checked]
присутствует атрибут
[attr="value"]
атрибут равен “value”
[attr^="http"]
атрибут начинается с текста
[attr$=".com"]
атрибут заканчивается на текст
[attr|="value"]
атрибут равен “value” или начинается с “value-” (например равен “value-1”)
[attr*="valut"]
атрибут содержит подстроку “value” (например равен “myvalue”)
[attr~="bar"]
атрибут содержит “bar” как одно из значений через пробел, например: data-attr='foo bar'