LU06e - Variablen für Farben und Schriften [BZZ

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.
====== LU06e - Variablen für Farben und Schriften ======

===== Variablen in CSS =====
//Siehe auch [[https://wiki.selfhtml.org/wiki/CSS/Funktionen/var()|selfhtml - CSS/Funktion/var()]]//

Die Einstellungen der Farben und Schriften in Bootstrap werden über Variablen definiert.
Eine Liste aller Variablen finden wir unter [[https://getbootstrap.com/docs/5.2/customize/css-variables/|bootstrap - css-variables]]

Ohne in alle Details von Variablen zu CSS zu gehen, schauen wir uns die wichtigsten Grundlagen an:
<code css>
:root {
  --bs-blue: #0d6efd;
  ...
</code>

  * '':root'' legt fest, dass die Variablen für die ganze HTML-Datei gelten.
  * ''--bs-blue: #0d6efd;'' erstellt eine Variable mit dem Bezeichner ''bs-blue'' und weist der Variable einen Wert zu.

Nachdem die Variablen definiert sind, können wir sie für die Definition unserer Styles nutzen:

<code css>
p { color: var(--bs-primary); }
</code>
Hier wird der Wert der Variable ''bs-primary'' für die Schriftfarbe aller ''p''-Elemente gesetzt.

==== Variablen überschreiben ====
Möchten wir den Wert einer Variable überschreiben, gibt es zwei Lösungen:

  - Wir laden die Bootstrap CSS-Datei ''bootstrap.css'' herunter und editieren die Werte direkt in dieser Datei.
  - Wir erstellen eine separate CSS-Datei und überschreiben die Variablen dort.

Bei Variante 2 haben wir einen guten Überblick, welche Variablen wir überschreiben.
Wichtig ist dabei, dass wir unsere CSS-Datei **nach** der CSS-Datei von Bootstrap einbinden:

<code html>
<!DOCTYPE html>
<html lang='de'>
  <head>
    <meta charset='UTF-8'>
    <title>Title</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65' crossorigin='anonymous'>
    <link rel='stylesheet' href='css/style.css'>
  </head>
  <body>
    ...
  </body>
</html>
 
</code>
Bei CSS gilt, dass immer die letzte Definition einer Variable oder eines Style verwendet wird.

===== Farben anpassen =====
Anhand der Variablen sehen wir, dass Bootstrap die Farben Blau, Indigo, Purpur, Pink, Rot, Orange, Gelb, Grün, Petrol (teal) und Cyan verwendet. Dazu kommen noch Schwarz, Weiss und mehrere Abstufungen von Grau.
Falls wir für unsere Webseite einfach einen anderen Farbton für eine der Farben verwenden möchten, passen wir einfach den entsprechenden Wert an.

Neben diesen einzelnen Farben gibt es noch Variablen für die primäre, sekundäre und tertiäre Farbe.
Mit diesen Variablen lässt sich am einfachsten ein eigenes Farbschema umsetzen.
Dazu suchen wir alle Variablen mit ''primary'', ''secondary'' und ''tertiary'' im Namen, z.B. ''bs-secondary-color''.
Viele dieser Variablen sind mehrfach vorhanden, mit unterschiedlichen Varianten zur Definition der Farben.

Hier ein Auszug aus der CSS-Datei:
<code css>
...
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
...
</code>

Die meisten Farben sind im RGB-Format mit dezimalen oder hexadezimalen Werten angegeben.
Einzelne Werte verwenden das erweiterte [[https://www.w3schools.com/cssref/func_rgba.php|RGBA]]-Format. Dabei wird zusätzlich zu den drei Grundfarben noch die Transparenz mit einem Dezimalwert von 0.0 (vollständig transparent) bis 1.0 (keine Transparenz) angegeben.

===== Schriften =====
Auch für die verwendeten Schriften sind in der CSS-Datei entsprechende Variablen definiert.
Zum Beispiel
<code css>
  ...
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  ...
</code>

Unabhängig von Bootstrap sollten wir immer mehrere alternative Schriftarten festlegen.
Der Browser durchsucht die Liste, bis er eine Schriftart finden, die er darstellen kann.
Mehr dazu finden Sie unter [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie/Schriftformatierung#font-family|selfhtml - font-family]].


----
{{tag>m293-LU14}}
[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Kevin Maurizi, Marcel Suter