CSS – Spickzettel
Alles, was du für die CSS-Einführung brauchst – und ein paar Extras für alle, die mehr wollen.
Aufbau einer CSS-Regel
selektor {
eigenschaft: wert;
}
h1 {
color: steelblue;
font-size: 2rem;
}
Selektoren
| Selektor | Beispiel | Wirkung |
|---|---|---|
| Element | p { }
|
trifft alle <p>-Elemente |
| Mehrere Elemente | h1, h2 { }
|
trifft <h1> und <h2>
|
| Nachfahre | ul li { }
|
trifft <li>, die innerhalb eines <ul> liegen |
| Klasse | .karte { }
|
trifft alle Elemente mit class="karte"
|
| ID | #logo { }
|
trifft das eine Element mit id="logo"
|
| Hover (Zustand) | a:hover { }
|
trifft ein Element, während die Maus darüber ist |
Schrift & Text
| Eigenschaft | Beispiel | Wirkung |
|---|---|---|
color
|
color: #3b82f6;
|
Textfarbe |
font-size
|
font-size: 1.5rem;
|
Schriftgröße |
font-weight
|
font-weight: bold;
|
Schriftdicke (normal, bold, 100–900) |
font-family
|
font-family: Arial, sans-serif;
|
Schriftart |
line-height
|
line-height: 1.6;
|
Zeilenabstand |
text-align
|
text-align: center;
|
Ausrichtung (left, center, right, justify) |
text-decoration
|
text-decoration: none;
|
Unterstreichung ein/aus |
letter-spacing
|
letter-spacing: 2px;
|
Abstand zwischen Buchstaben |
text-transform
|
text-transform: uppercase;
|
GROSSSCHRIFT, kleinschrift, Erster Buchstabe |
text-shadow
|
text-shadow: 2px 2px 4px gray;
|
Schatten hinter Text |
Box & Hintergrund
| Eigenschaft | Beispiel | Wirkung |
|---|---|---|
background-color
|
background-color: #f0f4ff;
|
Hintergrundfarbe |
background
|
background: linear-gradient(135deg, red, blue);
|
Hintergrund, auch mit Farbverlauf |
padding
|
padding: 16px;
|
Innenabstand (zwischen Inhalt und Rand) |
margin
|
margin: 16px;
|
Außenabstand (zum nächsten Element) |
border
|
border: 2px solid black;
|
Rahmen (Dicke, Stil, Farbe) |
border-radius
|
border-radius: 12px;
|
runde Ecken |
box-shadow
|
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
Schatten um eine Box |
width / max-width
|
max-width: 300px;
|
feste bzw. maximale Breite |
height / max-height
|
max-height: 200px;
|
feste bzw. maximale Höhe |
Für Profis (Zusatz)
| Eigenschaft | Beispiel | Wirkung |
|---|---|---|
opacity
|
opacity: 0.5;
|
Durchsichtigkeit (0 = unsichtbar, 1 = voll sichtbar) |
cursor
|
cursor: pointer;
|
Mauszeiger-Symbol beim Draufzeigen |
transition
|
transition: color 0.3s;
|
sanfter Übergang bei Änderungen (z. B. mit :hover) |
transform
|
transform: rotate(5deg) scale(1.1);
|
drehen, vergrößern/verkleinern, verschieben |
filter
|
filter: grayscale(1) blur(2px);
|
Bildfilter, z. B. schwarz/weiß oder unscharf |
:hover
|
a:hover { color: red; }
|
Style, der nur beim Drüberfahren mit der Maus gilt |
Beispiel: Link, der beim Hover die Farbe wechselt
a {
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: crimson;
}
Beispiel: rundes Bild
img {
max-width: 200px;
border-radius: 50%;
}
{{TOC}}