c2b_default

WebTech - Wolf 10

Grundlagen

Grundlagen

24
0.0 (0)

Set of flashcards Details

Flashcards 24
Language Deutsch
Category Computer Science
Level Other
Created / Updated 14.02.2021 / 14.02.2021
Weblink
https://card2brain.ch/box/20210214_webtech_wolf_10
Embed
<iframe src="https://card2brain.ch/box/20210214_webtech_wolf_10/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
Study

Was bedeutet CSS?

cascading style sheets

Wozu benötigt es CSS resp. die Kaskade?

  • 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

Welche Eigenschaften werden nicht weitervererbt?

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

Wie kann man die Vererbung erzwingen?

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

Wie gehst du vor, wenn du den Standard Wert von CSS wieder herstellen möchtest?

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

Was passiert bei unset?

  • 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)

Was kann man mit "all" machen?

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

Was weisst du über die Herkunft des Stylesheets?

  • 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

Erläutere !important

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

Nach welchen Kriterien geht die Kaskade vor?

  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.

Erläutere die Berechnung der Spezifität.

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.

Erläutere Grundlegendes über Masseinheiten in CSS

  • 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

Erläutere Pixel

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

Erläutere Punkt

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

Erläutere Pica

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

Erläutere Zentimeter und Millimeter

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

Erläutere Zoll

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

Erläutere Geviertbreite

  • 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

Erläutere x-Höhe

  • 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

Erläutere Prozent %

  • %
  • 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

Erläutere Wurzel-Em

  • 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

Erläutere Viewport-Breite und Viewport-Höhe

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

Erläutere den Unterschied zwischen Hexadezimal und RGB Farben

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

 

Erläutere die Winkelmasse in CSS

  • 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

Study