Grundlagen & Selektoren

Syntax

selektor { eigenschaft: wert; }

Typen

element, .klasse, #id, :hover, ::before

Kombinatoren

E F, E > F, E + F, E ~ F

Einheiten & Farben

Absolute

px, cm, mm

Relative

%, em, rem, vw, vh

Farben

#hex, rgb(), hsl(), rgba()

Layout & Position

Flexbox

display: flex; justify-content, align-items

Grid

display: grid;, grid-template-areas

Position

relative, absolute, fixed, sticky

Box-Modell

content → padding → border → margin

Typografie & Visuelles

Schriften

font-family, font-size, font-weight

Text

text-align, line-height, text-transform

Hintergrund

background, background-size

Schatten

box-shadow, text-shadow

Ränder

border, border-radius

Animation & Übergänge

Transition

transition: all 0.3s ease;

Keyframes

@keyframes name { from { } to { } }

Animation

animation: name 2s infinite;

Transform

transform: scale(1.2) rotate(10deg);

Responsive Design

Media Queries

@media (max-width: 768px) { ... }

Responsive Bilder

max-width: 100%; height: auto;

Container Queries

@container (min-width: 400px) { ... }

Fortgeschrittene Techniken

Variablen

:root { --main: #333; } → color: var(--main);

calc()

width: calc(100% - 50px);

clamp()

font-size: clamp(1rem, 2vw, 2rem);

aspect-ratio

aspect-ratio: 16 / 9;

scroll-behavior

scroll-behavior: smooth;

scroll-snap

scroll-snap-type: x mandatory;

mix-blend-mode

mix-blend-mode: multiply;

filter

filter: blur(5px) brightness(1.2);

clip-path

clip-path: circle(50% at center);

focus-visible

:focus-visible { outline: 2px solid blue; }

Logical Properties

margin-inline-start, padding-block-end

Prefers Reduced Motion

@media (prefers-reduced-motion: reduce) { ... }

Print Styles

@media print { body { color: black; } }

Cascade Layers

@layer base, theme, utilities;