Справка:CSS/Свойства

В CSS существует множество различных свойств, присущих элементам, которые принимают несколько ключевых значений.

форма записи: свойство: значение

(в статье опущены: gradient, transform, transition, animation, grid, flex, др.)

Основные свойства[]

Основные свойства, применяемые к блокам:

background:grey ─ задает фон элемента
- расширенная запись ─ background-color / см.Справка:Цвет
- также есть возможность задать картинку через background-image, но этого нельзя сделать через встроенный стиль (style=""), только через Mediawiki страницу
  / см.Справка:Использование служебной страницы «CSS»
border: 1px solid red ─ задает границы элемента
- border-radius:5px ─ задает скругление рамок
margin:2px ─ задает отступы от других элементов
padding:2px ─ задает внутренние отступы

Основные свойства, применяемые к тексту:

color:grey ─ задает цвет текста
font-weight:bold; ─ делает текст жирным
text-align: center ─ задает выравнивание текста
по центру
text-shadow: black 2px 3px 3px; ─ добавляет тень тексту

свойство display позволяет изменить поведение элемента:
(inline | block | inline-block | inline-table | list-item | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row )

Свойства могут принимать следующие значения:

Единицы измерения[]

Абсолютные: сантиметры (cm), миллиметры (mm) и дюймы (in)
- Не смотря на то, что они предназначены для одинакового отображения элементов на странице, их значение соответствует некоторому значению в пикселях, а не реальному значению.
Типографские: пункты (pt) и пики (pc) /1/72 дюйма и 1/6 дюйма
- Обычно эти два вида используются при указании размера для вывода страниц на печать.
Относительные: пиксели (px) и проценты (%)
- последние ─ в зависимости от родительского элемента
Шрифтозависимые относительные: em ─ высота текущего шрифта, rem ─ высота шрифта элемента html, ex ─ высота символа "х" в нижнем регистре шрифта, ch - символа "0"
Единицы области просмотра: vw (ширина) и vh (высота)

Также все единицы могут быть отрицательны и десятичны.

Другие значения[]

auto ─ установить автоматически
initial ─ сброс на значение по-умолчанию
inherit ─ наследовать свойство от родителя (подробнее про наследование в CSS/Принципы)
none ─ не задано
length ─ единица длины

Общие свойства[]

clear: none | left | right | both | initial | inherit; Определяет с какой стороны текущего элемента не допускаются плавающие элементы (у которых свойство float имеет значение left или right).
clip: auto | shape | initial | inherit; Определяет размеры абсолютно позиционированного элемента, в пределах которого содержимое будет видимым (остальное обрезается).
display: inline | block | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit; Определяет, как должен отображаться определенный элемент HTML.
float: none | left | right | initial | inherit; Определяет будет ли элемент плавающим.
height: auto | length | initial | inherit; Устанавливает высоту области содержимого элемента.
margin(-top-right-bottom-left): length | auto | initial | inherit; Устанавливает величину отступа от каждого края элемента в одном объявлении.
max-height: none | length | initial | inherit; Устанавливает максимальную высоту элемента.
max-width: none | length | initial | inherit; Устанавливает максимальную ширину элемента.
min-height: length | initial | inherit; Устанавливает минимальную высоту элемента.
min-width: length | initial | inherit; Устанавливает минимальную ширину элемента.
overflow(-x-y): visible | hidden | scroll | auto | initial | inherit; Указывает, что произойдёт, если содержимое переполняет размеры элемента.
padding(-top-right-bottom-left): length | initial | inherit; Устанавливает величину внутренних отступов элемента в одном объявлении.
position: static | absolute | fixed | relative | initial | inherit; Указывает какой тип позиционирования используется для элемента(статический, относительный, абсолютный или фиксированный).

top, right, bottom, left: auto | length | initial | inherit; Указывает направление смещения позиционированного элемента от края.

visibility: visible | hidden | collapse | initial | inherit; Определяет, является ли элемент видимым.
width: auto | length | initial | inherit; Устанавливает ширину области содержимого элемента.
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit ;; Определяет вертикальное позиционирование встроенных строчных (inline) элементов или ячеек таблицы (table-cell).
z-index: auto | number | initial | inherit; Определяет порядок расположения позиционированных элементов по оси Z (порядок наложения элементов друг на друга).

Свойства шрифта[]

@font-face: Правило, позволяющее скачать и использовать шрифты, отличные от "безопасных веб-шрифтов" (TTF/OTF, WOFF, WOFF2, SVG). Также см. Справка:Подключение_Google_Fonts
font: font-style font-variant font-weight font-size / line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit; Устанавливает все свойства шрифта в одном объявлении.
font-family: font | initial | inherit; Задает шрифт для элемента.
font-size: medium | small | x-small | xx-small | smaller | large | x-large | xx-large | larger | length | initial | inherit; Задает размер шрифта элемента.
font-style: normal | italic | oblique | initial | inherit; Задает стиль шрифта для элемента.
font-variant: normal | small-caps | initial | inherit; Указывает, должен ли текст быть выведен в капители (оставить без модификаций строчные буквы или установить строчные знаки как уменьшенные заглавные).
font-weight: normal | bold | bolder | lighter | number | initial | inherit; Устанавливает насколько жирным будет выглядеть текст в элементе.

Свойства текста[]

color: color | initial | inherit; Задает цвет текста. См. Справка:Цвет
letter-spacing: normal | length | initial | inherit; Задает интервал между символами в тексте.
text-align: left | right | center | justify | initial | inherit; Задает горизонтальное выравнивание текста.
line-height: normal | number | length | initial | inherit; Устанавливает высоту строки.
text-indent: length | initial | inherit; Задает отступ первой строки в блоке.
text-shadow: h-shadow (горизонтальная тень) v-shadow (вертикальная тень) blur-radius (радиус размытия) color (цвет) | none | initial | inherit; Добавляет тень к тексту.
text-transform: none | capitalize | uppercase | lowercase | initial | inherit; Задает регистр текста.
user-select: all | auto | text | none; Определяет может ли пользователь выделить текст элемента.
white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit; Определяет как отображать пробелы внутри элемента.
word-break: normal | break-all | keep-all | initial | inherit; Указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область. Свойство используется, когда в тексте встречается одновременно как CJK, так и не-CJK текст (Китайский, Японский, Корейский).
word-spacing: normal | length | initial | inherit; Увеличивает или уменьшает пробел между словами в тексте.
word-wrap: normal | break-word | initial | inherit; Указывает, переносить ли длинные слова, которые не помещаются по ширине.

Свойства фона[]

background: Позволяет установить все свойства фона за раз.
background-attachment: scroll | fixed | local | initial | inherit; Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокрутка с остальной частью страницы).
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity; Определяет режим смешивания слоя каждого фонового цвета ( и / или изображения).
background-color: color | transparent | initial | inherit; Определяет цвет фона элемента.
background-clip: border-box | padding-box | content-box | initial | inherit; Определяет область элемента для которой будет задан задний фон.
background-image: url | none | initial | inherit; Задает одно или несколько фоновых изображений для элемента.
background-origin: padding-box | border-box | content-box | initial | inherit; Определяет как позиционируется фоновое изображение/-я относительно элемента.
background-position: значение (left/top/right/bottom/x% y%/x y/initial/inherit); Задает положение (позицию) фонового изображения.
background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit; Устанавливает, как будет повторяться фоновое изображение.
background-size: auto | length | cover | contain | initial | inherit; Определяет размер фонового изображения/-ий.

Свойства границ[]

border(-top-right-bottom-left): border-width border-style border-color | initial | inherit; Позволяет установить все свойства границ в одном объявлении.
border-color: color | transparent | initial | inherit; Устанавливает цвет для всех границ в одном объявлении.
border-image: source slice / width / outset / repeat | initial | inherit; Позволяет указать изображение, которое будет использовано вместо границы вокруг элемента.

border-image-source: none | image | initial | inherit); Указывает путь к изображению, которое будет использовано в качестве границы. Допускается использование градиентов вместо изображения.
border-image-slice: number | % | fill | initial | inherit; Определяет, как разделить изображение, используемое в роли изображения-границы и указанное в свойстве border-image-sourcecss3.
border-image-width: number | % | auto | initial | inherit; Задает ширину границы-изображения путем определения смещения (внутрь элемента от края границы).
border-image-outset: length | number | initial | inherit; Определяет величину, на которую область границы изображения выходит за пределы блока границы.
border-image-repeat: stretch | repeat | round | space | initial | inherit; Определяет, должна ли граница изображения быть повторена, масштабируема или растянута.

border-radius (от 1 до 4): length | % | length или % / length или % | initial | inherit; Позволяет определить форму границ элемента. Это свойство является короткой записью для свойств border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius и border-top-right-radius.
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; Устанавливает стиль для всех границ в одном объявлении.
border-width: medium | thin | thick | length | initial | inherit; Устанавливает ширину для всех границ в одном объявлении.

outline: Устанавливает все свойства контура элемента в одном объявлении (контур не является частью элемента и не влияет на его ширину).
outline-color: invert | color | initial | inherit; Устанавливает цвет контура элемента.
outline-offset: length | initial | inherit; Добавляет пространство между контуром и краем элемента или его границы (при наличии).
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; Устанавливает стиль контура элемента (за пределами границы).
outline-width: medium | thin | thick | length | initial | inherit; Задает ширину контура элемента.
resize: none | both | horizontal | vertical | initial | inherit; Указывает, может ли размер элемента изменяться пользователем.
text-overflow: clip | ellipsis | string | initial | inherit; Указывает, что должно произойти, когда текст переполняет, содержащий элемент.
filter (допускается иcпользование нескольких фильтров в одном): none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); Устанавливает визуальный эффект для элемента (например, размытие или изменение цвета).

box-shadow: none | inset h-shadow v-shadow blur-radius spread-radius color | initial | inherit; Добавляет одну или несколько теней к элементу.

Свойства таблиц[]

border-collapse: separate | collapse | initial | inherit; Устанавливает, как отображать границы вокруг ячеек таблицы.
border-spacing: length | initial | inherit; Задает расстояние между границами соседних ячеек.
caption-side: top | bottom | initial | inherit; Устанавливает расположение заголовка таблицы (над/под таблицей).
empty-cells: show | hide | initial | inherit; Устанавливает, следует ли отображать границы и фон пустых ячеек в таблице.
table-layout: auto | fixed | initial | inherit; Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом.