Farben, Maßeinheiten, Schriftarten

Farbangaben:

Name, z. B. white, red, weitere; gut zum Testen, da leicht zu merken
RGB Hexwert: #rrggbb jeweils 00 - FF
RGB Funktion: rgb(r, g, b) oder mit Transparenz rbga(r, g, b, a) jeweils mit Werten 0 - 255 oder 0% - 100% (Transparenz: 0 - 1)
HSL Funktion: hsla(farbton, sättigung, helligkeit, deckkraft) mit Werten (0 - 360, 0% - 100%,0% - 100%, 0 - 1)
opacity: Transparenz eines Elements 0 - 1

HTML<p>Test</p>

CSSp {
  background: #115ab7;
  background: rgba(20, 123, 45, 0.5);
  background: hsla(0, 100%, 50%, 1);
}

Maßeinheiten:

Länge	Einheit	Größe	Einsatz (häufig)
Pixel	px	bezüglich eines Referenzpixels, nicht Gerätepixel; abhängig von der Entfernung zum Gerät^{ⓘ1px soll als feine Linie erscheinen, daher die Abhängigkeit vom Abstand; bei Armlänge (28 inch) Abstand ist 1px = Größe eines Pixels (=Referenzpixel) auf einem 96dpi (dots per inch) Monitor (also 1/96 * 25,4mm ≈ 0,26mm); bei näherer Anzeige (z. B. Handy) kleiner, bei fernerer (z. B. Beamer) größer↩}	Bildermaße; zum Testen; heute eher relative Längenmaße für Responsive Design
absolut	pt, cm, mm	fixes Verhältnis zu px: 1cm = 96px/2.54; 1px = 0.75pt	Druck, nicht für Web verwenden
relativ	em, rem	abhängig von Standard-Schriftgröße des Elements (em) oder des Dokuments (rem)	Schriftgröße, padding, margin
relativ	%	abhängig von Elternelement	Element Größen und Positionierungen
relativ	vw, vh	abhängig von Browserfensterbreite (vw) und -höhe (vh)	Element Größen und Positionierungen

W3 Empfehlung zur Verwendung, W3 Längen auf Englisch

HTML<p>Test</p>

CSSp {
  font-size: 3em;
  width: 70vw;
  background: yellow;
}

Schriftarten:

CSS Font Stack: Liste von Schriftarten mit Komma getrennt; die erste vorhandene wird verwendet; z. B. Wunschschrift, Websichere Schrift, Schriftfamilie
Generische Schriftfamilie: serif, sans-serif, monospace, cursive, fantasy; immer als Fallback als letztes angeben -> Browser wählt dann Schriftart aus dieser Familie
Websichere Schriftarten: auf verschiedenen Systemen fast immer vorhanden; für Desktop-Systeme z. B. Arial, Georgia, Times New Roman, Courier New, Verdana; seit Mobile Nutzung schwieriger
Webfonts: Einbettung von Schriftarten mit @font-face in CSS Code (alternativ @import oder mit link Tag in HTML head); selbst gehostet oder fremd gehostet (z. B. google fonts) ^{ⓘBei fremd gehosteten fonts wird die IP des Webseiten Besuchers übertragen, wozu eine Einwilligung notwendig ist (Consent-Banner).↩}
Icon-Fonts: Schriftart, die aus lauter Icons besteht; selbst gehostet (z. B. fontawesome) oder fremd gehostet; Alternative zu SVG Icons
Ausblick: Variable fonts

HTML<p>Test</p>

CSSp {
  font-family: 'Lucida Console', Courier, monospace;
}

Beispiel für selbst gehostete Webfonts: https://google-webfonts-helper.herokuapp.com/fonts/akronim?subsets=latin

CSS@font-face {
  font-family: testFont;
  src: url(https://uhahne.github.io/GIS/akronim-v12-latin-regular.woff);
}

p {
  font-family: testFont;
  font-size: 5em;
}

Beispiel für fremd gehostete Webfonts: https://fonts.google.com/specimen/Akronim#standard-styles