Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- css [2024/11/30 12:09]
root [Eigenschaften]
+++ css [2025/01/04 17:03] (aktuell)
root [Element mit mehreren Klassen]
@@ Zeile 11: / Zeile 11: @@
   * Kann eine Name oder ein HTML-Element bzw. eine Menge von HTML-Elementen sein
-  * Eine Regel kann mehrere Selektoren haben
+^Name ^Format CSS ^Format HTML ^Beschreibung ^
+|Type-Selektor|Element|<Element>|Regel gilt für alle Elemente dieses Typs. <WRAP>
+<sxh css>
+h1 {text-align: right;}
+</sxh> </WRAP>|
+|Class-Selektor|.Class|<Element class="Class"|Regel für alle Elemente dieser Klasse|
+|ID-Selektor|#ID|<Element id="ID">|Regel für das Element (eine ID kann in einem Dokument nur einmal vergeben werden -> identifziert ein Element eindeutig)|
+|Pseudo-Klassen|Element:Pseudoklasse|<Element>|Regel wenn das Element in dem durch die Pseudo-Klasse beschriebenen Zustand ist oder ein bestimmtes Element ist. \\ \\ Z.B. a:hover -> wenn man über einem a-Element ist, a:visited -> Wenn man ein A-Element (also einen Link) besucht hat. \\ Oder h2:last-of-type -> letztes h2-Element im Dokument|
+|Attribut-Selektoren|Element[Attribut=Value]|<Element attribut=value>|Gilt für bestimmte Elemente, die ein bestimmtes Attribut auf einen bestimmten Wert gesetzt haben|
+===== Kombinationen =====
+==== Oder ====
+    * Eine Regel kann mehrere Selektoren haben
 <sxh css>
 h1, .myclass {text-align: center}
@@ Zeile 18: / Zeile 34: @@
         * funktioniert wie "oder" -> Elemente die h1 sind oder ".myclass" als Klasse haben
   * Selektoren können kaskadiert sein
-<sxh css>
+==== Nachkommen ====
+  * Gilt für Klassen/Elemente die Nachkomme (B befindet sich irgendwo innerhalb der Tags von A) - in beliebiger Tiefe - eines anderen Elements oder eines Elements mit einer bestimmten Klasse sind
+<sxh>
 div .myclass {text-align: center}
 </sxh>
-    * Gilt nur für Elemente in einem div die die klasse "myclass" haben
+    * Gilt nur für Elemente in einem div (irgendwo, in beliebiger Tiefe) die die klasse "myclass" haben
+==== Direkte Nachkommen ====
+  * Gilt für Klassen/Elemente die direkter Nachkomme eines anderen Elements oder Elements mit einer bestimmten Klasse ist
-^Name ^Format CSS ^Format HTML ^Beschreibung ^
-|Type-Selektor|Element|<Element>|Regel gilt für alle Elemente dieses Typs. <WRAP>
 <sxh css>
-h1 {text-align: right;}
+div > .myclass {text-align: center}
-</sxh> </WRAP>|
+</sxh>
-|Class-Selektor|.Class|<Element class="Class"|Regel für alle Elemente dieser Klasse|
-|ID-Selektor|#ID|<Element id="ID">|Regel für das Element (eine ID kann in einem Dokument nur einmal vergeben werden -> identifziert ein Element eindeutig)|
+  * Gilt nur für ein Element mit der Klasse "myclass" dessen Eltern-Element (also das Element in dem sie sich befinden) ein div ist
+==== Element mit mehreren Klassen ====
+  * ein Element kann mehrere Klassen haben
+<sxh html>
+<div class="myclass anotherclass"></div>
+</sxh>
+<sxh css>
+div.myclass.anotherclass {text-align: center}
+</sxh>
+  * im html können per Aufzählung (per Leerzeichen getrennt) der anzuwendenden Klassen mehrere Klassen angegeben werden
+  * in css werden die Klassen einfach hintereinander geschrieben (ohne Leerzeichen, die "." sind der Klassenindiktator) um anzuzeigen das ein Element alle genannten Klassen haben muss damit die Regel angewendet wird
 ====== Definition ======
@@ Zeile 156: / Zeile 194: @@
+====== Größenangaben ======
+^Name ^Medium ^Relativ/Absolut ^Beschreibung ^
+|cm|Druck|Absolut|Maß in Zentimetern|
+|mm|Druck|Absolut|Maß in Milimetern|
+|pt|Druck|Absolut|Points|
+|px|Bildschirm|Absolut|Pixel - wobei Pixel nicht echte Bildschirmpixel sind, sondern abhängig von der Auflösung des Displays 1px auch mehrere Pixel umfassen kann. \\ Die Größe von 1px hängt also vom Gerät ab. \\ \\ 1px ist bei einer Linie die dünnste darstellbare Linie|
+|em|Bildschirm|Relativ|Relativ zur Schriftgröße im aktuellen Element. \\ \\ 2em = 2x so groß wie die aktuelle Schriftgröße. \\ \\ Ergibt eine harmonische Darstellung, da die Elemente ihre Größe parallel zur Schriftgröße haben und Schriftgrößen zueinander. \\ Bleibt auch harmonisch wenn das Fenster vergrößert oder verkleinert wird|
+|rem|Bildschirm|Relativ|Relativ zur Schriftgröße des Root-Elements|
+|vh|Bildschirm|Relativ|Relativ zur Höhe des Viewports (Browserfensters). \\ \\ 100vh = 100% der höhe des Browserfensters|
+|vw|Bildschirm|Relativ|Relativ zur Breite des Viewports (Browserfenster). \\ Analog zu vh, nur für die Breite|
 ====== Farben ======

MyWiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge