Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- it-themen:webdesign:css:grundlagen [27.12.2025 01:25] – lars
+++ it-themen:webdesign:css:grundlagen [27.12.2025 01:43] (aktuell) – lars
@@ Zeile 103: / Zeile 103: @@
+---
+===== 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.