Свойства CSS

Свойство CSS — это параметр, используемый в объявлении CSS, который позволяет задавать стиль определённых аспектов выбранных элементов. Например, свойство opacity используется для установки непрозрачности выбранного элемента, позволяя управлять видимостью содержимого за этим элементом:

/* Set 0.8 opacity on <img> elements */
img {
  opacity: 0.8;
}

У каждого свойства есть имя (например, opacity), значение (например, 0.8) и определённое поведение, влияющее на отображение документа. В CSS также определены сокращённые свойства, позволяющие задавать несколько связанных свойств в одном объявлении. Например, свойство margin является сокращённой записью свойств margin-top, margin-right, margin-bottom и margin-left и задаёт внешние отступы со всех четырёх сторон элемента:

/* Give <img> elements 1rem of margin */
img {
  margin: 1rem;
}

Синтаксис

selector {
  property: value;
}

Алфавитный указатель свойств

Стандартные свойства, определённые спецификациями CSS:

Разное

• Пользовательские свойства (--*): переменные CSS

A

• accent-color
• align-content
• align-items
• align-self
• alignment-baseline
• all (сокращённое свойство)
• anchor-name
• anchor-scope
• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-range-end
• animation-range-start
• animation-range (сокращённое свойство)
• animation-timeline
• animation-timing-function
• animation (сокращённое свойство)
• appearance
• aspect-ratio

B

• backdrop-filter
• backface-visibility
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position-x
• background-position-y
• background-position
• background-repeat (сокращённое свойство)
• background-repeat-x
• background-repeat-y
• background-size
• background (сокращённое свойство)
• baseline-shift
• baseline-source
• block-size

Border-*

• border-block-color
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-end (сокращённое свойство)
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-start (сокращённое свойство)
• border-block-style
• border-block-width
• border-block (сокращённое свойство)
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-bottom (сокращённое свойство)
• border-collapse
• border-color (сокращённое свойство)
• border-end-end-radius
• border-end-start-radius
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-image (сокращённое свойство)
• border-inline-color
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-end (сокращённое свойство)
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-start (сокращённое свойство)
• border-inline-style
• border-inline-width
• border-inline (сокращённое свойство)
• border-left-color
• border-left-style
• border-left-width
• border-left (сокращённое свойство)
• border-radius (сокращённое свойство)
• border-right-color
• border-right-style
• border-right-width
• border-right (сокращённое свойство)
• border-spacing
• border-start-end-radius
• border-start-start-radius
• border-style (сокращённое свойство)
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-top (сокращённое свойство)
• border-width (сокращённое свойство)
• border (сокращённое свойство)

B - C

• bottom
• box-align
• box-decoration-break
• box-direction
• box-flex-group
• box-flex
• box-lines
• box-ordinal-group
• box-orient
• box-pack
• box-shadow
• box-sizing
• break-after
• break-before
• break-inside
• caption-side
• caret-animation
• caret-color
• caret-shape
• caret (сокращённое свойство)
• clear
• clip-path
• clip-rule
• clip
• color-interpolation-filters
• color-interpolation
• color-scheme
• color
• column-count
• column-fill
• column-gap
• column-height
• column-rule-color
• column-rule-style
• column-rule-width
• column-rule (сокращённое свойство)
• column-span
• column-width
• column-wrap
• columns (сокращённое свойство)
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size (сокращённое свойство)
• contain-intrinsic-width
• contain
• container-name
• container-type
• container (сокращённое свойство)
• content-visibility
• content
• corner-block-end-shape
• corner-block-start-shape
• corner-bottom-left-shape
• corner-bottom-right-shape
• corner-bottom-shape (сокращённое свойство)
• corner-end-end-shape
• corner-end-start-shape
• corner-inline-end-shape
• corner-inline-start-shape
• corner-left-shape (сокращённое свойство)
• corner-right-shape (сокращённое свойство)
• corner-shape (сокращённое свойство)
• corner-start-end-shape
• corner-start-start-shape
• corner-top-left-shape
• corner-top-right-shape
• corner-top-shape (сокращённое свойство)
• counter-increment
• counter-reset
• counter-set
• cursor
• cx
• cy

D - F

• d
• direction
• display
• dominant-baseline
• dynamic-range-limit
• empty-cells
• field-sizing
• fill-opacity
• fill-rule
• fill
• filter
• flex-basis
• flex-direction
• flex-flow (сокращённое свойство)
• flex-grow
• flex-shrink
• flex-wrap
• flex (сокращённое свойство)
• float
• flood-color
• flood-opacity
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-palette
• font-size-adjust
• font-size
• font-smooth
• font-stretch
• font-style
• font-synthesis-position
• font-synthesis-small-caps
• font-synthesis-style
• font-synthesis-weight
• font-synthesis (сокращённое свойство)
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variant (сокращённое свойство)
• font-variation-settings
• font-weight
• font-width
• font (сокращённое свойство)
• forced-color-adjust

G - I

• gap (сокращённое свойство)
• grid-area (сокращённое свойство)
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column-end
• grid-column-start
• grid-column (сокращённое свойство)
• grid-row-end
• grid-row-start
• grid-row (сокращённое свойство)
• grid-template-areas
• grid-template-columns
• grid-template-rows
• grid-template (сокращённое свойство)
• grid (сокращённое свойство)
• hanging-punctuation
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-orientation
• image-rendering
• image-resolution
• initial-letter
• inline-size
• inset-block-end
• inset-block-start
• inset-block (сокращённое свойство)
• inset-block (сокращённое свойство)
• inset-inline-end
• inset-inline-start
• inset-inline (сокращённое свойство)
• inset-inline (сокращённое свойство)
• inset (сокращённое свойство)
• inset (сокращённое свойство)
• interactivity
• interest-delay
• interest-delay-end
• interest-delay-start
• interpolate-size
• isolation

J - M

• justify-content
• justify-items
• justify-self
• left
• letter-spacing
• lighting-color
• line-break
• line-clamp
• line-height-step
• line-height
• list-style-image
• list-style-position
• list-style-type
• list-style (сокращённое свойство)
• list-style (сокращённое свойство)
• margin-block-end
• margin-block-start
• margin-block (сокращённое свойство)
• margin-bottom
• margin-inline-end
• margin-inline-start
• margin-inline (сокращённое свойство)
• margin-left
• margin-right
• margin-top
• margin-trim
• margin (сокращённое свойство)
• marker-end
• marker-mid
• marker-start
• marker
• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width
• mask-border (сокращённое свойство)
• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-type
• mask (сокращённое свойство)
• math-depth
• math-shift
• math-style
• max-block-size
• max-height
• max-inline-size
• max-width
• min-block-size
• min-height
• min-inline-size
• min-width
• mix-blend-mode

O - P

• object-fit
• object-position
• object-view-box
• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate
• offset (сокращённое свойство)
• opacity
• order
• orphans
• outline-color
• outline-offset
• outline-style
• outline-width
• outline (сокращённое свойство)
• overflow-anchor
• overflow-block
• overflow-clip-margin
• overflow-inline
• overflow-wrap
• overflow-x
• overflow-y
• overflow (сокращённое свойство)
• overlay
• overscroll-behavior-block
• overscroll-behavior-inline
• overscroll-behavior-x
• overscroll-behavior-y
• overscroll-behavior (сокращённое свойство)
• padding-block-end
• padding-block-start
• padding-block (сокращённое свойство)
• padding-bottom
• padding-inline-end
• padding-inline-start
• padding-inline (сокращённое свойство)
• padding-left
• padding-right
• padding-top
• padding (сокращённое свойство)
• page-break-after
• page-break-before
• page-break-inside
• page
• paint-order
• path-length
• perspective-origin
• perspective
• place-content (сокращённое свойство)
• place-items (сокращённое свойство)
• place-self (сокращённое свойство)
• pointer-events
• position-anchor
• position-area
• position-try-fallbacks
• position-try-order
• position-try (сокращённое свойство)
• position-visibility
• position
• print-color-adjust

Q - S

• quotes
• r
• reading-flow
• reading-order
• resize
• right
• rotate
• row-gap
• ruby-align
• ruby-overhang
• ruby-position
• rx
• ry
• scale
• scroll-behavior
• scroll-initial-target
• scroll-margin-block-end
• scroll-margin-block-start
• scroll-margin-block (сокращённое свойство)
• scroll-margin-bottom
• scroll-margin-inline-end
• scroll-margin-inline-start
• scroll-margin-inline (сокращённое свойство)
• scroll-margin-left
• scroll-margin-right
• scroll-margin-top
• scroll-margin (сокращённое свойство)
• scroll-marker-group
• scroll-padding-block-end
• scroll-padding-block-start
• scroll-padding-block (сокращённое свойство)
• scroll-padding-bottom
• scroll-padding-inline-end
• scroll-padding-inline-start
• scroll-padding-inline (сокращённое свойство)
• scroll-padding-left
• scroll-padding-right
• scroll-padding-top
• scroll-padding (сокращённое свойство)
• scroll-snap-align
• scroll-snap-stop
• scroll-snap-type
• scroll-target-group
• scroll-timeline-axis
• scroll-timeline-name
• scroll-timeline (сокращённое свойство)
• scrollbar-color
• scrollbar-gutter
• scrollbar-width
• shape-image-threshold
• shape-margin
• shape-outside
• shape-rendering
• speak-as
• stop-color
• stop-opacity
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-opacity
• stroke-width
• stroke

T - Z

• tab-size
• table-layout
• text-align-last
• text-align
• text-anchor
• text-autospace
• text-box-edge
• text-box-trim
• text-box (сокращённое свойство)
• text-combine-upright
• text-decoration-color
• text-decoration-inset
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-skip
• text-decoration-style
• text-decoration-thickness
• text-decoration (сокращённое свойство)
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-emphasis (сокращённое свойство)
• text-indent
• text-justify
• text-orientation
• text-overflow
• text-rendering
• text-shadow
• text-size-adjust
• text-spacing-trim
• text-transform
• text-underline-offset
• text-underline-position
• text-wrap-mode
• text-wrap-style
• text-wrap (сокращённое свойство)
• timeline-scope
• top
• touch-action
• transform-box
• transform-origin
• transform-style
• transform
• transition-behavior
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• transition (сокращённое свойство)
• translate
• unicode-bidi
• user-modify
• user-select
• vector-effect
• vertical-align (сокращённое свойство)
• view-timeline-axis
• view-timeline-inset
• view-timeline-name
• view-timeline (сокращённое свойство)
• view-transition-class
• view-transition-name
• visibility
• white-space-collapse
• white-space
• widows
• width
• will-change
• word-break
• word-spacing
• writing-mode
• x
• y
• z-index
• zoom

Нестандартные свойства

Нестандартные свойства с префиксами производителей включают:

префикс -moz-

• -moz-float-edge
• -moz-force-broken-image-icon
• -moz-orient
• -moz-user-focus
• -moz-user-input

префикс -webkit-

• -webkit-box-reflect
• -webkit-border-before (сокращённое свойство)
• -webkit-mask-box-image (сокращённое свойство)
• -webkit-mask-composite
• -webkit-mask-position-x
• -webkit-mask-position-y
• -webkit-mask-repeat-x
• -webkit-mask-repeat-y
• -webkit-tap-highlight-color
• -webkit-text-fill-color
• -webkit-text-security
• -webkit-text-stroke (сокращённое свойство)
• -webkit-text-stroke-color
• -webkit-text-stroke-width
• -webkit-touch-callout

Спецификации

См. также

• Синтаксис CSS
• Псевдоэлементы
• Расширения CSS Firefox с префиксом производителя (-moz-)
• Расширения CSS WebKit с префиксом производителя (-webkit-)
• Префикс производителя