Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- css [2024/11/29 22:53]
root [Eigenschaften]
+++ css [2025/01/04 17:03] (aktuell)
root [Element mit mehreren Klassen]
@@ Zeile 1: / Zeile 1: @@
 ====== Aufbau ======
-Selector {Paramter1:Wert1; Parameter2,Wert2;}
+Selector {Paramter1: Wert1 Wert2 Wert3; Parameter2: Wert2;}
 \\ \\
 **Selector**: Name oder HTML-Element für den dieser Style genutzt werden soll \\
-**Parameter**: Eigenschaft die gesetzt werden soll \\
+**Parameter**: Eigenschaft die gesetzt werden soll. \\
-**Wert**: Wert der Eigenschaft
+**Wert**: Wert(e) der Eigenschaft. Werte werden ggf. durch Leerzeichen getrennt wenn mehrere.
 ====== Selektoren ======
@@ Zeile 12: / Zeile 12: @@
-^Format CSS ^Format HTML ^Beschreibung ^
+^Name ^Format CSS ^Format HTML ^Beschreibung ^
-|Element|<Element>|Regel gilt für alle Elemente dieses Typs. <WRAP>
+|Type-Selektor|Element|<Element>|Regel gilt für alle Elemente dieses Typs. <WRAP>
 <sxh css>
 h1 {text-align: right;}
 </sxh> </WRAP>|
-|.Class|<Element class="Class"|Regel für alle Elemente dieser Klasse|
+|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}
+</sxh>
+    * Mehrere Selektoren werden durch "," getrennt
+        * funktioniert wie "oder" -> Elemente die h1 sind oder ".myclass" als Klasse haben
+  * Selektoren können kaskadiert sein
+==== 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 (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
+<sxh css>
+div > .myclass {text-align: center}
+</sxh>
+  * 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 76: / Zeile 128: @@
 |position|Von wo aus Abstände aus berechnet werden. \\ \\ * absolut -> Abstände werden vom Eltern-Element bzw (wenn nicht vorhanden) vom Fensterrand \\ * relative -> Abstände werden relativ zur normalen Position des Objektes berechnet (also von dort aus wo es normalerweise erscheinen würde -> zum Beispiel unterhalb des letzten Textes oder Objektes) \\ * fixed -> Abstände werden von der oberen Fensterkante aus berechnet und das Objekt scrollt nicht mit (es bleibt fest stehen)|
 |width|Breite von Block-Elementen. \\ Per Default ist ein Block-Element so groß wie sein Inhalt|
+|max-width|Maximale Breite eines Block-Elementes. \\ In der Regel in Pixel. \\ \\ Sinnvoll wenn man eine width in Prozent angegeben hat, aber nicht will das Element auf großen Bildschirmen riesig wird und ggf. Elemente in ihm oder es selbst dann dadurch furchtbar aussehen -> zum Beispiel Text sehr lang wird. |
 |height|Höhe von Block-Elementen. \\ Per Default ist ein Block-Element so groß wie sein Inhalt|
 |opacity|Deckung eines Elementes. \\ Niedrigere Werte machen das Element transparenter, höhere Werte verdecken Elemente hinter diesem stärker. \\ \\ <WRAP>
@@ Zeile 91: / Zeile 144: @@
 |box-shadow|Schatten um ein Element. \\ <WRAP>
 <sxh>
-box-shadow: <x-Achse> <y-Achse> <Blur-Radius> <Farbe>
+box-shadow: <x-Achse-Versatz> <y-Achse-Versatz> <Blur-Radius> <Spread-Radius> <Farbe>
 </sxh>
-  * x-Achse um wie viel der Schatten horizontal vom Element versetzt sein soll -> in der Regel in Pixel
+  * x-Achse-Versatz um wie viel der Schatten horizontal vom Element versetzt sein soll -> in der Regel in Pixel
       * positiver Wert -> Versatz nach Rechts -> Schatten steht nach Rechts über Element hinaus
       * negative Wert -> Versatz nach Links -> Schatten steht nach Links über Element hinaus
-  * y-Achse um wie viel der Schatten senkrecht vom Element versetzt sein soll -> in der Regel in Pixel
+      * 0 -> Schatten ist Links und Rechts gleich
+  * y-Achse-Versatz um wie viel der Schatten senkrecht vom Element versetzt sein soll -> in der Regel in Pixel
       * positiver Wert -> Versatz nach Unten -> Schatten steht nach unten über
       * negativer Wert -> Versatz nach Oben -> Schatten steht nach oben über
+      * 0 -> Schatten ist Links und Rechts gleich
   * Optional Blur-Radius
       * in der Regel in Pixel
       * ist optional -> wird es nicht angegeben wird der Schatten scharf dargestellt
       * ist es angegeben verwischt er zum Rand
+  * Optional Spread-Radius
+      * wie breit der Schatten sein soll
+      * in der Regel in Pixel
   * Farbe -> die Farbei des Schattens
@@ Zeile 115: / Zeile 173: @@
   * Schatten hat Farbe grün
 </WRAP> |
+|margin|Abstände eines Block-Elements zum beinhaltenden Element. \\ \\ Häufig: <WRAP>
+  * margin-left -> Linker Abstand
+  * margin-right -> Rechter Abstand
+  * margin-top -> Abstand nach oben
+  * margin-bottom -> Abstand nach unten
+  * Wert auto -> setzt den Abstand automatisch
+      * wenn man gegenüberliegende Margins auf auto setzt (top und bottom oder left und right) dann wird das Element innerhalb des übergeordneten Elements zentriert
+</WRAP> |
+|padding|Abstand zwischen dem Element und den Elementen die es beinhalten (also den Kind-Elementen). \\ Wie margin, nur nach Innen gerichtet. \\ \\ Details siehe margin|
+|background-image|Hintegrund-Bild. \\ \\  <WRAP>
+<sxh>
+  background-image: url(http://somewhere.de/something.png)
+</sxh>
+</WRAP>|
+|text-align|Text-Ausrichtung|
+|font-family|Schriftart. \\ \\ Es können mehrere Schriftarten angegeben werden, die der Reihe nach gesucht werden (nicht alle Schriftarten sind auf allen Systemen vorhanden). <code>font-family: impact, serif</code>. \\ Die Schriftarten müssen durch Komma getrennt werden (Liste)|
+|font-style|Stile für Schriften, wie italic (Kursiv)|
+|hr|Horizontal Ruler \\ Horizontale Linie um Inhalte voneinander zu trennen. \\ \\ Es handelt sich um ein Block-Element, entsprechend kann die Hintergrundfarbe, die Farbe der Grenzen (border-color), Breite und Höhe verändert werden|
+====== 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