Englisch
Französisch
Arabisch
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
CSS in der Praxis
Hochgeladen :
vor 2 Monaten
Aktualisiert :
vor 2 Monaten
beginner
Jetzt gestalten wir wirklich
Wenden Sie das Gelernte an: Sie gestalten eine Profilkarte von Grund auf und eignen sich einen sauberen, wartbaren Arbeitsablauf an.
Projekt: eine Profilkarte
- Schreiben Sie das HTML: ein Container mit Bild, Name und kurzer Bio.
- Binden Sie ein externes Stylesheet ein und geben Sie der Karte eine
class. - Gestalten Sie die Box: Padding,
border-radiusund ein dezenter Schatten. - Zentrieren Sie die Karte mit Flexbox auf der Seite.
Das CSS
.card {
max-width: 320px;
margin: 40px auto;
padding: 24px;
border-radius: 14px;
background: #fff;
box-shadow: 0 6px 20px rgba(0,0,0,.08);
text-align: center;
}
.card img {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
}Nutzen Sie die DevTools des Browsers
Rechtsklick → Untersuchen. Sie können CSS live anpassen und Änderungen sofort sehen, bevor Sie Ihre Datei bearbeiten.
Gute Gewohnheiten vs. häufige Fehler
| Tun ✓ | Lassen ✗ |
|---|---|
| Klassen für wiederkehrende Stile wiederverwenden | Dieselben Regeln überall wiederholen |
rem / % / Flexbox / Grid nutzen | Pixel-Positionen fest verdrahten |
| Ein externes Stylesheet behalten | Inline-style-Attribute verstreuen |
box-sizing: border-box nutzen | Gegen unerwartete Breiten kämpfen |
Achten Sie auf diese Fehler
Eine falsch geschriebene Eigenschaft wird stillschweigend ignoriert, eine fehlende Einheit (width: 100 statt 100px) zerstört das Layout, und zu viel !important macht CSS unwartbar.
Die Details sind nicht die Details. Sie machen das Design aus.
Warum wird mein CSS nicht angewendet?
Prüfen Sie den
<link>-Pfad, suchen Sie nach einem Tippfehler im Selektor oder in der Eigenschaft und prüfen Sie die Spezifität — eine spezifischere Regel gewinnt vielleicht.Wie zentriere ich ein div?
Mit Flexbox am Eltern-Element:
display:flex; justify-content:center; align-items:center;.Was kommt nach CSS?
JavaScript — es macht Ihre gestaltete Seite interaktiv.
