MyWiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Aufbau ======

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. \\
**Wert**: Wert(e) der Eigenschaft. Werte werden ggf. durch Leerzeichen getrennt wenn mehrere.

====== Selektoren ======

  * Kann eine Name oder ein HTML-Element bzw. eine Menge von HTML-Elementen sein


^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}
</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 ======


===== In Tag =====

  * Direkte Definition im HTML-Tag für welches der Style benutzt werden soll
  * Gilt nur für das konkrete Element (nicht für die Klasse)

  <HTML-Element style="Eigenschaft1:Wert1;Eigenschaft2:Wert"}>

===== Im Kopf =====

  * Definition befindet sich im <head>-Element der HTML-Datei \\
  * Gilt nur für die eine HTML-Datei

  <head>
  <style type="text/css">
    **Definition**
  </style>

===== In Externer Datei =====

  * In seperater .css-Date definiert
    * Dadurch verwendbar in vielen Dokumenten -> Eine Style-Definiton für alle Seiten
  * wird im Kopf des Dokuments per Link eingebunden

**Format der Datei:**

Selector1 {Parameter1:Wert1; Parameter2:Wert2;} \\
Selector2 {Parameter1:Wert1; Parameter2:Wert2;}

**Einbinden:**

  <head>
  <link rel="stylesheet" type="text/css" href="file.css">
  </head>
  
  
===== In Externer Datei per import =====

  * Ermöglicht einbinden externer CSS-Files
  * Gültig in allen Style-Bereichen
      * also auch wenn Style im Tag benutzt wird
  * muss am Anfang eines Style-Bereichs stehen

  <style type="text/css">
  @import url("Dateiname");
  </style>


====== Eigenschaften ======

  * divs können als Conatiner benutzt werden -> siehe [[html|html]] 
 \\ \\
^Eigenschaft ^Beschreibung ^
|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>
  * 0% - 100% -> 0% das Element ist unsichtbar und der Hintegrund komplett sichtbar. 100% das Element verdeckt ein dahinter liegendes Element komplett
  * 0 - 1 -> Komma-Werte zwischen 0 und 1 -> 0,5 -> 50% Deckkraft
</WRAP>|
|display|Definiert Darstellung eines Elementes. \\ <WRAP>
^Wert ^Beschreibung ^
|inline-block|Element wird wie ein Block-Element behandelt (und Dinge wie width, height usw. können definiert werden), gleichzeitig erfolgt am Ende des Block-Elementes kein Zeilenumbruch (es wird dann wie ein Inline-Element behandelt). \\ Man kann darüber auch Block-Element zu Pseudo-Inline-Elementen machen - um sie nebeneinander darzustellen |
</WRAP>|
|border-width|Bei Blockelementen die dicke der linken Grenze (Default: none) \\ Meist in px angegeben|
|border-style|Der Stil der Grenze. \\ Z.B. solid, dotted usw. |
|border-radius|Radius für abgerundete Ecken. \\ In der Regel in px angegeben|
|border-color|Farbe der Grenze|
|box-shadow|Schatten um ein Element. \\ <WRAP>
<sxh>
box-shadow: <x-Achse-Versatz> <y-Achse-Versatz> <Blur-Radius> <Spread-Radius> <Farbe>
</sxh>

  * 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
      * 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

<sxh>
box-shadow: -5px 10px 5px green
</sxh>

  * Schatten ragt links außen über das Element
  * Schatten ragt nach unten über das Element
  * Schatten hat einen Blur-Radius von 5px (wird also zu den Rändern schwächer)
  * 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 ======

  * es gibt 2 Farbmodelle: 
      * RGB -> für Bildschirmdarstellung
          * RGB -> Rot Grün Blau/Red Green Blue
      * additives Modell
          * alle Farben auf Maximum ergibt Schwarz
          * auf Minimum Weiß
   * CMYK -> Cyan Magenta Yellow Black (Key)
      * im Druckbereich benutzt
        * reduktives/subtraktives Farmodell
          * alle Farben auf Maximum ergibt Weiß
          * auf Minium Schwarz


===== Deklaration RGB =====

  * Per **RGB-Funktion**
<sxh>
rgb(255,255,255)
</sxh>
Wobei die Werte jeweils für Rot, Grün, Blau stehen und 255 der Maximalwert der jeweiligen Farbe ist.
255,255,255 = weiß, 0,0,0 = schwarz -> additives Farbmodell


  * per **RGBA-Funktion**
      * a = alpha-Kanal; Deckkraft
<sxh>
rgba(0,0,0,60%)
</sxh>
    * Deckkraft wäre hier bei 60%
    * 0% -> unsichtbar, absolute Transparenz
    * 100% -> volle Deckkraft, kein Hintergrund sichtbar


  * per **Hexadezimalwert**
<sxh>
#2A3CFF
</sxh>
Jeweils 2 Hexadezimalzahlen bilden eine Farbe ab, die ersten 2 Rot, die nächsten 2 Grün und die letzten 2 Blau. \\
"FF" ist jeweils der Maximalwert für eine Farbe

  * per **hsl-Funktion** - Hue, Saturation (Sättigung), Light (Helligkeit)
<sxh>
shl(120, 50%, 50%)
</sxh>

  * erster Wert ist die Gradposition auf dem Farbrad der gewünschten Farbe
      * 0 = Rot
      * 120 = Grün
      * 240 = Blau
  * zweiter Wert ist Sättigung in Prozent (0=Schwarz, 100% absolute Sättigung)
  * dritter Wert Helligkeit in Prozent (0=Grau, 100% weiß)


===== Gestaltung/Farbenlehre =====

  * 1 Grundfarbe
      * Komplementärfarbe (also das Gegenteil dazu im Farbkreis) dazu sparsam für Hervorhebungen nutzen

  * Es gibt 3 Grundarten von Farben
      * Grundfarben -> Rot, Grün, Blau
      * Sekundärfarben -> Mischungen aus 2 Grundfarben
      * Tertiärfarben -> Mischungen aus Halbwerten von 2 Grundfarben (wenn man 2 Grundfarben auf 175 setzt im RGB)




===== Farbverläufe =====

  * können nur auf Attribute angewendet werden die Bilder akzeptieren, nicht auf Farb-Attribute
      * anstatt background-color also auf background
      * liegt daran das die Funktionen ein Bild generieren

<sxh css>
h1 {
background: linear-gradient(90deg, rgb(255,0,0) 30%, rgb(0,255,0), rgb(0,0,255))
}
</sxh>

  * linear-gradient ist eine Funktion
  * das erste Argument ist entlang welcher Achse der Farbverlauf sein soll
      * 90deg senkrecht
      * 180deg horizontal
  * die nachfolgenden Argumente sind die Farben und optional ab wie viel Prozent der Fläche die Farbe angewendet werden soll (33% wäre nach 1/3 der Fläche) % der Fläche die Farbe einnehmen soll



====== Troubleshooting ======

^Problem ^Lösung ^
| DIV mit Hintergrundfarbe wird nur teilweise gefüllt - ein Teil des DIVs hat keien Hintergrundfarbe (bzw. die der dahinter liegenden Seite) | Wahrscheinlich wurde die Länge (Parameter length) des DIV fest definiert. Der Text im DIV ist aber länger als diese Angabe. \\ \\ Es wird nur in length angegebene Teil eingefärbt. \\ \\ \\ **Zweite Möglichkeit:** Es wurde kein display:block angegeben. \\ Notwendig da DIV ein inline-Element ist und somit an sich keine Breite und Höhe haben kann (und damit auch keine Farbe, weil das eine Eigenschaft eines Bereiches/Block ist)|
|DIV wird gar nicht mit Farbe gefüllt|display:block und/oder width und height nicht angegeben. \\ \\ display:block ist notwendig um aus dem Inline-Element DIV ein Block-Element zu machen. \\ height und width müssen angegeben werden, können aber auf auto gesetzt werden|
MyWiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge
