Werteangaben in CSS

Hier finden Sie eine Übersicht über Maßenheiten, Farbangaben und Größenangaben in CSS. Wir haben es dabei mit einer Vielzahl vom unterschiedlichen Einheiten wie Hexadezimal oder RGB-Angaben oder mit Point, Pica, Millimeter, ex, rem und vh zu tun. Lesen Sie, welche Einheiten wofür verwendet werden.

Farbangaben

Farben lassen sich in CSS einfach als Farbnamen wie zum Beispiel „Aquamarine“ definieren. Ein größeres Spektrum an Farben (insgesamt 16,7 Millionen Farben) haben wir aber zur Verfügung, wenn wir die Farben als Hexadezimalwert notieren, wie zum Beispiel mit der Angabe „#0000ff“ Hier stehen drei oder sechs Buchstaben von 0 bis 9 und von a bis f für die RGB-Werte einer Farbe. Wenn wie im obenstehenden Beispiel die Werte für RGB gedoppelt sind, lässt sich die Farbangabe auch abkürzen, #00f würde genauso funktionieren.

Weitere Möglichkeiten, eine Farbe zu definieren sind rgb oder rgba-Angaben.
Ein Beispiel in rgba sieht beispielsweise wie folgt aus:
h2 {background-color: rgba(255, 0, 0, 0.6);}
Hier stehen die ersten drei Angaben für die RGB-Werte (in dem oben stehenden Beispiel ein kräftiges Rot) und die vierte Angabe (0.6) für die Deckkraft der Farbe (in dem Beispiel 60% Deckkraft).

Daneben können wir auch mit hsl oder hsla arbeiten hsla(0, 100%, 50%, 0.3); was aber eher unüblich ist.
Die sogenannten websicheren Farben nutzen wir übrigens nicht mehr.

Größenangaben

Um die Größe einer Schrift oder die Breite eines Containers zu definieren nutzen wir unterschiedliche Größenangaben. Hier gibt es einen ganzen Zoo an Maßeinheiten. Wir unterscheiden zwischen absoluten und relativen Einheiten. Zu den absoluten Werten zählen zum Beispiel px, pt oder mm. Zu den relativen Einheiten gehören Angaben wie smaller, %, em, rem oder vw.

Eine Angabe in em bezieht sich auf die Schrifthöhe des aktuellen Eltern-Elements. Der Begriff „em“ kommt aus der klassischen Satztechnik, in der ein em der Breite eines Gevierts entspricht.
Eine Angabe in rem (root em) bezieht sich auf die Schrifthöhe des Wurzelelements der Seite. In vielen Webbrowsern ist 16 px als Standardgröße eingestellt. 1 em entspricht dann also 16 Pixel. Benutzer mit Sehschwäche haben aber die Standardgröße für Schriften gerne höher eingestellt.
Sehen Sie sich dazu ein Beispiel für relative und absolute Größenangaben an.

Die Einheit vh (viewport-height) und vw (viewport-width) beziehen sich auf die Größe des Ausgabegerätes. Ein vw ist dabei das 1/100stel der Bildschirmbreite und ein vh das 1/100stel der Bildschirmhöhe. Im Gegensatz zu einer Prozentangabe, die sich immer auf das Elternelement bezieht, orientiert sich vw und vh an der Breite bzw. Höhe des Browserfensters.

Es gibt aber auch Wertangaben ohne weitere Angabe einer Einheit. Den Zeilenabstand können Sie zum Beispiel folgendermaßen definieren: line-height:1.4;. Hier beträgt der Zeilenabstand das 1,4-fache der Schriftgröße.

Angaben wie Millimeter, Zentimeter, point oder inch sind nur für Ausgabe auf dem Drucker interessant. Für die Ausgabe auf dem Screen verwenden wir sie nicht.

Schriftstärke

Wollen wir die Schriftstärke (font-weight) definieren, sind numerische Werte wie 300 oder 700 sinnvoll. Angaben wie small, bolder oder ähnliches sollten wir vermeiden. Wenn Sie zum Beispiel unter https://fonts.google.com einen Font wie die Roboto aufrufen, sehen Sie, welche Schriftstärken bei dieser Schrift zur Verfügung stehen.

Weitere Links und Literaturhinweise

Farben in CSS definieren: https://www.w3schools.com/css/css_colors.asp
Größenangaben festlegen: https://www.w3schools.com/cssref/css_units.asp oder https://www.mediaevent.de/tutorial/masseinheiten.html
Mehr zu Schriftgrößen: https://www.mediaevent.de/css/font-size.html