|
A – Animation & Transition
animation /* Animation aktivieren */
animation-name /* Name der Animation */
animation-duration /* Dauer der Animation */
animation-timing-function /* Zeitverlauf (linear, ease etc.) */
animation-delay /* Verzögerung vor Start */
animation-iteration-count /* Anzahl Wiederholungen */
animation-direction /* Richtung (normal, reverse etc.) */
transition /* Übergänge aktivieren */
transition-property /* Eigenschaften für Übergang */
transition-duration /* Übergangsdauer */
transition-timing-function /* Zeitverlauf */
transition-delay /* Übergangsverzögerung */
aspect-ratio /* Seitenverhältnis festlegen */
B – Box & Background
background /* Hintergrund zusammengefasst */
background-color /* Hintergrundfarbe */
background-image /* Hintergrundbild */
background-position /* Position des Bildes */
background-repeat /* Wiederholung des Bildes */
background-size /* Größe des Hintergrundbildes */
background-attachment /* Scrollverhalten */
background-blend-mode /* Mischmodus */
backdrop-filter /* Filter hinter transparenten Bereichen */
border /* Rahmen zusammengefasst */
border-color /* Rahmenfarbe */
border-style /* Rahmenstil */
border-width /* Rahmenbreite */
border-radius /* Abgerundete Ecken */
border-top / right / bottom / left /* Einzelseiten */
border-collapse /* Tabellenrahmen zusammenführen */
border-spacing /* Tabellenrahmenabstand */
box-shadow /* Schattierung */
box-sizing /* Box-Modell wählen */
bottom /* Abstand nach unten */
C – Clip & Content
clip /* Bereich beschneiden (veraltet) */
clip-path /* Bereich beschneiden (modern) */
content /* Inhalt generieren */
counter-increment /* Zähler erhöhen */
counter-reset /* Zähler zurücksetzen */
cursor /* Mauszeigerform */
caption-side /* Tabellenüberschrift positionieren */
color /* Textfarbe */
contain /* Begrenzung des Rendering-Bereichs */
D – Display & Direction
display: /* Anzeigeart (block, flex, grid etc.) */
direction: /* Schreibrichtung (ltr oder rtl) */
F – Flexbox
float /* Element umfließen lassen */
font /* Schrift zusammengefasst */
font-family /* Schriftart */
font-size /* Schriftgröße */
font-style /* Schriftstil (italic etc.) */
font-variant /* Kapitälchen etc. */
font-weight /* Schriftstärke */
flex /* Flex-Eigenschaft */
flex-direction /* Richtung der Flex-Elemente */
justify-content /* Hauptachsen-Ausrichtung */
align-items /* Querachsen-Ausrichtung */
align-content /* Mehrzeilige Flex-Ausrichtung */
flex-wrap /* Umbruch zulassen */
gap /* Abstand zwischen Items */
order /* Reihenfolge von Items */
G – Grid
grid; /* Grid-Layout aktivieren */
grid-template-columns /* Spalten definieren */
grid-template-rows /* Zeilen definieren */
grid-column /* Spaltenposition */
grid-row /* Zeilenposition */
gap / grid-gap /* Abstände */
place-items /* Zentrierung */
H – Height
height /* Höhe */
min-height /* Mindesthöhe */
max-height /* Maximalhöhe */
I – Isolation
isolation /* Isolierung bei Mischmodi */
L – Layout & Letter
left /* Abstand von links */
letter-spacing /* Buchstabenabstand */
line-height /* Zeilenhöhe */
list-style /* Aufzählung */
list-style-image /* Symbolbild */
list-style-type /* Symboltyp */
list-style-position /* Symbolposition */
M – Margin & Max/Min
margin /* Außenabstand */
margin-top / bottom / left / right /* Einzelseiten */
max-width /* Maximalbreite */
min-width /* Mindestbreite */
@media /* Media Query Regel */
@media screen and (...) /* Gerätetyp & Bedingungen */
@media (prefers-color-scheme) /* Farbschema */
O – Object & Overflow
object-fit /* Skalierung von Bildern/Videos */
object-position /* Position von Objekten */
outline /* Umrandung */
outline-color /* Umrandungsfarbe */
outline-style /* Umrandungsart */
outline-width /* Umrandungsbreite */
overflow /* Überlaufbehandlung */
overscroll-behavior /* Scrollverhalten bei Überlauf */
P – Padding & Position
padding: /* Innenabstand */
padding-top / bottom / left / right:
/* Innenabstand spezifisch */
position: /* Positionierung (static, relative, etc.) */
top / bottom / left / right:
/* Versatz relativ zur Position */
z-index: /* Stapelreihenfolge */
Q – Quotes
quotes /* Anführungszeichen definieren */
R – Resize &Right
resize /* Größe änderbar machen */
right /* Abstand von rechts */
S – Shadow & Scroll
box-shadow /* Schattierung */
scrollbar-color /* Farbe moderner Scrollleisten */
scroll-behavior /* sanftes Scrollen */
visibility /* Sichtbarkeit */
will-change /* Performance-Optimierung */
T – Text & Table
text-align /* Textausrichtung */
text-decoration /* Textdekoration */
text-indent /* Einzug */
text-transform /* Groß-/Kleinschreibung */
table-layout /* Tabellenlayout */
top /* Abstand von oben */
V – Visibility & Vertical
visibility /* Sichtbarkeit */
vertical-align /* Vertikale Ausrichtung */
W – White & Word
white-space /* Umbruchverhalten */
word-spacing /* Wortabstand */
Z – Z-Index
z-index /* Ebenenstapel */
Eigene Zusammenstellung der CSS-Eigenschaften für Bildungszwecke.
|