CSS Referenz
Verwende diese CSS-Referenz für einen alphabetischen Index aller Standard-CSS-Eigenschaften, Pseudoklassen, Pseudoelemente, Datentypen und @-Regeln. Du kannst eine Liste aller Selektoren und eine Liste aller Konzepte ansehen. Dies beinhaltet auch eine kurze Referenz zu DOM-CSS / CSSOM.
Grundlegende Syntax von Regeln
Syntax von Stilregeln
selektorliste {
eigenschaft: wert;
[weitere eigenschaft:wert; Paare]
}
... wobei selektorliste: selektor[:pseudo-klasse] [::pseudo-element] [, weitere selektorlisten]
Siehe Listen aller Selektoren, Pseudo-Klassen und Pseudo-Elemente weiter unten.
Beispiele für Stilregeln
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
Für eine Einführung in die Syntax von CSS-Selektoren auf Anfängerstufe, siehe diese Anleitung (en-US). Beachte, dass jeder CSS-Syntax (en-US)-Fehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachte dass CSS-Regeldefinitionen vollständig (ASCII) text-basiert sind, wohingegegen DOM-CSS / CSSOM (das Regel-Verwaltungssystem) objekt-basiert ist.
Syntax von @-Regeln
Da die Struktur von @-Regeln stark variiert, schaue bitte bei @-Regel nach, um die Syntax der gewünschten Regel herauszufinden.
Index
Hinweis: Die Bezeichnungen der Eigenschaften enthalten nicht die JavaScript-Namen (en-US), wenn sie sich von den CSS-Standardbezeichnern unterscheiden.
-A
:activeadditive-symbols (@counter-style)(en-US)::after (:after)align-contentalign-itemsalign-selfalign-tracks(en-US)all<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotation(en-US)annotation()(en-US):any-link(en-US)appearanceaspect-ratio(en-US)attr()
::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-x(en-US)background-position-y(en-US)background-repeatbackground-size<basic-shape>::before (:before):blank(en-US)bleed (@page)<blend-mode>(en-US)block-overflowblock-size(en-US)blur()(en-US)borderborder-block(en-US)border-block-color(en-US)border-block-end(en-US)border-block-end-color(en-US)border-block-end-style(en-US)border-block-end-width(en-US)border-block-start(en-US)border-block-start-color(en-US)border-block-start-style(en-US)border-block-start-width(en-US)border-block-style(en-US)border-block-width(en-US)border-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radius(en-US)border-end-start-radius(en-US)border-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inline(en-US)border-inline-color(en-US)border-inline-end(en-US)border-inline-end-color(en-US)border-inline-end-style(en-US)border-inline-end-width(en-US)border-inline-start(en-US)border-inline-start-color(en-US)border-inline-start-style(en-US)border-inline-start-width(en-US)border-inline-style(en-US)border-inline-width(en-US)border-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radius(en-US)border-start-start-radius(en-US)border-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-before(en-US)break-insidebrightness()(en-US)
calc()caption-sidecaret-color(en-US)@character-variant(en-US)character-variant()(en-US)@charset:checked(en-US)circle()clamp()(en-US)clearclipclip-path<color>colorcolor-adjust(en-US)column-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()(en-US)contain(en-US)contentcontent-visibility(en-US)contrast()(en-US)<counter>(en-US)counter-incrementcounter-resetcounter-set(en-US)@counter-style(en-US)counters()(en-US)cross-fade()(en-US)cubic-bezier()(en-US)::cue(en-US)::cue-region(en-US):current(en-US)cursor<custom-ident>length#chlength#cm
angle#deg:default:defined(en-US)<dimension>(en-US):dirdirection:disableddisplay<display-box>(en-US)<display-inside>(en-US)<display-internal>(en-US)<display-legacy>(en-US)<display-listitem>(en-US)<display-outside>(en-US)drop-shadow()(en-US)resolution#dpcmresolution#dpiresolution#dppx
fallback (@counter-style)(en-US)filter<filter-function>(en-US):first:first-child::first-letter (:first-letter)(en-US)::first-line (:first-line)(en-US):first-of-typefit-content()(en-US)<flex>(en-US)flex(en-US)flex-basis(en-US)flex-direction(en-US)flex-flowflex-growflex-shrinkflex-wrapflex_value#fr(en-US)float:focus:focus-visible(en-US):focus-within(en-US)fontfont-display (@font-face)(en-US)@font-face(en-US)font-familyfont-family (@font-face)(en-US)font-feature-settingsfont-feature-settings (@font-face)@font-feature-values(en-US)font-kerning(en-US)font-language-override(en-US)font-optical-sizing(en-US)font-sizefont-size-adjust(en-US)font-stretch(en-US)font-stretch (@font-face)(en-US)font-stylefont-style (@font-face)(en-US)font-synthesis(en-US)font-variantfont-variant (@font-face)(en-US)font-variant-alternates(en-US)font-variant-caps(en-US)font-variant-east-asian(en-US)font-variant-ligatures(en-US)font-variant-numeric(en-US)font-variant-position(en-US)font-variation-settings(en-US)font-variation-settings (@font-face)(en-US)font-weightfont-weight (@font-face)(en-US)forced-color-adjust(en-US)format()(en-US)<frequency><frequency-percentage>(en-US):fullscreen:future(en-US)
angle#gradgap<gradient>::grammar-error(en-US)grayscale()(en-US)gridgrid-area(en-US)grid-auto-columns(en-US)grid-auto-flow(en-US)grid-auto-rows(en-US)grid-column(en-US)grid-column-end(en-US)grid-column-start(en-US)grid-row(en-US)grid-row-end(en-US)grid-row-start(en-US)grid-template(en-US)grid-template-areasgrid-template-columns(en-US)grid-template-rows(en-US)
frequency#Hzhanging-punctuation(en-US):has(en-US)heightheight (@viewport)(en-US)@historical-forms:host()(en-US):host-context()(en-US):hoverhsl()hsla()hue-rotate()(en-US)hyphens
<ident>(en-US)<image>image()image-orientationimage-renderingimage-resolution(en-US)image-set()(en-US)@import:in-range:indeterminateinheritinherits (@property)(en-US)initialinitial-letter(en-US)initial-letter-align(en-US)initial-value (@property)(en-US)inline-size(en-US)inset(en-US)inset()inset-block(en-US)inset-block-end(en-US)inset-block-start(en-US)inset-inline(en-US)inset-inline-end(en-US)inset-inline-start(en-US)<integer>:invalidinvert()(en-US):is(en-US)isolation(en-US)length#in
:lang:last-child:last-of-typeleader():left(en-US)left@left-bottom<length><length-percentage>(en-US)letter-spacingline-breakline-clampline-height(en-US)line-height-step(en-US)linear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()(en-US):local-link(en-US)
length#mmmarginmargin-block(en-US)margin-block-end(en-US)margin-block-start(en-US)margin-bottommargin-inline(en-US)margin-inline-end(en-US)margin-inline-start(en-US)margin-leftmargin-rightmargin-topmargin-trim(en-US)::markermarks (@page)maskmask-border(en-US)mask-border-mode(en-US)mask-border-outset(en-US)mask-border-repeat(en-US)mask-border-slice(en-US)mask-border-source(en-US)mask-border-width(en-US)mask-clip(en-US)mask-composite(en-US)mask-image(en-US)mask-mode(en-US)mask-originmask-position(en-US)mask-repeatmask-size(en-US)mask-type(en-US)masonry-auto-flow(en-US)math-style(en-US)matrix()(en-US)matrix3d()(en-US)max()(en-US)max-block-size(en-US)max-heightmax-height (@viewport)(en-US)max-inline-size(en-US)max-linesmax-widthmax-width (@viewport)(en-US)max-zoom (@viewport)(en-US)@mediamin()(en-US)min-block-size(en-US)min-heightmin-height (@viewport)(en-US)min-inline-size(en-US)min-widthmin-width (@viewport)(en-US)min-zoom (@viewport)(en-US)minmax()(en-US)mix-blend-modetime#ms
@namespace(en-US)negative (@counter-style)(en-US):not:nth-child:nth-col(en-US):nth-last-child(en-US):nth-last-col(en-US):nth-last-of-type(en-US):nth-of-type(en-US)<number>
object-fitobject-positionoffset(en-US)offset-anchor(en-US)offset-distance(en-US)offset-path(en-US)offset-position(en-US)offset-rotate(en-US):only-child:only-of-type(en-US)opacityopacity()(en-US):optionalorderorientation (@viewport)(en-US)@ornaments(en-US)ornaments()(en-US)orphans:out-of-rangeoutlineoutline-coloroutline-offset(en-US)outline-style(en-US)outline-width(en-US)overflowoverflow-anchor(en-US)overflow-block(en-US)overflow-inline(en-US)overflow-wrapoverflow-x(en-US)overflow-y(en-US)overscroll-behavioroverscroll-behavior-block(en-US)overscroll-behavior-inline(en-US)overscroll-behavior-x(en-US)overscroll-behavior-y
Pseudo-classesPseudo-elementslength#pclength#ptlength#pxpad (@counter-style)(en-US)paddingpadding-block(en-US)padding-block-end(en-US)padding-block-start(en-US)padding-bottompadding-inline(en-US)padding-inline-end(en-US)padding-inline-start(en-US)padding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()(en-US)paint-order(en-US)::part(en-US):past(en-US)path()(en-US):paused(en-US)<percentage>perspective(en-US)perspective()(en-US)perspective-origin:picture-in-picture(en-US)place-content(en-US)place-items(en-US)place-self(en-US)::placeholder:placeholder-shown:playing(en-US)pointer-eventspolygon()<position>positionprefix (@counter-style)(en-US)@property(en-US)
angle#radlength#remradial-gradient()(en-US)range (@counter-style)(en-US)<ratio>:read-only(en-US):read-write(en-US)rect()repeat()(en-US)repeating-linear-gradient()(en-US)repeating-radial-gradient()(en-US):requiredresize<resolution>revert(en-US)rgb()rgba():right(en-US)right@right-bottom:rootrotate(en-US)rotate()(en-US)rotate3d()(en-US)rotateX()(en-US)rotateY()(en-US)rotateZ()(en-US)row-gapruby-alignruby-mergeruby-position(en-US)
saturate()(en-US)scale(en-US)scale()(en-US)scale3d()(en-US)scaleX()(en-US)scaleY()(en-US)scaleZ()(en-US):scope(en-US)scroll-behaviorscroll-margin(en-US)scroll-margin-block(en-US)scroll-margin-block-end(en-US)scroll-margin-block-start(en-US)scroll-margin-bottom(en-US)scroll-margin-inline(en-US)scroll-margin-inline-end(en-US)scroll-margin-inline-start(en-US)scroll-margin-left(en-US)scroll-margin-right(en-US)scroll-margin-top(en-US)scroll-padding(en-US)scroll-padding-block(en-US)scroll-padding-block-end(en-US)scroll-padding-block-start(en-US)scroll-padding-bottom(en-US)scroll-padding-inline(en-US)scroll-padding-inline-end(en-US)scroll-padding-inline-start(en-US)scroll-padding-left(en-US)scroll-padding-right(en-US)scroll-padding-top(en-US)scroll-snap-align(en-US)scroll-snap-stop(en-US)scroll-snap-type(en-US)scrollbar-color(en-US)scrollbar-gutter(en-US)scrollbar-width(en-US)::selectionselector()sepia()(en-US)<shape>shape-image-threshold(en-US)shape-margin(en-US)shape-outside(en-US)size (@page)(en-US)skew()(en-US)skewX()(en-US)skewY()(en-US)::slotted(en-US)speak-as (@counter-style)(en-US)::spelling-error(en-US)src (@font-face)(en-US)steps()(en-US)<string>@styleset(en-US)styleset()(en-US)@stylistic(en-US)stylistic()(en-US)suffix (@counter-style)(en-US)@supports(en-US)@swash(en-US)swash()(en-US)symbols (@counter-style)(en-US)symbols()(en-US)syntax (@property)(en-US)system (@counter-style)(en-US)time#s
angle#turntab-sizetable-layout:target(en-US)target-counter()target-counters()::target-text(en-US)target-text():target-within(en-US)text-aligntext-align-lasttext-combine-upright(en-US)text-decorationtext-decoration-colortext-decoration-linetext-decoration-skip(en-US)text-decoration-skip-ink(en-US)text-decoration-style(en-US)text-decoration-thickness(en-US)text-emphasis(en-US)text-emphasis-color(en-US)text-emphasis-position(en-US)text-emphasis-style(en-US)text-indenttext-justifytext-orientation(en-US)text-overflowtext-renderingtext-shadowtext-size-adjust(en-US)text-transformtext-underline-offset(en-US)text-underline-position<time><time-percentage>(en-US)<timing-function>(en-US)top@top-centertouch-actiontransformtransform-box(en-US)<transform-function>transform-origintransform-style(en-US)transitiontransition-delay(en-US)transition-duration(en-US)transition-propertytransition-timing-function(en-US)translatetranslate()(en-US)translate3d()(en-US)translateX()translateY()(en-US)translateZ()(en-US)
unicode-bidiunicode-range (@font-face)(en-US)unset<url>url():user-invaliduser-selectuser-zoom (@viewport)(en-US)
length#vhlength#vmaxlength#vminlength#vw:valid(en-US)var()(en-US)vertical-align@viewportviewport-fit (@viewport)(en-US)visibility:visited
:where(en-US)white-spacewidowswidthwidth (@viewport)(en-US)will-change(en-US)word-breakword-spacingword-wrapwriting-mode(en-US)
Selektoren
Einfache Selektoren
- Typselektor
Elementname - Klassenselektor
.klassenname - ID-Selektor
#idname - Universalselektor
* - Attributselektoren
[attribute="value"]etc.
Kombinatoren
Pseudoklassen
:active:any(en-US):any-link(en-US):checked(en-US):default:defined(en-US):dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:focus-visible(en-US):host(en-US):host()(en-US):host-context()(en-US):hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left(en-US):link:not():nth-child():nth-last-child()(en-US):nth-last-of-type()(en-US):nth-of-type()(en-US):only-child:only-of-type(en-US):optional:out-of-range:read-only(en-US):read-write(en-US):required:right(en-US):root:scope(en-US):target(en-US):valid(en-US):visited
Pseudoelemente
Siehe auch: Eine vollständige Liste der Selektoren in der Selectors Level 3 Spezifikation.
Konzepte
Syntax & Semantik
Werte
Layout
DOM-CSS / CSSOM
Wichtigste Objekttypen
- document.styleSheets (en-US)
- styleSheets[i].cssRules (en-US)
- cssRules[i].cssText (selector & style)
- cssRules[i].selectorText (en-US)
- elem.style (en-US)
- elem.style.cssText (en-US) (just style)
- elem.className
- elem.classList