CSS-Referenz
Nutzen Sie diese CSS-Referenz, um einen alphabetischen Index aller standardisierten CSS Eigenschaften, Pseudoklassen, Pseudo-Elemente, Datentypen, funktionalen Notationen und At-Rules zu durchsuchen. Sie können auch wichtige CSS-Konzepte und eine Liste von Selektoren, die nach Typ organisiert sind durchsuchen. Ebenfalls enthalten ist eine kurze DOM-CSS / CSSOM-Referenz.
Grundlegende Syntaxregeln
>Syntax der Stilregel
style-rule ::=
selectors-list {
properties-list
}
Wo:
selectors-list ::=
selector[:pseudo-class] [::pseudo-element]
[, selectors-list]
properties-list ::=
[property : value] [; properties-list]
Siehe den Index der Selektoren, Pseudoklassen und Pseudo-Elemente unten. Die Syntax für jeden angegebenen Wert hängt von dem Datentyp ab, der für jede angegebene Eigenschaft definiert ist.
Beispiele für Stilregeln
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
Für eine grundlegende Einführung in die Syntax von Selektoren sehen Sie sich unseren Leitfaden zu CSS-Selektoren an. Beachten Sie, dass jeder Syntaxfehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachten Sie, dass CSS-Regeldefinitionen vollständig (Unicode-) textbasiert sind, während DOM-CSS / CSSOM (das Regelverwaltungssystem) objektbasiert ist.
Syntax der At-Rules
Da die Struktur von At-Rules stark variieren kann, schauen Sie bitte unter At-rule, um die Syntax der spezifischen Regel zu finden, die Sie benötigen.
Index
Hinweis: Dieser Index schließt SVG-exklusive Präsentationsattribute nicht ein, die als CSS-Eigenschaften auf SVG-Elementen verwendet werden können.
Hinweis: Die Eigenschaftsnamen in diesem Index enthalten nicht die JavaScript-Namen, die sich von den CSS-Standardnamen unterscheiden.
-
--*-webkit-line-clamp-webkit-text-fill-color-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width
A
abs()accent-coloracos():active:active-view-transition:active-view-transition-type()additive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfalignment-baselineallanchor()anchor-nameanchor-scopeanchor-size()<angle><angle-percentage>animationanimation-compositionanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-rangeanimation-range-endanimation-range-startanimation-timelineanimation-timing-function@annotation:any-linkappearanceascent-override (@font-face)asin()aspect-ratioatan()atan2()attr():autofill
B
::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizebase-palette (@font-palette-values)baseline-shift<basic-shape>::before (:before):blankbleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-left-cornerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness():buffering
C
calc()calc-size()capcaption-sidecaretcaret-colorcaret-shapech@character-variant@charset:checked::checkmarkcircle()clamp()clearclip-pathclip-rulecm<color>colorcolor-interpolation-filterscolor-mix()color-schemecolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-width@containercontainercontainer-namecontainer-typecontentcontent-visibilitycontrast()cos()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue()::cue-region::cue-region():currentcursor<custom-ident>cxcy
D
d<dashed-ident>:default:defineddegdescent-override (@font-face)::details-content<dimension>:dir()direction:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dominant-baselinedpcmdpidppxdrop-shadow()
E
F
fallback (@counter-style)field-sizing::file-selector-buttonfillfill-opacityfill-rulefilter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatflood-colorflood-opacity:focus:focus-visible:focus-withinfontfont-display (@font-face)@font-facefont-familyfont-family (@font-face)font-family (@font-palette-values)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-palette@font-palette-valuesfont-sizefont-size-adjustfont-stylefont-style (@font-face)font-synthesisfont-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weightfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)font-widthforced-color-adjustformat()fr<frequency><frequency-percentage>:fullscreen:future
G
gapgrad<gradient>::grammar-errorgrayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
H
Hzhanging-punctuation:has():has-slottedheight::highlight()@historical-forms:host:host():host-context():hoverhsl()hue-rotate()hwb()hyphenate-characterhyphenate-limit-charshyphenshypot()
I
ic<ident><image>image()image-orientationimage-renderingimage-resolutionimage-set()@importin:in-range:indeterminateinheritinherits (@property)initialinitial-letterinitial-letter-aligninitial-value (@property)inline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>interpolate-size:invalidinvert():is()isolation
J
K
L
lab():lang():last-child:last-of-type@layerlayer()layer() (@import)lch()leader():leftleft@left-top<length><length-percentage>letter-spacinglight-dark()lighting-colorline-breakline-clampline-gap-override (@font-face)line-heightline-height-step<line-style>linear()linear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal():local-linklog()
M
marginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim::markermarkermarker-endmarker-midmarker-startmarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemath-depthmath-shiftmath-stylematrix()matrix3d()max()max-block-sizemax-heightmax-inline-sizemax-linesmax-width@mediamin()min-block-sizemin-heightmin-inline-sizemin-widthminmax()mix-blend-modemmmod():modalms:muted
N
@namespacenavigation (@view-transition)negative (@counter-style):not():nth-child():nth-last-child():nth-last-of-type():nth-of-type()<number>
O
object-fitobject-positionobject-view-boxoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateoklab()oklch():only-child:only-of-typeopacityopacity():open:optionalorder@ornamentsorphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-blockoverflow-clip-marginoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverlayoverride-colors (@font-palette-values)overscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-y
P
Pseudo-classesPseudo-elementspad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepagepage-orientation (@page)paint()paint-orderpalette-mix()::part():pastpath():pausedpc<percentage>perspectiveperspective()perspective-origin::picker()::picker-icon:picture-in-pictureplace-contentplace-itemsplace-self::placeholder:placeholder-shown:playingpointer-eventspolygon():popover-open<position>positionposition-anchorposition-area@position-tryposition-tryposition-try-fallbacksposition-try-orderposition-visibilitypow()prefix (@counter-style)print-color-adjust@propertyptpx
Q
R
rradradial-gradient()range (@counter-style)<ratio>ray():read-only:read-writerect()rem()repeat()repeating-conic-gradient()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>reversed()revertrgb():rightright@right-top:rootrotaterotate()rotate3d()rotateX()rotateY()rotateZ()round()row-gapruby-alignruby-mergeruby-overhangruby-positionrxry
S
ssaturate()scalescale()scale3d()scaleX()scaleY()scaleZ():scope@scopescroll()scroll-behaviorscroll-initial-targetscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-top::scroll-marker::scroll-marker-groupscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-state()scroll-timelinescroll-timeline-axisscroll-timeline-namescrollbar-colorscrollbar-gutterscrollbar-width:seeking::selectionselector()sepia()shape-image-thresholdshape-marginshape-outsideshape-renderingsign()sin()size (@page)size-adjust (@font-face)skew()skewX()skewY()::slotted()speak-asspeak-as (@counter-style)::spelling-errorsqrt()src (@font-face):stalled@starting-style:state()steps()stop-colorstop-opacity<string>strokestroke-colorstroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthstyle()@styleset@stylisticsuffix (@counter-style)@supportssupports() (@import)@swashsymbols (@counter-style)symbols()syntax (@property)system (@counter-style)
T
tab-sizetable-layouttan():targettarget-counter()target-counters():target-current::target-texttarget-text():target-withintext-aligntext-align-lasttext-anchortext-autospacetext-boxtext-box-edgetext-box-trimtext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-decoration-thickness<text-edge>text-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-spacing-trimtext-transformtext-underline-offsettext-underline-positiontext-wraptext-wrap-modetext-wrap-style<time><time-percentage>timeline-scopetop@top-left-cornertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-behaviortransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translateX()translateY()translateZ()turntype()types (@view-transition)
U
V
:validvar()vector-effectvertical-alignvhview()view-timelineview-timeline-axisview-timeline-insetview-timeline-name::view-transition@view-transitionview-transition-class::view-transition-group()::view-transition-image-pair()view-transition-name::view-transition-new()::view-transition-old()visibility:visitedvmaxvmin:volume-lockedvw
W
:where()white-spacewhite-space-collapsewidowswidthwill-changeword-breakword-spacingword-wrapwriting-mode
X
Y
Z
Selektoren
Die folgenden sind die verschiedenen Selektoren, die es ermöglichen, dass Stile bedingt auf verschiedenen Merkmalen von Elementen innerhalb des DOM basieren.
Grundlegende Selektoren
Grundlegende Selektoren sind fundamentale Selektoren; dies sind die einfachsten Selektoren, die häufig kombiniert werden, um andere, komplexere Selektoren zu erstellen.
- Universeller Selektor
* - Typselektor
elementname - Klassenselektor
.classname - ID-Selektor
#idname - Attributselektor
[attr=value]
Gruppierungsselektoren
- Selektorenliste
A, B -
Gibt an, dass sowohl
Aals auchBElemente ausgewählt werden. Dies ist eine Methode zur Gruppierung, um mehrere übereinstimmende Elemente auszuwählen.
Kombinatoren
Kombinatoren sind Selektoren, die eine Beziehung zwischen zwei oder mehr einfachen Selektoren herstellen, wie "A ist ein Kind von B" oder "A ist neben B", wodurch ein komplexer Selektor entsteht.
- Nachbarschafts-Kombinator
A + B -
Gibt an, dass die von
AundBausgewählten Elemente denselben Elternteil haben und dass das vonBausgewählte Element dem vonAausgewählten Element horizontal unmittelbar folgt. - Folge-Kombinator
A ~ B -
Gibt an, dass die von
AundBausgewählten Elemente denselben Elternteil teilen und dass das vonAausgewählte Element vor dem vonBausgewählten kommt, aber nicht unbedingt unmittelbar davor. - Kind-Kombinator
A > B -
Gibt an, dass das von
Bausgewählte Element das direkte Kind des vonAausgewählten Elements ist. - Nachfahr-Kombinator
A B -
Gibt an, dass das von
Bausgewählte Element ein Nachfahre des vonAausgewählten Elements ist, aber nicht unbedingt ein direktes Kind. - Spalten-Kombinator
A || BExperimentell -
Gibt an, dass das von
Bausgewählte Element innerhalb der vonAangegebenen Tabellenspalte liegt. Elemente, die sich über mehrere Spalten erstrecken, gelten als Mitglieder all dieser Spalten.
Pseudo
- Pseudoklassen
: -
Gibt einen speziellen Zustand der ausgewählten Elemente an.
- Pseudo-Elemente
:: -
Repräsentiert Entitäten, die nicht in HTML enthalten sind.
Siehe auch Selektoren in der Selektoren-Spezifikation und die Pseudo-Element-Spezifikation.
Konzepte
>Syntax und Semantik
Werte
Layout
DOM-CSS / CSSOM
>Wichtige Objekttypen
Wichtige Methoden
Siehe auch
- Mozilla CSS-Erweiterungen (mit dem Präfix
-moz-) - WebKit CSS-Erweiterungen (meistens mit dem Präfix
-webkit-)