Справочник свойств CSS

По началу мне, возможно как и вам, было тяжело найти полную информацию по CSS. Все справочники были не полными или с устаревшими свойствами. Я решил вам помочь, и собрал для вас полный справочник CSS. Справочник CSS включает в себя все актуальные, на данный, свойства. Рекомендую вам скачать данный материал и распечатать, что бы он бы всегда у вас под рукой, как это сделал я.

Всем привет. Я сделал справочник CSS. В него входят все свойства и их значения. Вы можете его распечатать, что бы он всегда был у вас под рукой. Так же я добавил документ со всей информацией в конце этого поста.

Cправочник CSS.

Flexbox

СвойствоОписаниеCSS
align-contentЗадаёт вертикальное выравнивание flex-элементов для flex-контейнеров с многострочным содержимым.3
align-itemsВертикальное выравнивание flex-элементов внутри flex-контейнера.3
align-selfВертикальное выравнивание flex-элемента.3
flexОпределяет ширину, сжатие и растяжение для flex-элемента.3
flex-basisУказывает ширину для flex-элемента.3
flex-directionНаправление расположения flex-элементов.3
flex-flowНаправление расположения и возможность переноса для flex-элементов.3
flex-growОпределяет коэффициент растяжения flex-элемента.3
flex-shrinkОпределяет коэффициент сжатия flex-элемента.3
flex-wrapОпределяет возможность переноса flex-элементов.3
justify-contentГоризонтальное выравнивание flex-элементов.3
orderОпределяет порядок вывода flex-элементов.3

Анимация

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

Внешний и внутренний отступы

СвойствоОписаниеCSS
marginЗадает внешние отступы для элемента.1
margin-bottomЗадает нижний внешний отступ для элемента.1
margin-leftЗадает левый внешний отступ для элемента.1
margin-rightЗадает правый внешний отступ для элемента.1
margin-topЗадает верхний внешний отступ для элемента.1
paddingУстанавливает внутренние отступы в элементе.1
padding-bottomЗадает нижний отступ(внутреннее поле) для элемента.1
padding-leftЗадает левый отступ(внутреннее поле) для элемента.1
padding-rightЗадает правый отступ(внутреннее поле) для элемента.1
padding-topЗадает верхний отступ(внутреннее поле) для элемента.1

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

СвойствоОписаниеCSS
bottomУказывает направление смещения позиционированного элемента от нижнего края.2
clearУказывает с какой стороны элемента не допускаются плавающие элементы.1
clipОпределяет видимую часть абсолютно позиционированных элементов.2
displayУказывает, как будет отображаться элемент в браузере.1
floatОпределяет будет ли элемент плавающим.1
leftУказывает направление смещения позиционированного элемента от левого края.2
positionОпределяет метод позиционирования элементов.2
rightУказывает направление смещения позиционированного элемента от правого края.2
topУказывает направление смещения позиционированного элемента от верхнего края.2
visibilityОпределяет, является ли элемент видимым.2
z-indexУказывает порядок расположения элементов по оси Z.2

Размер

СвойствоОписаниеCSS
heightУстанавливает фиксированную высоту.1
max-heightУказывает максимальную фиксированную высоту.2
max-widthУказывает максимальную фиксированную ширину.2
min-heightУказывает минимальную фиксированную высоту.2
min-widthУказывает минимальную фиксированную ширину.2
overflowОпределяет, что предпринять, если содержимое элемента превосходит размер области элемента.2
overflow-xУказывает, обрезать или нет левый/правый край содержимого – если оно переполняет доступную область элемента для его содержания.3
overflow-yУказывает, обрезать или нет верхний/нижний край содержимого – если оно переполняет доступную область элемента для его содержания.3
resizeУказывает, может ли размер элемента изменяться пользователем.3
widthУстанавливает фиксированную ширину.1

Рамка и контур

СвойствоОписаниеCSS
borderПозволяет использовать основные свойства границ в одном объявлении.1
border-bottomПозволяет использовать значения основных свойств для нижней границы рамки в одном объявлении.1
border-bottom-colorЗадает цвет для нижней границы рамки.1
border-bottom-left-radiusПозволяет сделать округлую границу нижнего левого угла.3
border-bottom-right-radiusПозволяет сделать округлую границу нижнего правого угла.3
border-bottom-styleОпределяет стиль для нижней границы рамки.1
border-bottom-widthОпределяет ширину для нижней границы рамки.1
border-colorЗадает цвет для границ рамки элемента.1
border-imageПозволяет использовать изображение в качестве рамки.3
border-leftПозволяет использовать значения основных свойств для левой границы рамки в одном объявлении.1
border-left-colorЗадает цвет для левой границы рамки.1
border-left-styleОпределяет стиль для левой границы рамки.1
border-left-widthОпределяет ширину для левой границы рамки.1
border-radiusПозволяет изменить форму углов.3
border-rightМеняет внешний вид правой границы рамки.1
border-right-colorЗадает цвет для правой границы рамки.1
border-right-styleОпределяет стиль для правой границы рамки.1
border-right-widthЗадает ширину для правой границы рамки.1
border-styleЗадает стиль для границ рамки элемента.1
border-topМеняет внешний вид верхней границы рамки.1
border-top-colorЗадает цвет для верхней границы рамки.1
border-top-left-radiusПозволяет сделать округлую границу верхнего левого угла.3
border-top-right-radiusПозволяет сделать округлую границу верхнего правого угла.3
border-top-styleОпределяет стиль для верхней границы рамки.1
border-top-widthОпределяет ширину для верхней границы рамки.1
border-widthЗадает ширину для границ рамки элемента.1
outlineСоздает внешнюю границу вокруг элемента.2
outline-colorОпределяет цвет внешней границы.2
outline-offsetСдвигает внешнюю границу на заданное расстояние от края элемента.3
outline-styleУказывает стиль для внешней границы.2
outline-widthУказывает ширину для внешней границы.2

Списки

СвойствоОписаниеCSS
list-styleУправляет маркером в списках.1
list-style-imageЗаменяет маркеры списков на изображения.1
list-style-positionОпределяет расположение маркера относительно пункта списка.1
list-style-typeУказывает вид маркера в списке.1

Таблицы

СвойствоОписаниеCSS
border-collapseОпределяет будут ли границы рамки объединены в одну.2
border-spacingОпределяет расстояние между границами смежных ячеек и общей рамкой таблицы.2
caption-sideУказывает расположение заголовка таблицы.2
empty-cellsРегулирует видимость пустых ячеек в таблице.2
table-layoutЗадает алгоритм использования макета таблицы.2

Текст

СвойствоОписаниеCSS
colorИзменяет цвет текста.1
directionОпределяет направление написания текста.2
letter-spacingКонтролирует расстояние между символами в тексте.1
line-heightОпределяет межстрочный интервал(интерлиньяж).1
quotesОпределяет тип кавычек для встроенных цитат.2
text-alignУказывает способ выравнивания содержимого по горизонтали.1
text-decorationДобавляет некоторые элементы декорирования к тексту.1
text-indentОпределяет отступ первой строки в тексте элемента.1
text-overflowУказывает, что должно произойти, когда текст переполняет содержащий элемент.3
text-transformКонтролирует использование строчных и прописных букв в тексте.1
vertical-alignОпределяет вертикальное выравнивание в элементе.1
white-spaceОпределяет способ обработки пробелов внутри элемента.1
word-breakОпределяет правила переноса для не-CJK сценариев.3
word-spacingОпределяет ширину пробелов между словами.1
word-wrapПозволяет прерывать длинные слова для переноса на другую строку.3

Тени и прозрачность

СвойствоОписаниеCSS
box-shadowДобавляет эффект отбрасывания тени к элементу.3
opacityУстанавливает уровень прозрачности элемента.3
text-shadowСоздает тень для текста.3

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

СвойствоОписаниеCSS
perspectiveОпределяет, на сколько пикселей удален 3D элемент от точки обзора.3
perspective-originОпределяет, где располагается 3D элемент на осях x и y.3
transformПрименяет 2D или 3D преобразование к элементу.3
transform-originПозволяет изменить позицию преобразованных элементов.3
transform-styleОпределяет, как вложенные элементы будут отображаться в трехмерном пространстве.3
transitionУправляет эффектом трансформации.3
transition-delayУказывает, когда должен начаться эффект трансформации.3
transition-durationУказывает продолжительность трансформации.3
transition-propertyУказывает название CSS свойства, для которого будет применен эффект трансформации.3
transition-timing-functionЗадает кривую скорости для эффекта трансформации.3

Фон

СвойствоОписаниеCSS
backgroundУстанавливает несколько или все значения свойств фона в одном объявлении.1
background-attachmentУказывает будет ли фоновое изображение фиксированным.1
background-clipОпределяет область в элементе, для которой задается фон.3
background-colorУстанавливает цвет фона для элемента.1
background-imageУстанавливает фоновое изображение в элементе.1
background-originУказывает область позиционирования для фонового изображения.3
background-positionУстанавливает начальное место для фонового изображения.1
background-repeatЗадает, как фоновое изображение будет повторяться на экране.1
background-sizeУказывает размер для фонового изображения.3

Шрифт

СвойствоОписаниеCSS
fontИзменяет стандартный вид текста.1
@font-faceПозволяет использование любого шрифта на странице.3
font-familyУказывает шрифт или семейство шрифтов для текста.1
font-sizeУказывает размер для шрифта.1
font-size-adjustКонтролирует размер неосновных шрифтов.3
font-stretchРегулирует ширину текста.3
font-styleПозволяет изменять стиль текста.1
font-variantКонвертирует строчные буквы в прописные уменьшенного размера.1
font-weightЗадает ширину символов текста.1

Другое

СвойствоОписаниеCSS
box-sizingПозволяет заставить определенные элементы заполнять область определенным способом.3
column-countРазделяет элемент на колонки.3
column-gapЗадает расстояние между колонками элемента.3
column-ruleСвойство column-rule позволяет указать значения свойств column-rule-* (ширину, стиль и цвет) в одном объявлении.3
column-rule-colorОпределяет цвет границы между колонками.3
column-rule-styleОпределяет стиль границы между колонками.3
column-rule-widthУказывает ширину границы между колонками.3
columnsПозволяет использовать значения свойств column-width и column-count в одном объявлении.3
column-spanУказывает элементу количество колонок для обхвата.3
column-widthОпределяет ширину колонок.3
contentОпределяет содержимое для псевдо-элементов ::before и ::after.2
counter-incrementУвеличивает значение счетчика.2
counter-resetУстанавливает начальное значение счетчика.2
cursorИзменяет вид курсора мыши.2
page-break-afterОпределяет наличие или отсутствие разрыва страницы после заданного элемента.2
page-break-beforeОпределяет наличие или отсутствие разрыва страницы перед заданным элементом.2
page-break-insideОпределяет наличие или отсутствие разрыва страницы внутри элемента.2

Ссылка на документ с материалом из данного поста https://yadi.sk/i/Nn_4Y0643QfbPK

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Оставить комментарий

avatar
  Подписаться  
Уведомление о