CSS-Referenz

Alle 74 Einträge der Referenz in einer Tabelle. Filter nach Kategorie, sortier nach Name oder Kategorie, und ein Klick auf den Namen öffnet den Eintrag mit Beispielen und Live-Vorschau. Wer von vorn anfangen will, liest die Grundlagen der Reihe nach.

Einträge

74 von 74

Alle 74 Box-Modell 8 Display & Sichtbarkeit 4 Flexbox 4 Grid 7 Positionierung 3 Selektoren 1 Farben & Hintergründe 5 Typografie 17 Listen & Tabellen 3 Animationen 4 Transformationen 6 Responsive Design 5 Interaktion 5 Spalten 2

Einträge der CSS-Referenz

Eintrag	Kurzbeschreibung	Kategorie
border	Erstelle Rahmen mit border und seinen Einzeleigenschaften.	Box-Modell
border-radius	Runde Ecken mit border-radius erstellen.	Box-Modell
box-sizing	Steuere mit box-sizing, wie width und height berechnet werden.	Box-Modell
margin	Kontrolliere Außenabstände mit margin und seinen Einzeleigenschaften.	Box-Modell
outline	Zeichne Umrisse mit outline und seinen Einzeleigenschaften.	Box-Modell
overflow	Steuere mit overflow, was passiert, wenn Inhalt größer als sein Container ist.	Box-Modell
padding	Kontrolliere Innenabstände mit padding und seinen Einzeleigenschaften.	Box-Modell
width & height	Steuere die Breite und Höhe von Elementen mit width, height, min/max-Varianten und logischen Properties wie inline-size und block-size.	Box-Modell
content	Erzeuge mit content dekorative Inhalte über ::before und ::after.	Display & Sichtbarkeit
display	Steuere mit display, wie ein Element dargestellt wird.	Display & Sichtbarkeit
opacity	Steuere mit opacity die Transparenz von Elementen.	Display & Sichtbarkeit
visibility	Steuere mit visibility, ob ein Element sichtbar oder unsichtbar ist, ohne es aus dem Layout zu entfernen.	Display & Sichtbarkeit
Flexbox Container	Lerne die Grundlagen des Flex-Containers mit display: flex, flex-direction, flex-wrap und flex-flow.	Flexbox
Flexbox Ausrichtung	Richte Flex-Items aus mit justify-content, align-items, align-content und gap.	Flexbox
Flex-Items	Kontrolliere einzelne Flex-Items mit flex-grow, flex-shrink, flex-basis, der flex-Shorthand, order und align-self.	Flexbox
Flexbox Praxis-Layouts	Baue reale Layouts mit Flexbox: Zentrierung, Navigation, Card-Layouts, Holy Grail und Sticky Footer.	Flexbox
Grid Container	Lerne die Grundlagen des Grid-Containers mit display: grid, grid-template-columns, grid-template-rows und der fr-Einheit.	Grid
Grid Template Areas	Erstelle übersichtliche Grid-Layouts mit benannten Bereichen.	Grid
Grid Platzierung	Platziere Grid-Items gezielt mit grid-column und grid-row.	Grid
Grid Auto Flow	Steuere das implizite Grid mit grid-auto-flow, grid-auto-rows und grid-auto-columns.	Grid
Grid Ausrichtung	Richte Grid-Items und Tracks aus mit justify-items, align-items, justify-content, align-content, place-items, place-content und gap.	Grid
subgrid	Richte verschachtelte Grids am äußeren Raster aus: Mit grid-template-columns: subgrid und grid-template-rows: subgrid teilen sich Karten ein gemeinsames Raster.	Grid
Grid Praxis-Layouts	Baue reale Layouts mit CSS Grid: 12-Spalten-Grid, Dashboard, Magazine-Layout und responsive Patterns.	Grid
position	Lerne die CSS-Eigenschaft position mit static, relative, absolute, fixed und sticky.	Positionierung
z-index	Steuere mit z-index die Stapelreihenfolge von Elementen.	Positionierung
float & clear	Lerne float und clear für Textumfluss um Bilder und Elemente.	Positionierung
:has()	Lerne den CSS :has() Selektor: Elemente anhand ihrer Kinder oder Geschwister stylen.	Selektoren
color	Steuere mit der CSS-Eigenschaft color die Textfarbe von Elementen.	Farben & Hintergründe
background Grundlagen	Lerne die vier Basis-Hintergrund-Eigenschaften: background-color, background-image, background-repeat und background-position.	Farben & Hintergründe
background Erweitert	Erweiterte Background-Eigenschaften: background-size (cover, contain), background-clip (auch text), background-origin, background-attachment und das background Shorthand.	Farben & Hintergründe
Farbverläufe	CSS-Verläufe mit linear-gradient, radial-gradient und conic-gradient erstellen.	Farben & Hintergründe
accent-color	Mit accent-color native Formularelemente wie Checkboxen, Radio-Buttons, Range-Slider und Fortschrittsbalken einfach farblich anpassen.	Farben & Hintergründe
font-family	Schriftarten mit font-family festlegen.	Typografie
font-size	Schriftgroesse mit font-size steuern.	Typografie
font-weight	Schriftstärke mit font-weight setzen.	Typografie
font-style	Kursivschrift mit font-style und typografische Varianten mit font-variant setzen.	Typografie
@font-face	Web-Fonts mit @font-face laden.	Typografie
text-align	Textausrichtung mit text-align steuern.	Typografie
text-decoration	Textdekorationen mit text-decoration steuern.	Typografie
text-transform	Gross- und Kleinschreibung mit text-transform und Texteinzuege mit text-indent steuern.	Typografie
text-shadow	Textschatten mit text-shadow erstellen.	Typografie
line-height	Zeilenhoehe mit line-height steuern.	Typografie
letter-spacing	Zeichenabstand mit letter-spacing und Wortabstand mit word-spacing steuern.	Typografie
vertical-align	Vertikale Ausrichtung von Inline-Elementen mit vertical-align.	Typografie
white-space	Leerzeichen und Zeilenumbrüche mit white-space steuern.	Typografie
text-wrap	Zeilenumbruch mit text-wrap steuern.	Typografie
word-break	Wortumbruch mit word-break und overflow-wrap steuern.	Typografie
text-overflow	Textüberlauf mit text-overflow und Silbentrennung mit hyphens steuern.	Typografie
writing-mode	Schreibrichtung mit writing-mode, text-orientation und direction steuern.	Typografie
list-style	Listen mit list-style, list-style-type, list-style-position und list-style-image gestalten.	Listen & Tabellen
counter	Automatische Nummerierung mit counter-reset, counter-increment, counter() und counters().	Listen & Tabellen
tabellen-styling	CSS-Eigenschaften für Tabellen: table-layout, border-collapse, border-spacing, caption-side und empty-cells.	Listen & Tabellen
transition	Erstelle sanfte Übergänge mit transition.	Animationen
animation	Lerne CSS-Animationen mit @keyframes, animation-name, animation-duration und animation-timing-function.	Animationen
animation erweitert	Erweiterte CSS-Animation-Eigenschaften: animation-delay, iteration-count, direction, fill-mode, play-state und will-change.	Animationen
animation praxis	Praxisnahe CSS-Animationen: Loading Spinner, Fade-In, Slide-Animationen, Hover-Effekte, Skeleton-Loading und Performance Best Practices.	Animationen
transform 2D	Verschiebe, drehe, skaliere und verzerr Elemente mit CSS transform.	Transformationen
transform 3D	Erstelle 3D-Transformationen mit perspective, rotateX/Y/Z, translateZ und backface-visibility.	Transformationen
box-shadow	Erstelle Schatten mit box-shadow.	Transformationen
filter	Wende visuelle Filter auf Elemente an: blur, brightness, contrast, grayscale, sepia, hue-rotate.	Transformationen
clip-path	Schneide Elemente in beliebige Formen mit clip-path und mask.	Transformationen
Blend Modes	Mische Farben und Ebenen mit mix-blend-mode und background-blend-mode.	Transformationen
@media	Lerne @media Queries für responsive Webdesign.	Responsive Design
Media Features	Lerne CSS Media Features: prefers-color-scheme für Dark Mode, prefers-reduced-motion für Barrierefreiheit, hover und pointer für Geräte-Erkennung.	Responsive Design
@container	Lerne CSS Container Queries: container-type, container-name, @container-Regeln und Container Query Units (cqw, cqi).	Responsive Design
object-fit	Lerne object-fit und object-position: Bilder und Videos in Container einpassen mit cover, contain, fill.	Responsive Design
aspect-ratio	Lerne CSS aspect-ratio: Feste Seitenverhältnisse für Bilder, Videos und Container.	Responsive Design
cursor	Lerne CSS cursor: Mauszeiger-Stile für Buttons, Links und Drag-Handles.	Interaktion
pointer-events	Lerne pointer-events und touch-action: Klick-Durchreichung, Touch-Gesten steuern, Overlays transparent machen und mobile Interaktionen optimieren.	Interaktion
user-select	Lerne user-select für Text-Selektion, resize für größenveränderbare Elemente und appearance für native Formular-Styling.	Interaktion
scroll-verhalten	Lerne scroll-behavior für sanftes Scrollen, scroll-snap für Karussells und Fullscreen-Sections.	Interaktion
scrollbar	Lerne scrollbar-width und scrollbar-color für schlanke und farbige Scrollbars.	Interaktion
columns	Lerne CSS columns, column-count und column-width: Text in mehrere Spalten aufteilen wie in Zeitungen.	Spalten
column-styling	Lerne column-gap, column-rule, column-span und column-fill: Abstände, Trennlinien, überspannende Elemente und Füllverhalten für CSS Multi-Column-Layouts.	Spalten

74 von 74 Einträge