Wenn Sie gerade erst mit dem Layout beginnen, kann CSS wie Magie erscheinen. Manchmal sogar dunkel. Warum sind die Einzüge nicht richtig? Warum passt die Breite nicht? Warum verhält sich der Text wie eine wilde Katze?
Keine Sorge. Es gibt einen bewährten Weg, jedes Projekt ohne Schmerzen zu starten. Erfahrene Entwickler beginnen fast immer mit einer Reihe von CSS-Basiszeilen - so ein Mini-Schild gegen das Chaos.
Lassen Sie uns herausfinden, was diese magischen 10 Zeilen sind und warum Sie sie zu jedem Projekt hinzufügen sollten.
🎯 1. box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
}Warum ist das notwendig?
Standardmäßig berechnet CSS die Breite und Höhe ohne Paddings und Borders. Das ist unpraktisch und verwirrend. Mit dieser Zeile sagst du dem Browser: „Hey, lass uns alles zusammen, wie im normalen Leben. "
🧼 2. Entfernen Sie die Standardabstände
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote {
margin: 0;
}Warum ist das notwendig?
Browser fügen ihre eigenen Abstände hinzu. Sie sind unterschiedlich. Sie sind unvorhersehbar. Wenn Sie sie zurücksetzen, entscheiden Sie selbst, wo und wie viel Platz vorhanden sein wird.
💡 3. Schöne Standardschriftart
body {
font-family: system-ui, sans-serif;
}Warum ist das notwendig?
So erhältst du eine saubere, lesbare Schriftart, ohne Probleme. Funktioniert auf allen Geräten, sieht modern aus.
🔢 4. Praktische Zeilenhöhe
body {
line-height: 1.5;
}Warum ist das notwendig?
Der Text wird leichter lesbar. Der Abstand zwischen den Zeilen ist nicht nur ästhetisch, sondern dient auch der Schonung der Augen.
🧍♂️ 5. Seitenhöhe = 100%
html, body {
height: 100%;
}Warum ist das notwendig?
Wenn du etwas brauchst, das die gesamte Höhe des Bildschirms einnimmt (z. B. einen Hintergrund), ist dies ein Muss. Ohne sie funktioniert die "Höhe 100%" einfach nicht.
📦 6. Verbesserung des Bildverhaltens
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}Warum ist das notwendig?
Die Bilder gehen nicht über die Grenzen hinaus. Keine „kaputten“ Layouts mehr wegen zu großer Medien.
🔁 7. Vererben Sie Schriftarten für Formulare
input, button, textarea, select {
font: inherit;
}Warum ist das notwendig?
Ohne diese Zeile verwenden Schaltflächen und Formularfelder eine eigene Schriftart. Mit dieser sehen sie im Design organisch aus.
💨 8. Entfernen Sie die Fokuslinien in Safari
button {
-webkit-appearance: none;
}Warum ist das notwendig?
Safari liebt es, Buttons zu erstellen... auf seine eigene Art und Weise. Diese Zeile hilft, das Verhalten mit anderen Browsern abzustimmen.
🧹 9. Listen bereinigen
ul[role='list'], ol[role='list'] {
list-style: none;
}Warum ist das notwendig?
Wenn du eine Liste ohne Aufzählungszeichen erstellen möchtest, z. B. ein Menü oder eine Karte, ist dies ein guter Ausgangspunkt.
🚫 10. Entfernen Sie den margin vom body
body {
margin: 0;
}Warum ist das notwendig?
<body> hat einen eingebauten Einzug. Er stört, besonders auf Mobilgeräten. Wir entfernen ihn und erhalten eine leere Leinwand für das Layout.
📦 Gesamt
All dies zusammen - keine Magie, sondern einfach ein kompetenter Start. Wenn du zu faul bist, das jedes Mal von Hand zu schreiben, dann erstelle deinen eigenen Basisvorlage. Oder kopiere einfach diese Zeilen an den Anfang jedes neuen Projekts.
Wenn dir dieser Ansatz gefällt - einfach, sachlich und ohne komplizierte Erklärungen - dann ist die Kodik-App genau das Richtige für dich. Sie wurde speziell für diejenigen entwickelt, die ihre Reise in die Welt der Programmierung von Grund auf neu beginnen. Darin findest du Lektionen zu HTML, CSS und JavaScript, die alles in einer verständlichen Sprache erklären, als säße ein freundlicher Mentor neben dir.
Kodik-Website - https://itcodik.com/