Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
CSS-Referenz
Verwenden Sie diese CSS-Referenz, um ein alphabetisches Verzeichnis aller Standard-CSS-Eigenschaften, Pseudoklassen, Pseudoelemente, Datentypen, Funktionale Notationen und At-Regeln zu durchsuchen. Sie können auch wichtige CSS-Konzepte und eine Liste von Selektoren nach Typ organisiert durchsuchen. Ebenfalls enthalten ist eine kurze DOM-CSS / CSSOM-Referenz.
Grundlegende Regelsyntax
>Stilregelsyntax
style-rule ::=
selectors-list {
properties-list
}
Wo:
selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list]
Siehe das Verzeichnis der Selektoren, Pseudoklassen und Pseudoelemente unten. Die Syntax für jeden angegebenen Wert hängt vom definierten Datentyp für jede angegebene Eigenschaft ab.
Beispiele für Stilregeln
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
Für eine Einführung auf Anfängerniveau in die Syntax von Selektoren lesen Sie unseren Leitfaden zu CSS-Selektoren. Beachten Sie, dass jeder Syntax-Fehler in einer Regeldarstellung die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachten Sie, dass CSS-Regeldarstellungen vollständig (Unicode) textbasiert sind, während DOM-CSS / CSSOM (das Regelverwaltungssystem) objektbasiert ist.
At-Regelsyntax
Da die Struktur von At-Regeln stark variiert, lesen Sie bitte At-Regel, um die Syntax der spezifischen gewünschten Regel zu finden.
Index
Hinweis: Dieser Index enthält keine ausschließlich SVG-Präsentationsattribute, die als CSS-Eigenschaften für SVG-Elemente 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-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, Stile basierend auf verschiedenen Merkmalen von Elementen innerhalb des DOM bedingt zu machen.
Grundlegende Selektoren
Grundlegende Selektoren sind fundamentale Selektoren; dies sind die einfachsten Selektoren, die häufig kombiniert werden, um andere, komplexere Selektoren zu erstellen.
- Universalselektor
* - Typselektor
elementname - Klassenselektor
.classname - ID-Selektor
#idname - Attributselektor
[attr=value]
Gruppierungsselektoren
- Selektorenliste
A, B -
Gibt an, dass sowohl
A- als auchB-Elemente ausgewählt werden. Dies ist eine Gruppierungsmethode, um mehrere passende Elemente auszuwählen.
Kombinatoren
Kombinatoren sind Selektoren, die eine Beziehung zwischen zwei oder mehr einfachen Selektoren herstellen, wie zum Beispiel „A ist ein Kind von B" oder „A ist benachbart zu B", wodurch ein komplexer Selektor entsteht.
- Nachbar-Kombinator
A + B -
Gibt an, dass die Elemente, die von
AundBausgewählt sind, denselben Elternteil haben und dass das vonBausgewählte Element dem vonAausgewählten Element direkt horizontal folgt. - Nachfolgender-Geschwister-Kombinator
A ~ B -
Gibt an, dass die Elemente, die von
AundBausgewählt wurden, denselben Elternteil teilen und dass das vonAausgewählte Element vor dem vonBausgewählten Element kommt, aber nicht unbedingt direkt davor. - Kindkombinator
A > B -
Gibt an, dass das von
Bausgewählte Element das direkte Kind des vonAausgewählten Elements ist. - Nachfolgerkombinator
A B -
Gibt an, dass das von
Bausgewählte Element ein Nachkomme des vonAausgewählten Elements ist, aber nicht unbedingt ein direktes Kind. - Spaltenkombinator
A || BExperimentell -
Gibt an, dass das von
Bausgewählte Element innerhalb der vonAangegebenen Tabellenspalte liegt. Elemente, die sich über mehrere Spalten erstrecken, werden als Mitglieder all dieser Spalten betrachtet.
Pseudo
- Pseudoklassen
: -
Gibt einen speziellen Zustand der ausgewählten Elemente an.
- Pseudoelemente
:: -
Repräsentiert Entitäten, die nicht im HTML enthalten sind.
Siehe auch Selektoren in der Selektoren-Spezifikation und die Pseudoelement-Spezifikation.
Konzepte
>Syntax und Semantik
Werte
Layout
DOM-CSS / CSSOM
>Wichtige Objekttypen
Wichtige Methoden
Siehe auch
- Mozilla CSS-Erweiterungen (mit
-moz-vorangestellt) - WebKit CSS-Erweiterungen (meist mit
-webkit-vorangestellt)