Eigenschaften

CSS hält zahlreiche Eigenschaften zur Gestaltung von HTML bereit. Hier sollen nun u.a. einige häufig verwendete Beispiele im Bereich der Schriftdarstellung vorgestellt werden.

Schriften

font-…

Die Schrift kann auf vielfältige Weise mit Eigenschaften der Form font-… beeinflusst werden. Es kann u.a. die Schriftart, die Größe der Schrift, der Schriftstil und die sogenannte Strichstärke bestimmt werden:

font-family: sans-serif; /* serifenlose („glatte“) Schrift */
font-size: 2em; /* Schriftgröße */
font-style: italic; /* Schrägschrift */
font-weight: bold; /* Fettdruck */

Siehe dazu die umfangreiche Dokumentation bei MDN

Farben

color

Für die Farbe einer Schrift gibt es die Eigenschaft color, die wir schon mehrmals gesehen haben.

Mit red, blue, usw. gibt es einige „sprechende“ Namen.

Alternativ können beliebige Farben mit RGB-Werten (_R_ed_G_reen_B_lue) oder hexadezimalen Farbcodes angegeben werden, z.B. ergeben folgende Deklarationen den gleichen Wert wie color: red

color: #ff0000; /* hexadezimaler Wert für red */

color: rgb(255, 0, 0); /* RGB-Wert für red */

Mit background-color wird die Hintergrundfarbe gesetzt.

Werte von Eigenschaften

Es gibt Eigenschaften, die aus mehreren Werten bestehen. Diese werden durch Leerzeichen voneinander getrennt. Folgendes Beispiel zeigt, wie ein Rahmen mit der Dicke von 2 Pixeln bestehend aus Punkten in orange um ein Element mit dem class-Attribut weather_location dargestellt werden soll:

.weather_location {
  border: 2px solid silver; /* kombinierte Werte! */
  border-radius: 4px;
}

Zu beachten ist, dass Werte von Eigenschaften ohne Anführungszeichen definiert werden.

Siehe auch Prog Content