WebTech - Wolf 10

• Dient dem Stylen der Website
• Es Vererbt Eigenschaften.
• Somit können Eigenschaften (Schrift, Farbe, etc.) an einer zentralen Stelle gepflegt werden
• Bezüglich der Kaskade ist das Verständnis von Eltern und Kind Elementen sehr wichtig. Dank dieser Verwandtschafsbeziehung übernehmen nachfolgende Kind-Elemente jene der Eltern.
• Durch die Kaskade können mehrere Stylesheets verwendet werden

• background-eigenschaft
• maring
• width
• padding
• border

• mit dem Schlüsselwort "inherit" kann die Vererbung erzwungen werden
  bspw:
  p {
  border: inherit;
  }
• somit erbt das p den Rahmen des Eltern Elements

• initial
• Beispiel:
  p{
  color: initial}
• somit wird die Standard (default) Einstellung des Webbrowsers wiederhergestellt

• Wenn es ein Eltern Element gibt, erbt es die Eigenschaft des Eltern Elements (inherit)
• Wenn es keines gibt, erbt es den Standardwert des Webbrowsers (initial)

Nehmen wir ein element p mit der klasse xyz:

• .xyz{
  all: initial
  display: block;
  color: blue;
  ...}
• somit werden alle zuvor definierten p Eigenschaften zurückgesetzt und neue können greifen

• Browserstylesheet (Standard, default Stylesheet wird verwendet, wenn nichts anderes definiert ist)
  • niedgrigste Priorität
• Benutzerstylesheet: können eingebunden werden, somit wird der Browser überschrieben
  • mittlere Priorität
• Autorenstylesheet: das idividuell angefertigte stylesheet
  • höchste Priorität

Mit !important können alle bereits definierten Eigenschaften unabhängig von der Hierarchie überschrieben werden.

Es wird wie folgt verwendet:

• p{
  color: blue !important;
  }

1. Benutzerstylesheet mit !important
2. Autorenstylesheet mit !important
3. Autorenstylesheet
4. Benutzerstylesheet
5. Browserstylesheet

Gewichtung: 1,0,0,0,0

1. Sortieren nach Herkunft und Wichtigkeit
   1. Benutzerstylesheet mit !important geht vor Autorenstylesheet mit !important
   2. Autorenstylesheet mit !important hat Vorrang zum Autorenstylesheet ohne !important
   3. Autorenstylesheet ohne !important hat Vorrang vor Benutzerstylesheet ohne !important.
   4. Benutzerstylesheet ohne !important erhält den Vorzug vor Browserstylesheet ohne !important
2. Bei gleichenwertigen Angaben innerhalb von Stylesheets wird die Spezifität berechnet und der höhere verwendet.
3. Bei gleicher Spezifität erhält die zuletzt aufgetretene Anweisung Vorrang.

vgl. Buch Seite 392

• A (erste Ziffer: 1,0,0,0) Inline-Styling mit dem style-Attribut
• B (zweite Ziffer; 0,1,0,0) Zählt die Anzahl ID-Attribute in einem Selektor
• C (dritte Ziffer: 0,0,1,0) Zählt die Anzahl Attribute, Klassen und Pseudoklassen
• D (vierte Ziffer: 0,0,0,1) Zählt die Anzahl Elemente (Typselektoren) und Pseudoelemente

Die Kommas kannn man sich "wegvorstellen" und die höchste Spezifität gewinnt. (Dies hat jedoch nichts mit einem Dezimalsystem zu tun)

Wichtig: Keine Gewichtung gibt es für:

• Universalselektoren (0,0,0,0)
• Kombinatoren-Zeichen >, +, ~ und das Leerzeichen
• Auch die Pseudoklasse :not() fügt keine Gewichtung hinzu

Hinweis:

• Wenn die Gewichtung identisch ist und sie die gleiche Herkunft haben, so gewinnt die zuletzt notierte Eigenschaft, ausser es gibt !important.

• numerische Werte werden in Ganzzahlen oder mit Fliesskommazahlen dargestellt (Komma ist ein Punkt)
• z-index und opacity haben keine Masseinheit
• es können auch negative Werte mit einem Minus verwendet werden, ausser bei width und height oder padding

• px
• ist abhängig vom Gerät (Bildschirmauflösung)
  • relative Angabe: im Bezug auf das Anzeigegerät
  • absolute Angabe: bezogen auf den Inhalt

• pt
• absolute Angabe
• 1 pt = 1 / 72 Zoll (1 Zoll = 2.54cm)
• verwendet bspw. bei font-size: 16pt

• pc
• absolute Angabe
• 1 pc = 1/6 Zoll und entspricht daher 12 Punkten
• bspw. font-size: 1 pc;

• cm, mm
• absolute Angaben
• wird oft bei margin, oder padding verwendet

• in
• absolute Angaben
• Längenmass Zoll = inch = 2.54cm
• bspw. margin-top: 1in;

• em
• relative Angabe
• em steht für die Schriftgrösse des Elements
• bezieht sich auf die Schriftgrösse des Elternelements
• bspw. font-size: 1.3em

• ex
• relative Angabe
• steht für die höhe des Kleinbuchstabens x
• bspw. font-size: 0.4 ex
  • bezieht sich auf das x im Elternelement

• %
• relative Angaben
• Es ist abhängig von der CSS Eigenschaft, ob es sich auf die Eigengrösse bezieht, die grösse des Elternelements oder einen allgemeine Kontext

• rem
• relative Angabe
• root em
• verhält sich genauso wie em, nur dass sich der rem-Wert am Wurzel-Element orientiert und nicht am Elternelement
• Wurzelelement ist das body oder html-Element

Viewport-Breite

• vw
• relative Angabe
• 1vw entspricht 1% oder dem 100. Teil der Breite es Anzeigebereichts (=Viewport)

Viewport-Höhe

• vh
• relativ
• 1vh entspricht 1% resp. dem 100. Teil der Höhe des Anzeigebereichs
• 100vh entspricht der gesamten Höhe

Hexadezimal

• #112233
• sofern RRGGBB identisch sind, gibt es eine Kurzschreibweise: #123
• Hexadezimal hat Basis 16

RGB

• rgb(x,x,x)
• kann mit Ganzzahlen oder % angegeben werden

RGBa

• rgba()
• a steht für Transparenz
• 100% = 1.0

HSL

• H (Hue) = Farbton --> Wert von 0-360
• S (Saturation) = Sättigung
• L (Lightness) = Helligkeit, Standard 50%

HSLA

• inkl. Transparenz

• Grad = deg = Winkel in Grad (Kreis 360)
• Gon = grad = Winel in Gon (Kreis 400Gon, 100Gon = 90 grad)
• Radiant = rad = Winkel in Bogenmass (Kreis = 2Pi)
• Vollwinkel = turn