033.3 Lektion 1

Zertifikat:

Web Development Essentials

Version:

1.0

Thema:

033 Gestaltung der Inhalte mit CSS

Lernziel:

033.3 Gestaltung mit CSS

Lektion:

1 von 1

Einführung

CSS bietet Hunderte von Eigenschaften, mit denen sich das Erscheinungsbild von HTML-Elementen verändern lässt. Nur erfahrene Designer können sich die meisten von ihnen merken. Dennoch ist es praktisch, die grundlegenden Eigenschaften zu kennen, die auf jedes Element anwendbar sind, sowie einige elementspezifische Eigenschaften. Diese Lektion behandelt einige gängige Eigenschaften, die Sie wahrscheinlich verwenden werden.

Allgemeine CSS-Eigenschaften und -Werte

Viele CSS-Eigenschaften haben denselben Wertetyp. Farben zum Beispiel haben stets das gleiche Zahlenformat, egal ob Sie die Schriftfarbe oder die Hintergrundfarbe ändern. In ähnlicher Weise werden die Einheiten, die zur Änderung der Schriftgröße zur Verfügung stehen, auch zur Änderung der Dicke eines Rahmens verwendet. Das Format des Wertes ist jedoch nicht immer eindeutig. Farben zum Beispiel können in verschiedenen Formaten angegeben werden, wie wir im Folgenden sehen.

Farben

Das Ändern der Farbe eines Elements ist wahrscheinlich eines der ersten Dinge, die Designer mit CSS lernen. Sie können die Farbe des Textes, die Hintergrundfarbe, die Farbe des Randes von Elementen und vieles mehr ändern.

Der Wert einer Farbe in CSS kann als Farbschlüsselwort (d.h. als Farbname) oder als numerischer Wert geschrieben werden, der die einzelnen Farbkomponenten angibt. Alle gebräuchlichen Farbnamen wie black, white, red, purple, green, yellow und blue werden als Farbschlüsselwörter akzeptiert. Die gesamte Liste der von CSS akzeptierten Farbschlüsselwörter ist auf der W3C-Webseite zu finden. Um die Farbe besser kontrollieren zu können, nutzen Sie den numerischen Wert.

Farbschlüsselwörter

Wir werden zunächst mit einem Schlüsselwort arbeiten, weil es einfacher ist. Die Eigenschaft color ändert die Farbe des Textes in dem entsprechenden Element. Um also den gesamten Text auf der Seite lila zu färben, schreiben Sie die folgende CSS-Regel:

* {
  color: purple;
}

Numerische Farbwerte

Obwohl sie intuitiv sind, bieten Farbschlüsselwörter nicht die gesamte Palette der möglichen Farben in modernen Displays. Webdesigner entwickeln in der Regel eine Farbpalette, die benutzerdefinierte Farben verwendet, indem sie den Rot-, Grün- und Blaukomponenten bestimmte Werte zuweisen.

Jeder Farbanteil ist eine Acht-Bit-Binärzahl zwischen 0 und 255. Alle drei Anteile müssen in der Farbmischung angegeben werden, und ihre Reihenfolge ist immer Rot, Grün, Blau. Um die Farbe für den gesamten Text auf der Seite unter Verwendung der RGB-Notation in Rot zu ändern, verwenden Sie daher rgb(255,0,0):

* {
  color: rgb(255,0,0);
}

Ein auf 0 gesetzter Farbanteil bedeutet, dass die entsprechende Grundfarbe nicht in der Farbmischung verwendet wird. Anstelle von Zahlen können auch Prozentsätze stehen:

* {
  color: rgb(100%,0%,0%);
}

Die RGB-Notation ist selten zu sehen, wenn Sie ein Zeichenprogramm verwenden, um Layouts zu erstellen oder einfach nur um die Farben auszuwählen. Vielmehr ist es üblich, Farben in CSS als hexadezimale Werte auszudrücken. Die Farbanteile im Hexadezimalsystem reichen ebenfalls von 0 bis 255, aber in einer prägnanteren Form, die mit einem Rautezeichen # beginnt, gefolgt von jeweils zwei Zeichen für jeden Farbanteil. Der Minimalwert 0 ist 00 und der Maximalwert 255 ist FF — also ist die Farbe red #FF0000.

Tip	Wenn sich die Zeichen eines Farbanteils einer hexadezimalen Farbe wiederholen, kann das zweite Zeichen weggelassen werden. Die Farbe `red` zum Beispiel können Sie daher mit einem einzigen Zeichen für jeden Farbanteil schreiben: `#F00`.

Die folgende Tabelle zeigt RGB- und Hexadezimalschreibweise für einige Grundfarben:

Farbschlüsselwort RGB-Notation Hexadezimalwert

black

rgb(0,0,0)

#000000

white

rgb(255,255,255)

#FFFFFF

red

rgb(255,0,0)

#FF0000

purple

rgb(128,0,128)

#800080

green

rgb(0,128,0)

#008000

yellow

rgb(255,255,0)

#FFFF00

blue

rgb(0,0,255)

#0000FF

Bei den Farbschlüsselwörtern und den Buchstaben in den hexadezimalen Farbwerten wird nicht zwischen Groß- und Kleinschreibung unterschieden.

Deckkraft von Farben

Neben deckenden Farben ist es auch möglich, Seitenelemente mit halbtransparenten Farben zu füllen. Die Deckkraft einer Farbe bestimmt eine vierte Komponente im Farbwert. Im Gegensatz zu den anderen Farbkomponenten, bei denen es sich um ganzzahlige Werte zwischen 0 und 255 handelt, ist die Deckkraft ein Bruchteil zwischen 0 und 1.

Der niedrigste Wert, 0, ergibt eine vollkommen transparente Farbe, die von keiner anderen vollkommen transparenten Farbe zu unterscheiden ist. Der höchste Wert, 1, führt zu einer vollkommen deckenden Farbe, die der Originalfarbe ohne jegliche Transparenz entspricht.

Bei der RGB-Notation geben Sie Farben mit einer Deckkraftkomponente durch das Präfix rgba statt rgb an. Um also die Farbe Rot halb-transparent zu machen, verwenden Sie rgba(255,0,0,0.5). Das a steht für Alpha-Kanal, ein Begriff, der im Jargon der digitalen Grafik häufig zur Angabe der Deckkraftkomponente verwendet wird.

Die Deckkraft kann auch in hexadezimaler Notation angegeben werden. Hier reicht die Deckkraft wie bei den anderen Farbkomponenten von 00 bis FF. Um die Farbe red in hexadezimaler Notation halbtransparent zu machen, verwenden Sie also #FF000080.

Hintergrund

Die Hintergrundfarbe einzelner Elemente oder der gesamten Seite bestimmt die Eigenschaft background-color. Sie nimmt die gleichen Werte an wie die Eigenschaft color, entweder als Schlüsselwörter oder in der RGB/Hexadezimal-Notation.

Der Hintergrund von HTML-Elementen ist jedoch nicht auf Farben beschränkt. Mit der Eigenschaft background-image ist es möglich, ein Bild als Hintergrund zu verwenden. Die akzeptierten Bildformate sind alle, die vom Browser üblicherweise akzeptiert werden, wie JPEG und PNG.

Der Pfad zum Bild sollte mit einem url()-Bezeichner angegeben werden. Befindet sich das zu verwendende Bild im selben Verzeichnis wie die HTML-Datei, reicht es aus, nur den Dateinamen anzugeben:

body {
  background-image: url("background.jpg");
}

In diesem Beispiel wird die Bilddatei background.jpg als Hintergrundbild für den gesamten Text der Seite verwendet. Standardmäßig wird das Hintergrundbild wiederholt, wenn seine Größe nicht die gesamte Seite abdeckt, beginnend mit der linken oberen Ecke des Bereichs, der dem Selektor der Regel entspricht. Dieses Verhalten ändern Sie mit der Eigenschaft background-repeat. Soll das Hintergrundbild im Bereich des Elements platziert werden, ohne es zu wiederholen, verwenden Sie den Wert no-repeat:

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

Sie können das Bild auch nur in horizontaler Richtung (background-repeat: repeat-x) oder nur in vertikaler Richtung (background-repeat: repeat-y) wiederholen lassen.

Figure 1. Platzierung des Hintergrunds unter Verwendung der Eigenschaft background-repeat

Tip

Zwei oder mehr CSS-Eigenschaften können in einer einzigen Eigenschaft background in Kurzform zusammengefasst werden. Die Eigenschaften background-image und background-repeat lassen sich zum Beispiel so in einer einzigen Eigenschaft background mit background: no-repeat url("background.jpg") kombinieren.

Sie können ein Hintergrundbild auch an einer bestimmten Position im Bereich des Elements über die Eigenschaft background-position platzieren. Die fünf Grundpositionen sind top, bottom, left, right und center, wobei die Position des Bildes oben links auch mit Prozentangaben spezifiziert werden kann:

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: 30% 10%;
}

Die background-position wird von den Rändern des enthaltenden Elements aus gemessen, das in diesem Beispiel der gesamte Body der Seite ist. Die Position kann in exakten Einheiten (z.B. 1em) oder als Prozentsatz des enthaltenden Elements angegeben werden. In diesem Beispiel beginnt das Hintergrundbild also bei 30 % der Breite des Body von der linken Seite des Body und 10 % der Höhe des Body vom oberen Rand des Body.

Rahmen

Die Änderung des Rahmens eines Elements ist ebenfalls eine gängige Layout-Anpassung per CSS. Der Rahmen bezieht sich auf die Linie, die ein Rechteck um das Element bildet; sie hat drei Grundeigenschaften: color, style und width.

Die Farbe des Rahmens, die mit border-color definiert wird, folgt demselben Format, das wir für die anderen Farbeigenschaften gesehen haben.

Rahmen können in einem anderen Stil als einer durchgezogenen Linie gezeichnet werden, beispielsweise Striche für die Umrandung mit der Eigenschaft border-style: dashed. Die anderen möglichen Stilwerte sind:

dotted: Eine Folge von abgerundeten Punkten
double: Zwei gerade Linien
groove: Lässt die Linie eingekerbt wirken
ridge: Lässt die Linie erhaben wirken
inset: Lässt das Element eingelassen wirken
outset: Lässt das Element aufgesetzt wirken

Die Eigenschaft border-width legt die Dicke des Rahmens fest. Ihr Wert kann ein Schlüsselwort (thin, medium oder thick) oder ein numerischer Wert sein. Wenn Sie einen numerischen Wert vorziehen, müssen Sie auch die entsprechende Einheit angeben, was wir im Folgenden beschreiben.

Einheiten

Größen und Abstände können Sie in CSS auf verschiedene Weise definieren. Absolute Einheiten basieren auf einer festen Anzahl von Bildschirmpixeln und unterscheiden sich daher nicht wesentlich von den festen Größen und Abmessungen in Printmedien. Es gibt auch relative Einheiten, die dynamisch aus einem Maß errechnet werden, das das Medium vorgibt, in dem die Seite gerendert wird, z.B. der verfügbare Platz oder eine andere in absoluten Einheiten angegebene Größe.

Absolute Einheiten

Absolute Einheiten entsprechen ihren physikalischen Gegenstücken, wie Zentimeter oder Zoll. Auf herkömmlichen Computerbildschirmen entspricht ein Zoll einer Breite von 96 Pixeln. Die folgenden absoluten Einheiten werden üblicherweise verwendet:

in (Inch/Zoll): 1 Zoll entspricht 2,54 cm oder 96 px.
cm (Zentimeter): 1 cm entspricht 96 px / 2,54.
mm (Millimeter): 1 mm entspricht 1 cm / 10.
px (Pixel): 1 px entspricht einem 1/96 eines Zolls.
pt (Punkt): 1 pt entspricht 1/72 eines Zolls.

Beachten Sie, dass das Verhältnis von Pixeln zu Zoll variieren kann. Bei hochauflösenden Bildschirmen, bei denen die Pixel dichter gepackt sind, entspricht ein Zoll mehr als 96 Pixeln.

Relative Einheiten

Relative Einheiten variieren je nach anderen Maßen oder den Abmessungen des Ansichtsfensters (Viewport). Das Ansichtsfenster ist der Bereich des Dokuments, der in seinem Fenster sichtbar ist. Im Vollbildmodus entspricht der Ansichtsbereich dem Bildschirm des Geräts. Die folgenden relativen Einheiten werden üblicherweise verwendet:

%: Prozentsatz, relativ zum übergeordneten Element.
em: Größe der im Element verwendeten Schriftart.
rem: Größe der im Root-Eement verwendeten Schriftart.
vw: 1 % der Breite des Ansichtsfensters.
vh: 1 % der Höhe des Ansichtsfensters.

Der Vorteil relativer Einheiten besteht darin, dass Layouts durch die Änderung nur weniger Schlüsselgrößen anpassbar sind. Sie können zum Beispiel die Einheit pt für die Schriftgröße im body-Element und die Einheit rem für die Schriftgrößen der anderen Elemente verwenden. Sobald Sie die Größe der Schrift für den Body ändern, werden alle anderen Schriftgrößen entsprechend angepasst. Außerdem können Sie mit den Einheiten vw und vh die Abmessungen von Seitenabschnitten festlegen, um sie an Bildschirme mit unterschiedlichen Größen anzupassen.

Schriftarten und Texteigenschaften

Typografie und Schriftarten sind sehr umfangreiche Design-Themen, und die CSS-Typografie steht dem in nichts nach. Es gibt jedoch einige grundlegende Schrifteigenschaften, die den Anforderungen der meisten Benutzer, die CSS lernen, genügen werden.

Die Eigenschaft font-family bestimmt den Namen der zu verwendenden Schrift. Es gibt keine Garantie, dass die gewählte Schrift in dem System, in dem die Seite angezeigt wird, verfügbar ist, so dass diese Eigenschaft im Dokument möglicherweise keine Wirkung hat. Obwohl es möglich ist, den Browser anzuweisen, die angegebene Font-Datei herunterzuladen und zu verwenden, begnügen sich die meisten Webdesigner mit allgemein verfügbaren Fonts in ihren Dokumenten.

Die drei gängigsten Font-Familien sind serif, sans-serif und monospace. Serif ist die Standard-Schriftfamilie in den meisten Browsern. Wenn Sie sans-serif für die gesamte Seite bevorzugen, fügen Sie die folgende Regel zu Ihrem Stylesheet hinzu:

* {
  font-family: sans-serif;
}

Optional können Sie zuerst den Namen einer bestimmten Schriftfamilie festlegen, gefolgt von der allgemeinen Bezeichnung:

* {
  font-family: "DejaVu Sans", sans-serif;
}

Wenn das Gerät, das die Seite darstellt, über diese spezielle Schriftfamilie verfügt, verwendet der Browser sie. Ist sie nicht vorhanden, wird die Standardschriftart verwendet, die dem generischen Familiennamen entspricht. Browser suchen die Schriftarten in der Reihenfolge, in der sie in der Eigenschaft angegeben sind.

Jeder, der schon einmal ein Textverarbeitungsprogramm benutzt hat, wird auch mit drei anderen Schriftanpassungen vertraut sein: Größe, Gewicht und Stil. Für diese drei Merkmale gibt es entsprechende CSS-Eigenschaften: font-size, font-weight und font-style.

Die Eigenschaft font-size akzeptiert Schlüsselwortgrößen wie xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large. Diese Schlüsselwörter beziehen sich auf die vom Browser verwendete Standardschriftgröße. Die Schlüsselwörter larger und smaller ändern die Schriftgröße relativ zur Schriftgröße des übergeordneten Elements. Sie können die Schriftgröße auch mit numerischen Werten ausdrücken, einschließlich der Einheit nach dem Wert, oder mit Prozentsätzen.

Wenn Sie nicht die Schriftgröße, sondern den Abstand zwischen den Zeilen ändern wollen, verwenden Sie die Eigenschaft line-height. Bei einer line-height von 1 entspricht die Zeilenhöhe der Schriftgröße des Elements, wodurch die Textzeilen zu eng beieinander liegen können. Daher ist ein Wert größer als 1 für Texte besser geeignet. Wie bei der Eigenschaft font-size können auch andere Einheiten zusammen mit dem numerischen Wert verwendet werden.

Das font-weight setzt die Stärke der Schrift mit den bekannten Schlüsselwörtern normal oder bold. Die Schlüsselwörter lighter und bolder ändern die Schriftstärke des Elements relativ zur Schriftstärke seines übergeordneten Elements.

Die Eigenschaft font-style kann auf italic gesetzt werden, um die kursive Version der aktuellen Schriftfamilie auszuwählen. Der Wert oblique wählt die schräge Version der Schriftart. Diese beiden Optionen sind fast identisch, aber die kursive Version einer Schriftart ist normalerweise etwas schmaler als die schräge Version. Wenn weder eine kursive noch eine schräge Version der Schrift existiert, wird die Schrift vom Browser künstlich geneigt.

Es gibt weitere Eigenschaften, die die Darstellung von Text im Dokument verändern. Sie können zum Beispiel Teile des Textes, die Sie hervorheben wollen, unterstreichen. Verwenden Sie zunächst ein <span>-Tag, um den Text abzugrenzen:

<p>CSS is the <span class="under">proper mechanism</span> to style HTML documents.</p>

Dann nutzen Sie den Selektor .under, um die Eigenschaft text-decoration zu ändern:

.under {
  text-decoration: underline;
}

Standardmäßig sind alle a-Elemente (Links) unterstrichen. Um das zu verhindern, setzen Sie den Wert none für die text-decoration aller a-Elemente:

a {
  text-decoration: none;
}

Bei Textkorrekturen streichen manche Autoren gerne falsche oder veraltete Textteile durch, damit der Leser weiß, dass der Text aktualisiert bzw. was entfernt wurde. Verwenden Sie dazu den Wert line-through der Eigenschaft text-decoration:

.disregard {
  text-decoration: line-through;
}

Auch hier kann ein <span>-Tag dazu dienen, den Stil anzuwenden:

<p>Netscape Navigator <span class="disregard">is</span> was one of the most popular Web browsers.</p>

Andere Auszeichnungen können spezifisch für ein Element sein. Die Kreise in Aufzählungslisten können Sie mit der Eigenschaft list-style-type anpassen. Um sie z.B. in Quadrate zu ändern, verwenden Sie list-style-type: square. Um sie zu entfernen, setzen Sie den Wert von list-style-type auf none.

Geführte Übungen

Wie fügen Sie der Farbe Blau (RGB-Notation rgb(0,0,255)) Halbtransparenz hinzu, um sie in der CSS-Eigenschaft color zu verwenden?
Welche Farbe entspricht dem hexadezimalen Wert #000?
Times New Roman ist eine serif-Schriftart und steht nicht auf allen Geräten zur Verfügung. Wie könnte eine CSS-Regel lauten, um Times New Roman anzufordern und gleichzeitig die generische Schriftfamilie serif als Fallback zu verwenden?
Wie nutzen Sie ein Schlüsselwort für relative Größe, um die Schriftgröße des Elements <p class="disclaimer"> im Verhältnis zu seinem übergeordneten Element kleiner zu machen?

Offene Übungen

Die Eigenschaft background ist eine Abkürzung, um mehr als eine background-*-Eigenschaft auf einmal festzulegen. Schreiben Sie die folgende CSS-Regel als eine einzige background-Eigenschaft um.
```
body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}
```
Schreiben Sie eine CSS-Regel für das Element <div id="header"></div>, die nur dessen untere Randbreite auf 4px ändert.
Schreiben Sie eine font-size-Eigenschaft, die die im Root-Element der Seite verwendete Schriftgröße verdoppelt.
Doppelter Zeilenabstand ist eine gängige Textformatierungsfunktion in Textverarbeitungsprogrammen. Wie definieren Sie ein ähnliches Format mit CSS?

Zusammenfassung

Diese Lektion behandelt die Anwendung einfacher Stile auf Elemente eines HTML-Dokuments. CSS bietet Hunderte von Eigenschaften, und die meisten Webdesigner werden auf Referenzhandbücher zurückgreifen, um sie sich alle zu merken. Eine relativ kleine Anzahl von Eigenschaften und Werten wird allerdings häufig verwendet, und es ist wichtig, diese auswendig zu kennen. In dieser Lektion werden die folgenden Konzepte und Verfahren behandelt:

Grundlegende CSS-Eigenschaften für Farben, Hintergründe und Schriftarten.
Absolute und relative Einheiten, die CSS zur Festlegung von Größen und Abständen verwenden kann, wie z.B. px, em, rem, vw, vh, etc.

Lösungen zu den geführten Übungen

Wie fügen Sie der Farbe Blau (RGB-Notation rgb(0,0,255)) Halbtransparenz hinzu, um sie in der CSS-Eigenschaft color zu verwenden?

Verwenden Sie das Präfix rgba und fügen Sie 0.5 als vierten Wert hinzu: rgba(0,0,0,0.5).
Welche Farbe entspricht dem hexadezimalen Wert #000?

Die Farbe black. Der hexadezimale Wert #000 ist eine Kurzform für #000000.
Times New Roman ist eine serif-Schriftart und steht nicht auf allen Geräten zur Verfügung. Wie könnte eine CSS-Regel lauten, um Times New Roman anzufordern und gleichzeitig die generische Schriftfamilie serif als Fallback zu verwenden?
```
* {
  font-family: "Times New Roman", serif;
}
```
Wie nutzen Sie ein Schlüsselwort für relative Größe, um die Schriftgröße des Elements <p class="disclaimer"> im Verhältnis zu seinem übergeordneten Element kleiner zu machen?

Mit dem Schlüsselwort smaller:
```
p.disclaimer {
  font-size: smaller;
}
```

Lösungen zu den offenen Übungen

Die Eigenschaft background ist eine Abkürzung, um mehr als eine background-*-Eigenschaft auf einmal festzulegen. Schreiben Sie die folgende CSS-Regel als eine einzige background-Eigenschaft um.
```
body {
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}
```
```
body {
  background: repeat-x url("background.jpg");
}
```
Schreiben Sie eine CSS-Regel für das Element <div id="header"></div>, die nur dessen untere Randbreite auf 4px ändert.
```
#header {
  border-bottom-width: 4px;
}
```
Schreiben Sie eine font-size-Eigenschaft, die die im Root-Element der Seite verwendete Schriftgröße verdoppelt.

Die Einheit rem entspricht der im Root-Element verwendeten Schriftgröße, so dass die Eigenschaft font-size: 2rem lautet.
Doppelter Zeilenabstand ist eine gängige Textformatierungsfunktion in Textverarbeitungsprogrammen. Wie definieren Sie ein ähnliches Format mit CSS?

Setzen Sie die Eigenschaft line-height auf den Wert 2em, denn die Einheit em entspricht der Schriftgröße des aktuellen Elements.