EineCSSEigenschaft ist ein Parameter, der in einerCSS-Deklaration verwendet wird und es Ihnen ermöglicht, bestimmte Aspekte ausgewählter Elemente zu gestalten. Zum Beispiel wird die Eigenschaftopacity verwendet, um die Deckkraft eines ausgewählten Elements festzulegen, sodass Sie steuern können, ob Inhalte hinter diesem Element sichtbar sind:

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

Jede Eigenschaft hat einen Namen (z.B.opacity), einen Wert (z.B.0.8) und ein definiertes Verhalten für die Darstellung des Dokuments. CSS definiert auch Kurzschreibweise-Eigenschaften, die es Ihnen ermöglichen, mehrere verwandte Eigenschaften in einer einzigen Deklaration anzugeben. Zum Beispiel ist die Eigenschaftmargin eine Kurzschreibweise fürmargin-top,margin-right,margin-bottom undmargin-left, die den Abstand aller vier Seiten eines Elements festlegt:

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

Syntax

selector {  property: value;}

Alphabetisches Verzeichnis der Eigenschaften

Von den CSS-Spezifikationen definierte Standardeigenschaften umfassen Folgendes:

Verschiedenes

• Custom properties (--*): CSS-Variablen

A

• accent-color
• align-content
• align-items
• align-self
• alignment-baseline
• all (Kurzschreibweise)
• anchor-name
• 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 (Kurzschreibweise)
• animation-timeline
• animation-timing-function
• animation (Kurzschreibweise)
• 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-size
• background (Kurzschreibweise)
• block-size

Border-*

• border-block-color
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-end (Kurzschreibweise)
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-start (Kurzschreibweise)
• border-block-style
• border-block-width
• border-block (Kurzschreibweise)
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-bottom (Kurzschreibweise)
• border-collapse
• border-color (Kurzschreibweise)
• 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 (Kurzschreibweise)
• border-inline-color
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-end (Kurzschreibweise)
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-start (Kurzschreibweise)
• border-inline-style
• border-inline-width
• border-inline (Kurzschreibweise)
• border-left-color
• border-left-style
• border-left-width
• border-left (Kurzschreibweise)
• border-radius (Kurzschreibweise)
• border-right-color
• border-right-style
• border-right-width
• border-right (Kurzschreibweise)
• border-spacing
• border-start-end-radius
• border-start-start-radius
• border-style (Kurzschreibweise)
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-top (Kurzschreibweise)
• border-width (Kurzschreibweise)
• border (Kurzschreibweise)

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 (Kurzschreibweise)
• clear
• clip-path
• clip-rule
• clip
• color-interpolation-filters
• color-interpolation
• color-scheme
• color
• column-count
• column-fill
• column-gap
• column-rule-color
• column-rule-style
• column-rule-width
• column-rule (Kurzschreibweise)
• column-span
• column-width
• columns (Kurzschreibweise)
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size (Kurzschreibweise)
• contain-intrinsic-width
• contain
• container-name
• container-type
• container (Kurzschreibweise)
• content-visibility
• content
• corner-block-end-shape
• corner-block-start-shape
• corner-bottom-left-shape
• corner-bottom-right-shape
• corner-bottom-shape (Kurzschreibweise)
• corner-end-end-shape
• corner-end-start-shape
• corner-inline-end-shape
• corner-inline-start-shape
• corner-left-shape (Kurzschreibweise)
• corner-right-shape (Kurzschreibweise)
• corner-shape (Kurzschreibweise)
• corner-start-end-shape
• corner-start-start-shape
• corner-top-left-shape
• corner-top-right-shape
• corner-top-shape (Kurzschreibweise)
• 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 (Kurzschreibweise)
• flex-grow
• flex-shrink
• flex-wrap
• flex (Kurzschreibweise)
• 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 (Kurzschreibweise)
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variant (Kurzschreibweise)
• font-variation-settings
• font-weight
• font (Kurzschreibweise)
• forced-color-adjust

G - I

• gap (Kurzschreibweise)
• grid-area (Kurzschreibweise)
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column-end
• grid-column-start
• grid-column (Kurzschreibweise)
• grid-row-end
• grid-row-start
• grid-row (Kurzschreibweise)
• grid-template-areas
• grid-template-columns
• grid-template-rows
• grid-template (Kurzschreibweise)
• grid (Kurzschreibweise)
• 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 (Kurzschreibweise)
• inset-block (Kurzschreibweise)
• inset-inline-end
• inset-inline-start
• inset-inline (Kurzschreibweise)
• inset-inline (Kurzschreibweise)
• inset (Kurzschreibweise)
• inset (Kurzschreibweise)
• interactivity
• 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 (Kurzschreibweise)
• list-style (Kurzschreibweise)
• margin-block-end
• margin-block-start
• margin-block (Kurzschreibweise)
• margin-bottom
• margin-inline-end
• margin-inline-start
• margin-inline (Kurzschreibweise)
• margin-left
• margin-right
• margin-top
• margin-trim
• margin (Kurzschreibweise)
• 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 (Kurzschreibweise)
• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-type
• mask (Kurzschreibweise)
• 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 (Kurzschreibweise)
• opacity
• order
• orphans
• outline-color
• outline-offset
• outline-style
• outline-width
• outline (Kurzschreibweise)
• overflow-anchor
• overflow-block
• overflow-clip-margin
• overflow-inline
• overflow-wrap
• overflow-x
• overflow-y
• overflow (Kurzschreibweise)
• overlay
• overscroll-behavior-block
• overscroll-behavior-inline
• overscroll-behavior-x
• overscroll-behavior-y
• overscroll-behavior (Kurzschreibweise)
• padding-block-end
• padding-block-start
• padding-block (Kurzschreibweise)
• padding-bottom
• padding-inline-end
• padding-inline-start
• padding-inline (Kurzschreibweise)
• padding-left
• padding-right
• padding-top
• padding (Kurzschreibweise)
• page-break-after
• page-break-before
• page-break-inside
• page
• paint-order
• perspective-origin
• perspective
• place-content (Kurzschreibweise)
• place-items (Kurzschreibweise)
• place-self (Kurzschreibweise)
• pointer-events
• position-anchor
• position-area
• position-try-fallbacks
• position-try-order
• position-try (Kurzschreibweise)
• 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-margin-block-end
• scroll-margin-block-start
• scroll-margin-block (Kurzschreibweise)
• scroll-margin-bottom
• scroll-margin-inline-end
• scroll-margin-inline-start
• scroll-margin-inline (Kurzschreibweise)
• scroll-margin-left
• scroll-margin-right
• scroll-margin-top
• scroll-margin (Kurzschreibweise)
• scroll-marker-group
• scroll-padding-block-end
• scroll-padding-block-start
• scroll-padding-block (Kurzschreibweise)
• scroll-padding-bottom
• scroll-padding-inline-end
• scroll-padding-inline-start
• scroll-padding-inline (Kurzschreibweise)
• scroll-padding-left
• scroll-padding-right
• scroll-padding-top
• scroll-padding (Kurzschreibweise)
• scroll-snap-align
• scroll-snap-stop
• scroll-snap-type
• scroll-target-group
• scroll-timeline-axis
• scroll-timeline-name
• scroll-timeline (Kurzschreibweise)
• 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 (Kurzschreibweise)
• 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 (Kurzschreibweise)
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-emphasis (Kurzschreibweise)
• 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 (Kurzschreibweise)
• timeline-scope
• top
• touch-action
• transform-box
• transform-origin
• transform-style
• transform
• transition-behavior
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• transition (Kurzschreibweise)
• translate
• unicode-bidi
• user-modify
• user-select
• vector-effect
• vertical-align
• view-timeline-axis
• view-timeline-inset
• view-timeline-name
• view-timeline (Kurzschreibweise)
• 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

Nicht standardisierte Eigenschaften

Nicht standardisierte, vendor-präfixierte Eigenschaften umfassen:

-moz- Prefix

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

-webkit- Prefix

• -webkit-box-reflect
• -webkit-border-before (Kurzschreibweise)
• -webkit-mask-box-image (Kurzschreibweise)
• -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 (Kurzschreibweise)
• -webkit-text-stroke-color
• -webkit-text-stroke-width
• -webkit-touch-callout

Spezifikationen

Siehe auch

• CSS-Syntax
• Pseudo-Elemente
• Firefox (-moz-) vendor-präfixierte CSS-Erweiterungen
• WebKit (-webkit-) vendor-präfixierte CSS-Erweiterungen
• Vendor-Präfix