CSS-Eigenschaften
Eine CSS Eigenschaft ist ein Parameter, der in einer CSS-Deklaration verwendet wird und es Ihnen ermöglicht, bestimmte Aspekte ausgewählter Elemente zu gestalten. Zum Beispiel wird die Eigenschaft opacity 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 Eigenschaft margin eine Kurzschreibweise für margin-top, margin-right, margin-bottom und margin-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
A
accent-coloralign-contentalign-itemsalign-selfalignment-baselineall(Kurzschreibweise)anchor-nameanimation-compositionanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-range-endanimation-range-startanimation-range(Kurzschreibweise)animation-timelineanimation-timing-functionanimation(Kurzschreibweise)appearanceaspect-ratio
B
Border-*
border-block-colorborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-end(Kurzschreibweise)border-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-start(Kurzschreibweise)border-block-styleborder-block-widthborder-block(Kurzschreibweise)border-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-bottom(Kurzschreibweise)border-collapseborder-color(Kurzschreibweise)border-end-end-radiusborder-end-start-radiusborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-image(Kurzschreibweise)border-inline-colorborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-end(Kurzschreibweise)border-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-start(Kurzschreibweise)border-inline-styleborder-inline-widthborder-inline(Kurzschreibweise)border-left-colorborder-left-styleborder-left-widthborder-left(Kurzschreibweise)border-radius(Kurzschreibweise)border-right-colorborder-right-styleborder-right-widthborder-right(Kurzschreibweise)border-spacingborder-start-end-radiusborder-start-start-radiusborder-style(Kurzschreibweise)border-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-top(Kurzschreibweise)border-width(Kurzschreibweise)border(Kurzschreibweise)
B - C
bottombox-alignbox-decoration-breakbox-directionbox-flex-groupbox-flexbox-linesbox-ordinal-groupbox-orientbox-packbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-animationcaret-colorcaret-shapecaret(Kurzschreibweise)clearclip-pathclip-ruleclipcolor-interpolation-filterscolor-interpolationcolor-schemecolorcolumn-countcolumn-fillcolumn-gapcolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-rule(Kurzschreibweise)column-spancolumn-widthcolumns(Kurzschreibweise)contain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-size(Kurzschreibweise)contain-intrinsic-widthcontaincontainer-namecontainer-typecontainer(Kurzschreibweise)content-visibilitycontentcorner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shape(Kurzschreibweise)corner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shape(Kurzschreibweise)corner-right-shape(Kurzschreibweise)corner-shape(Kurzschreibweise)corner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shape(Kurzschreibweise)counter-incrementcounter-resetcounter-setcursorcxcy
D - F
ddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfill-opacityfill-rulefillfilterflex-basisflex-directionflex-flow(Kurzschreibweise)flex-growflex-shrinkflex-wrapflex(Kurzschreibweise)floatflood-colorflood-opacityfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizingfont-palettefont-size-adjustfont-sizefont-smoothfont-stretchfont-stylefont-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weightfont-synthesis(Kurzschreibweise)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variant(Kurzschreibweise)font-variation-settingsfont-weightfont(Kurzschreibweise)forced-color-adjust
G - I
gap(Kurzschreibweise)grid-area(Kurzschreibweise)grid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-column-endgrid-column-startgrid-column(Kurzschreibweise)grid-row-endgrid-row-startgrid-row(Kurzschreibweise)grid-template-areasgrid-template-columnsgrid-template-rowsgrid-template(Kurzschreibweise)grid(Kurzschreibweise)hanging-punctuationheighthyphenate-characterhyphenate-limit-charshyphensimage-orientationimage-renderingimage-resolutioninitial-letterinline-sizeinset-block-endinset-block-startinset-block(Kurzschreibweise)inset-block(Kurzschreibweise)inset-inline-endinset-inline-startinset-inline(Kurzschreibweise)inset-inline(Kurzschreibweise)inset(Kurzschreibweise)inset(Kurzschreibweise)interactivityinterpolate-sizeisolation
J - M
justify-contentjustify-itemsjustify-selfleftletter-spacinglighting-colorline-breakline-clampline-height-stepline-heightlist-style-imagelist-style-positionlist-style-typelist-style(Kurzschreibweise)list-style(Kurzschreibweise)margin-block-endmargin-block-startmargin-block(Kurzschreibweise)margin-bottommargin-inline-endmargin-inline-startmargin-inline(Kurzschreibweise)margin-leftmargin-rightmargin-topmargin-trimmargin(Kurzschreibweise)marker-endmarker-midmarker-startmarkermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-border(Kurzschreibweise)mask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemask(Kurzschreibweise)math-depthmath-shiftmath-stylemax-block-sizemax-heightmax-inline-sizemax-widthmin-block-sizemin-heightmin-inline-sizemin-widthmix-blend-mode
O - P
object-fitobject-positionobject-view-boxoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateoffset(Kurzschreibweise)opacityorderorphansoutline-coloroutline-offsetoutline-styleoutline-widthoutline(Kurzschreibweise)overflow-anchoroverflow-blockoverflow-clip-marginoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverflow(Kurzschreibweise)overlayoverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-yoverscroll-behavior(Kurzschreibweise)padding-block-endpadding-block-startpadding-block(Kurzschreibweise)padding-bottompadding-inline-endpadding-inline-startpadding-inline(Kurzschreibweise)padding-leftpadding-rightpadding-toppadding(Kurzschreibweise)page-break-afterpage-break-beforepage-break-insidepagepaint-orderperspective-originperspectiveplace-content(Kurzschreibweise)place-items(Kurzschreibweise)place-self(Kurzschreibweise)pointer-eventsposition-anchorposition-areaposition-try-fallbacksposition-try-orderposition-try(Kurzschreibweise)position-visibilitypositionprint-color-adjust
Q - S
quotesrreading-flowreading-orderresizerightrotaterow-gapruby-alignruby-overhangruby-positionrxryscalescroll-behaviorscroll-margin-block-endscroll-margin-block-startscroll-margin-block(Kurzschreibweise)scroll-margin-bottomscroll-margin-inline-endscroll-margin-inline-startscroll-margin-inline(Kurzschreibweise)scroll-margin-leftscroll-margin-rightscroll-margin-topscroll-margin(Kurzschreibweise)scroll-marker-groupscroll-padding-block-endscroll-padding-block-startscroll-padding-block(Kurzschreibweise)scroll-padding-bottomscroll-padding-inline-endscroll-padding-inline-startscroll-padding-inline(Kurzschreibweise)scroll-padding-leftscroll-padding-rightscroll-padding-topscroll-padding(Kurzschreibweise)scroll-snap-alignscroll-snap-stopscroll-snap-typescroll-target-groupscroll-timeline-axisscroll-timeline-namescroll-timeline(Kurzschreibweise)scrollbar-colorscrollbar-gutterscrollbar-widthshape-image-thresholdshape-marginshape-outsideshape-renderingspeak-asstop-colorstop-opacitystroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthstroke
T - Z
tab-sizetable-layouttext-align-lasttext-aligntext-anchortext-autospacetext-box-edgetext-box-trimtext-box(Kurzschreibweise)text-combine-uprighttext-decoration-colortext-decoration-insettext-decoration-linetext-decoration-skip-inktext-decoration-skiptext-decoration-styletext-decoration-thicknesstext-decoration(Kurzschreibweise)text-emphasis-colortext-emphasis-positiontext-emphasis-styletext-emphasis(Kurzschreibweise)text-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-spacing-trimtext-transformtext-underline-offsettext-underline-positiontext-wrap-modetext-wrap-styletext-wrap(Kurzschreibweise)timeline-scopetoptouch-actiontransform-boxtransform-origintransform-styletransformtransition-behaviortransition-delaytransition-durationtransition-propertytransition-timing-functiontransition(Kurzschreibweise)translateunicode-bidiuser-modifyuser-selectvector-effectvertical-alignview-timeline-axisview-timeline-insetview-timeline-nameview-timeline(Kurzschreibweise)view-transition-classview-transition-namevisibilitywhite-space-collapsewhite-spacewidowswidthwill-changeword-breakword-spacingwriting-modexyz-indexzoom
Nicht standardisierte Eigenschaften
Nicht standardisierte, vendor-präfixierte Eigenschaften umfassen:
-moz- Prefix
-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
| Specification |
|---|
| CSS Syntax Module Level 3 |
| CSS Snapshot 2024 |
| CSS Cascading and Inheritance Level 6 |