Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- it-themen:webdesign:css:grundlagen [27.12.2025 01:17] – angelegt lars
+++ it-themen:webdesign:css:grundlagen [27.12.2025 01:43] (aktuell) – lars
@@ Zeile 27: / Zeile 27: @@
 | inline | direkt im HTML-Element |
+---
+===== Externes CSS (empfohlen) =====
+<code html linenums>
+<link rel="stylesheet" href="style.css">
+</code>
+Vorteile:
+  * saubere Trennung von Inhalt und Design
+  * wiederverwendbar
+  * wartbar
+---
+===== Internes CSS =====
+<code html linenums>
+<style>
+  body {
+    background-color: white;
+  }
+</style>
+</code>
+Geeignet für:
+  * kleine Tests
+  * Einzelseiten
+---
+===== Inline-CSS =====
+<code html linenums>
+<p style="color:red;">Text</p>
+</code>
+⚠️ Nicht empfohlen:
+  * schwer wartbar
+  * überschreibt andere Regeln
+---
+===== CSS-Syntax =====
+<code css linenums>
+selektor {
+  eigenschaft: wert;
+}
+</code>
+Beispiel:
+<code css linenums>
+p {
+  color: black;
+  font-size: 16px;
+}
+</code>
+---
+===== Selektoren (Grundlagen) =====
+^ Selektor ^ Bedeutung ^
+| `p` | Element |
+| `.klasse` | Klasse |
+| `#id` | ID |
+| `*` | alle Elemente |
+---
+===== Klassen und IDs =====
+<code html linenums>
+<p class="info">Text</p>
+<p id="hinweis">Text</p>
+</code>
+<code css linenums>
+.info {
+  color: blue;
+}
+#hinweis {
+  color: red;
+}
+</code>
+Regeln:
+  * Klassen sind wiederverwendbar
+  * IDs sind eindeutig
+---
+===== Kaskade und Priorität =====
+CSS folgt einer klaren Priorität:
+  * Inline-CSS
+  * ID-Selektoren
+  * Klassen
+  * Element-Selektoren
+Spätere Regeln überschreiben frühere,
+wenn die Spezifität gleich ist.
+---
+===== !important =====
+<code css linenums>
+p {
+  color: red !important;
+}
+</code>
+⚠️ Nur im Ausnahmefall verwenden.
+Ein Zeichen für strukturelle Probleme.
+---
+===== Kommentare =====
+<code css linenums>
+/* Kommentar */
+</code>
+---
+===== Best Practices =====
+  * externes CSS verwenden
+  * klare Klassennamen
+  * keine IDs für Styling missbrauchen
+  * Layout nicht mit Farbe verwechseln
+---
+===== Merksatz =====
+> CSS ist mächtig,
+>
+> aber nur so gut wie die HTML-Struktur darunter.