Div-Dev
Профиль
Div-Dev
Главная
HTML-справочник
CSS-справочник
Инструменты
Блог
Книги
Klicks
RuPen
Реклама ТГ
CSS - справочник
Справочник по CSS
!
!important
- приоритет в стилях
Префикс
-moz-
- для Firefox
-moz-
- для Internet Explorer
-webkit-
- для Chrome и Safari
-o-
- для Opera
Значения свойств
currentColor
- соответствует значению свойства color для текущего элемента
inherit
- наследие значений свойств от родительского элемента
initial
- восстановление свойст по умолчанию
unset
- комбинация initial и inherit
Функции
attr()
- добавляет значение атрибута HTML - элемента в стилевое свойство
blur()
- размытие
brightness()
- яркость
calc()
- вычисляемое значение свойств
drop-shadow()
- тень
grayscale()
- цветное в черно - белое
hue-rotate()
- цветность
invert()
- инверсия
linear-gradient()
- линейный градиент
opacity()
- прозрачность
perspective()
- перспектива
radial-gradient()
- радиальный градиент
repeating-linear-gradient()
- повторяющийся линейный градиент
repeating-radial-gradient()
- повторяющийся радиальный градиент
rotate()
- поворот
rotateX()
- поворот по оси X
rotateY()
- поворот по оси Y
rotateZ()
- поворот по оси Z
saturate()
- насыщенность
sepia()
- сепия
scale()
- масштабирование
scaleX()
- масштабирование по оси X
scaleY()
- масштабирование по оси Y
scaleZ()
- масштабирование по оси Z
skew()
- наклон
skewX()
- наклон по оси X
skewY()
- наклон по оси Y
translate()
- наклон
translateX()
- наклон по оси X
translateY()
- наклон по оси Y
translateZ()
- наклон по оси Z
var()
- переменная
@-правила
@charset
- кодировки внешнего CSS - файла
@document
- стилевые правила на основе адреса документа
*
@font-face
- настройки шрифтов
@import
- импорт содержимого CSS-файла в текущую стилевую таблицу
@keyframes
- ключевые кадры при анимации элемента
@media
- тип носителя, для которого будет применяться указанный стиль
@page
- значение полей при печати документа
@supports
- поддержка браузера какой - либо возможности
@viewport
- оптимизация веб страницы в зависимости от различных устройств и размероов
*
Селекторы и их комбинации
A
- любой элемент HTML
#id
- идентификатор
.class
- класс
.class1.class2
- классы
*
- универсальный селектор
A B
- вложенные селекторы
A > B
- дочерние селекторы
A + B
- соседние селекторы
A ~ B
- Родственные селекторы
[attr]
- селекторы атрибутов
[attr='value']
- селекторы атрибутов со значением
[attr^='value']
- селекторы атрибутов со значением в начале
[attr$='value']
- селекторы атрибутов со значением в конце
[attr*='value']
- селекторы атрибутов со значением в неопределенном месте
[attr~='value']
- селекторы атрибутов со значением через пробел
[attr|='value']
- селекторы атрибутов со значением через дефис
Псевдоклассы
:active
- стиль активного элемента
:empty
- пустые элементы
:checked
- стиль включенных элементов интерфейса
:default
- стиль элементов форм
:disabled
- стиль заблокированных элементов форм
:enabled
- стиль доступных ( незаблокированных ) элементов форм
:first-child
- стиль первого элемента
:first-of-type
- стиль первого элемента определенного типа
:focus
- стиль для элемента, получающего фокус
:focus-within
- стиль для всего элемента, получающего фокус
:fullscreen
- стили в полноэкранном режиме
:hover
- стиль элемента при наведении на него курсора мыши
:in-range
- стиль элемента при верно введенных данных
:indeterminate
- стиль для переключателей в неопределённом состоянии
:invalid
- стиль невалидной формы
:lang
- задает определенные настроки для разных языков
:last-child
- задает определенные настроки для разных языков
:last-of-type
- стиль последнего элемента определённого типа
:link
- стиль непосещенных ссылок
:not
- стили не содержащие указанный селектор
:nth-child
- стили к элементам на основе нумерации
:nth-last-child
- стили к элементам на основе нумерации от последнего
:nth-last-of-type
- стили к элементам указанного типа
:nth-of-type
- стили к элементам указанного типа
:only-child
- применяется к дочернему элементу
:only-of-type
- применяется к дочернему элементу указанного типа
:optional
- стили поля у которого не задан атрибут required
:out-of-range
- стили поля с неверными значениями, выходящими из заданного диапазона
:placeholder-shown
- стиль input / textarea, отображающего в данный момент подсказки
:read-only
- стиль поля формы с атрибутом readonly
:read-write
- стиль поля формы доступным для редактирования
:required
- стиль поля формы с обязательным вводом
:root
- обращение к самому главному родительскому элементу
:target
- стиль целевого элемента
:valid
- стиль пройденного проверку поля формы
:visited
- стиль посещенных ссылок
Псевдоэлементы
::after
- вывод контента после содержимого элемента
::backdrop
- отображается ниже самого верхнего элемента в стеке по оси Z
::before
- вывод контента до содержимого элемента
::first-letter
- стиль первого символа в тексте
::first-line
- стиль первой строки форматированного текста
::placeholder
- стиль подсказывающего текста
::selection
- стиль выделенного пользователем текста
Единицы измерения
px, em, rem, %, vw, vh, vmin, vmax, fr, ex, ch ...
- единицы измерения
A
accent-color
- цвет акцента для некоторых элементов формы
align-content
- выравнивание строк вдоль поперечной оси flex / grid
align-items
- выравнивание элементов flex / grid по поперечной оси
align-self
- выравнивает элемент flex / grid по поперечной оси
all
- сброс всех значений
animation
- создание анимации
animation-delay
- задержка старта анимации
animation-direction
- направление анимации
animation-duration
- время длительности анимации
animation-fill-mode
- стили объекта анимации до и после ее выполнения
animation-iteration-count
- количество повторений анимации
animation-name
- имя анимации
animation-play-state
- состояние анимации
animation-timing-function
- функция расчета значений анимации
aspect-ratio
- соотношение сторон элемента
B
backface-visibility
- видимость задней грани элемента
backdrop-filter
- эффекты / фильтры
background
- все правила фона
background-attachment
- поведение фонового изображения при скролле
background-blend-mode
- способ наложения фона
background-clip
- поведение фона при наличии границы
background-color
- цвет фона
background-image
- фоновое изображение
background-origin
- область позиционирования фонового изображения
background-position
- позиционирование фонового изображения
background-position-x
- позиционирование фонового изображения по оси X
background-position-y
- позиционирование фонового изображения по оси Y
background-repeat
- повтор фонового изображения
background-size
- размер фонового изображения
block-size
- размер элемента по блочной оси
border
- граница элемента
border-bottom
- нижняя граница элемента
border-bottom-color
- цвет нижней границы элемента
border-bottom-left-radius
- закругление нижнего левого угла элемента
border-bottom-right-radius
- закругление нижнего правого угла элемента
border-style
- стиль границы
border-bottom-style
- стиль нижней границы
border-bottom-width
- толщина нижней границы
border-collapse
- поведение границ таблицы
border-color
- цвет границы
border-image
- рисованная рамка вокруг элемента
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-spacing
- расстояние между границами ячеек в таблице
border-top
- верхняя граница элемента
border-top-color
- цвет верхней границы элемента
border-top-left-radius
- закругление верхнего левого угла элемента
border-top-right-radius
- закругление верхнего правого угла элемента
border-top-style
- стиль верхней границы
border-top-width
- толщина верхней границы
border-width
- толщина границы
bottom
- позиция от нижнего края
box-decoration-break
- оформление фрагмента текста при его переносе на другую строку
box-shadow
- тень элемента
box-sizing
- алгоритм подстчета размеров
C
caption-side
- положение заголовка таблицы
caret-color
- цвет текстового курсора
clear
- очистка обтеканий
clip-path
- создание ограниченной области
color
- цвет текста
column-count
- количество колонок в тексте
column-fill
- распределение содержимого внутри колонок
column-gap
- расстояние между колонками в тексте
column-rule
- линия между колонок и ее параметры
column-rule-color
- цвет линии между колонок
color-scheme
- отображение в цветовых схемах
column-rule-style
- стиль линии между колонок
column-span
- отображение элемента в многоколоночном тексте
column-width
- ширина колонки в многоколоночном тексте
column-rule-width
- толщина линии между колонок
columns
- ширина и количество колонок многоколоночного текста
content
- вставка генерированного содержимого
counter-increment
- увеличение или уменьшение значения одного или нескольких счетчиков CSS
counter-reset
- создает или сбрасывает один или несколько счетчиков CSS
cursor
- вид курсора
D
direction
- направление текста
display
- тип элемента
E
empty-cells
- отображение границ и фона в ячейке
F
filter
- эффекты для элемента
flex
- сокращённое свойство для flex-grow, flex-shrink, flex-basis
flex-basis
- начальный размер flex элемента
flex-direction
- задает основную ось flex контейнера
flex-flow
- flex-direction + flex-wrap
flex-shrink
- сжатие flex элементов
flex-wrap
- перенос элементов flex контейнера
float
- плавающий элемент
font
- все правила шрифта
font-family
- семейство шрифов
font-kerning
- кернинг шрифта
font-size
- размер шрифта
font-stretch
- начертание шрифта
font-style
- наклон шрифта
font-variant
- модификация символов шрифта
flex-grow
- пространсво флекса внутри контейнера
font-weight
- толщина шрифта
G
gap
- промежутки между строками и столбцами сетки
grid
- сокращенное свойство для свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow
grid-area
- имя элемента сетки
grid-auto-columns
- индекс размера столбца
grid-auto-flow
- вставка автоматически размещаемых элементов в сетку
grid-auto-rows
- индекс размера строки
grid-column-end
- конец элемента сетки
grid-column-gap
- размер зазора между столбцами
grid-column-start
- начало элемента сетки
grid-column
- сокращение для grid-column-start + grid-column-end
grid-gap
- отступ между строк и ячеек grid
grid-row-end
- конец элемента сетки
grid-row-gap
- размер зазора между строками
grid-row-start
- начало элемента сетки
grid-row
- сокращение для grid-row-start + grid-row-end
grid-template-areas
- элементы grid сетки
grid-template-columns
- размеры столбцов grid сетки
grid-template-rows
- размеры строк grid сетки
grid-template
- сокращение для grid-template-rows, grid-template-columns и grid-template-areas
H
height
- высота элемента
hyphens
- переносы слов в блоке текста
J
justify-content
- выравнивание flex элементов по главной оси
justify-self
- выравнивание grid элемента
L
left
- позиция от левого края
letter-spacing
- отступ между символами
line-clamp
- ограничение текста
line-height
- минимальная высота строки текста
list-style
- стилизация списка
list-style-image
- изображение маркера элементов списка
list-style-position
- позиция маркера элементов списка
list-style-type
- стиль маркера элементов списка
M
margin
- внешний отступ
margin-bottom
- внешний отступ снизу
margin-top
- внешний отступ сверху
margin-left
- внешний отступ слева
margin-right
- внешний отступ справа
max-height
- максимальная высота элемента
max-width
- максимальная ширина элемента
min-height
- минимальная высота элемента
min-width
- минимальная ширина элемента
mix-blend-mode
- режим наложения исходного цвета на фоновый цвет или фоновое изображение
O
object-fit
- заполнение элемента
opacity
- непрозрачность элемента
order
- порядок flex элемента
outline
- обводка элемента
outline-color
- цвет обводки
outline-offset
- отступ обводки
outline-style
- стиль обводки
outline-width
- ширина обводки
overflow
- отображение переполненного блока
overflow-x
- отображение переполненного блока по оси X
overflow-y
- отображение переполненного блока по оси Y
P
padding
- внутренний отступ
padding-block
- начальный и конечный внутренние отступы элемента по блочной оси
padding-block-end
- конечный внутренний отступ элемента по блочной оси
padding-block-start
- начальный внутренний отступ элемента по блочной оси
padding-bottom
- внутренний отступ снизу
padding-inline
- начальный и конечный внутренние отступы элемента по строчной оси
padding-inline-end
- конечный внутренний отступ элемента по строчной оси
padding-inline-start
- начальный строчной отступ элемента по блочной оси
padding-left
- внутренний отступ слева
padding-right
- внутренний отступ справа
padding-top
- внутренний отступ сверху
page-break-after
- разрыв страницы при печати документа
page-break-before
- разрыв страницы при печати документа
page-break-inside
- разрыв страницы внутри элемента
perspective
- эффект перспективы
perspective-origin
- определяет точку сходимости линий при перспективе
pointer-events
- контроль событий мыши
position
- позиционирование элемента
place-content
- универсальное свойство для align-items и justify-content
Q
quotes
- тип кавычек
R
resize
- размер текстового поля
right
- позиция от правого края
S
scroll-behavior
- поведение прокрутки внутри элемента
T
tab-size
- настройка ширины символа табуляции
table-layout
- вычисление ширины ячеек таблицы
text-align
- горизонтальное выравнивание текста
text-align-last
- выравнивание последней строки блока текста
text-decoration
- декорация текста
text-decoration-color
- цвет линии подчеркивания
text-decoration-line
- линия подчеркивания текста
text-decoration-style
- стиль линии подчеркивания
text-decoration-skip-ink
- вывод линии подчеркивания
text-emphasis
- маркер над символом текста
text-emphasis-color
- цвет маркера над символом текста
text-emphasis-position
- положение маркера над символом текста
text-emphasis-style
- вид маркера над символом текста
text-fill-color
- цвет заливки символов текста
text-ident
- отступ абзаца
text-orientation
- ориентация текста
text-overflow
- поведение скрытого текста
text-shadow
- тень текста
text-stroke
- цвет и толщина контура вокруг букв и символов текста
text-stroke-color
- цвет контура вокруг букв и символов текста
text-stroke-width
- толщина контура вокруг букв и символов текста
text-transform
- регистр текста
top
- позиция от верхнего края
transform
- трансформация элемента
transform-origin
- точка трансформации
transform-style
- плоскость дочерних элементов
transition
- плавный переход свойства
transition-delay
- задержка перед запуском перехода
transition-duration
- длительность плавного перехода
transition-property
- свойство плавного перехода
transition-timing-function
- фукция расчета перехода
U
unicode-bidi
- расположение текста используемого языка
user-select
- управление поведением выделения текста
V
vertical-align
- вертикальное выравнивание
visibility
- отображение / скрытие элемента
W
white-space
- пробелы между словами
widows
- минимальное количество строк, которое должно оставаться в верхней части страницы при разрыве страницы внутри элемента
width
- ширина
word-break
- перенос строк внутри слов
word-spacing
- интервал между словами
word-wrap
- перенос длинных слов
writing-mode
- направление текста
Z
z-index
- индекс элемента по оси Z