Cascading Style Sheets | EF Informatik 2022

Die HTML-Elemente können mittels sogenannter Stylesheets gestaltet werden. Dabei lassen sich Farben, Schriftarten, aber auch Rahmen und Positionen der Elemente anpassen.

# Syntax

Mit CSS schreibt man Regeln. Diese bestehen aus 3 Komponenten:

Selektor {
    Eigenschaft: Wert;
    Eigenschaft: Wert;
    ...
    Eigenschaft: Wert;
}

1
2
3
4
5
6
7

Selektor: sagt für welche Elemente der Seite diese Regel gelten soll
Eigenschaften: legt fest welche Eigenschaften der gewählten Elemente angepasst werden soll
Werte: für jede Eigenschaft wird ein Wert festgelegt (z.B. Farbe, Länge, fester Wert, …)

# Selektoren

Name	Muster	Bedeutung	Beispiel
Typselektor	`E`	Selektiert jedes Element vom Typ `E`	`p { .. }` selektiert jedes `p`-Element des HTML-Dokumentes
Klassenselektor	`.c`	Selektiert jedes Element der Klasse `c`	`.entwurf { .. }` selektiert jedes HTML-Element mit `class`-Attribut `entwurf`
ID-Selektor	`#id`	Selektiert das Element mit der ID `id`	`#hauptnavigation { .. }` selektiert das HTML-Element mit der id `hauptnavigation`
Element-Klassen-Selektor	`E.c`	Selektiert alle Elemente vom Typ `E` mit Klasse `c`	`p.entwurf { .. }` selektiert jedes `p`-Element mit Klasse `entwurf`

Verschiedene Selektoren

Aufgabe

Wir wenden die Beispiel-Selektoren der obenstehenden Tabelle auf den folgenden HTML-Code an. Welche HTML-Elemente werden gewählt?

<div id="hauptnavigation" class="entwurf"></div>
<p>asdf</p>
<p class="entwurf">asdf</p>
<p class="definitiv">asdf</p>
<div>adsf</div>

1
2
3
4
5

Mehrere Selektoren (S1, S2, …) können kombiniert werden.

Kombination	Muster	Bedeutung	Beispiel
Und-Kombination	`S1, S2`	Die Regel gilt für alle `S1` und alle `S2`	`div, p { .. }` selektiert alle `p`-Elemente und alle `div`-Elemente
Descendant	`S1 S2`	Aus der Selektion von `S1` werden alle Elemente welche `S2` entsprechen gewählt	`div p { .. }` selektiert alle `p`-Elemente die in einem `div`-Element enthalten sind
Child	`S1 > S2`	Selektiert alle `S2`-Elemente welche direkte Nachkommen von `S1` sind	`div > p.entwurf { … }` alle `p`-Elemente mit Klasse `entwurf` welche direkt in einem `div`-Element sind
Adjacent Sibling	`S1 + S2`	Wählt alle Elemente `S2` die direkt nach `S1` kommen und das selbe Elternelement wie `S1` haben	`div.entwurf + p { .. }` selektiert alle `p`-Elemente welche direkt nach einem `div`-Element mit Klasse `entwurf` kommen
General Sibling	`S1 ~ S2`	Selektiert alle `S2`-Elemente welche mit dem `S1`-Element dasselbe Elternelement teilen	`div ~ p { .. }` wählt alle `p`-Elemente welche «Geschwister» von `div`-Elementen sind

Selektoren kombinieren

Es existieren mehrere weitere Möglichkeiten, die Selektion einzuschränken. Man kann diese spielerisch im Online-Game CSS-Diner (opens new window) austesten.

# Eigenschaften und Werte

Nachdem wir nun Elemente gewählt haben, können wir diese anpassen. Dazu legen wir für gewisse Eigenschaften Werte fest.

# Farben

Werte für Farben können wie folgt angegeben werden:

article {
   color: blue;
   border: 4px solid #f0c142;
   background-color: rgb(255,180,120);
   background-color: rgba(255,120,0,0.3);
}

1
2
3
4
5
6

blue: «Textfarbe» – Mögliche Werte: https://www.w3schools.com/colors/colors_names.asp (opens new window)
#f0c142: «Hexfarbe» – 3 Kanäle, RGB, Aufteilung in je zweistellige Hexadezimale Zahl (Rotwert: f0, Grünwert: c1, Blauwert: 42)
rgb(255,120,60): «Dezimalfarbe» – 3 Kanäle, RGB, Aufteilung in Wert zwischen 0 und 255 pro Kanal.
rgba(120,60,0,0.3): «Dezimalfarbe mit Transparenz» – 4 Kanäle, RGB + alpha, Aufteilung in 3 Farbwerte zwischen 0 und 255 und einem «Deckungswert» für den Alpha-Kanal zwischen 0 und 1 (0 heisst ganz durchsichtig, 1 heisst nicht durchsichtig).

# Distanzen (Breite, Länge, Höhe, Abstände, …)

Diverse Längeneinheiten können verwendet werden um Abstände anzugeben. Dabei schreibt man die Einheit direkt (ohne Leerzeichen) hinter die Zahl. Man unterscheidet zwischen relativen und absoluten Einheiten.

Einheit	Erklärung	Typ	Beispiel
`px`	Pixel (Bildschirmpunkte)	absolut	`bottom: 12px` 12 Pixel Abstand von unten
`%`	Prozent des Elternelementes	relativ	`width: 50%` Breite 50% der Breite des Elternelementes
`rem`	relatives Vielfaches der Textgrösse des Dokumentes	relativ	`font-size: 1.4rem` Schriftgrösse Faktor 1.4 der Standard-Schriftgrösse

nav {
	position: absolute;
	bottom: 12px;
	font-size: 1.4rem;
	width: 50%;
	border: 1px solid black;
}

1
2
3
4
5
6
7

# Position

Eigenschaft	Wert	Erklärung
`display`	`inline`	Anzeige im «Textfluss», keine Positionierung möglich
	`block`	Anzeige als Block-Element, kann positioniert werden
	`inline-block`	Verhält sich wie Inline-Element, kann aber Breite und Höhe haben
`position`	`static`	Standard, Element wird in der Reihenfolge wie es im Quelltext steht, angezeigt
	`absolute`	Position relativ zum ersten nicht-statischen Vorgängerelement
	`fixed`	Position relativ zum Browser-Fenster
	`relative`	Position relativ zur «Normal»-Position des Elementes
`float`	`left`	Das Element «schwebt» links und wird von nachfolgenden Elementen «umflossen»
	`right`	Das Element «schwebt» rechts und wird von nachfolgenden Elementen «umflossen»

nav {
	float: right;
}
nav li {
	display: inline;
}
footer {
	position:absolute;
	bottom:0px;
	right:10px;
}
nav, footer {
	background-color: yellow;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Schrift und Text

Neben Schriftfarbe, kann natürlich auch die Grösse, die verwendete Schriftart und weiteres gesetzt werden:

body {
   color: #542437;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-style: italic;
   font-size: 1.2rem;
   font-weight: bold;
   text-align: center;
   text-decoration: underline;
   line-height: 1.5;
}

1
2
3
4
5
6
7
8
9
10

font-family: Liste von Schriften, die erste Verfügbar wird gewählt
font-style: italic (kursiv) oder normal
font-weight: bold (fett) oder normal
text-align: Ausrichtung: center, left, right oder justify
text-decoration: Dekoration: none, overline, line-through oder underline
line-height: Zeilenabstand: ein Vielfaches der Schriftgrösse

# Rahmen

Möchte man ein Element mit einem Rahmen versehen, kann man das mit der border-Eigenschaft erledigen. Diese fasst die drei Werte für border-width, border-style und border-color zusammen. Diese Werte können auch einzeln gesetzt werden. Zudem gibt es für jede Rahmen-Eigenschaft x vier Varianten (border-top-x, border-right-x, border-bottom-x und border-left-x) um die vier Rahmen-Stücke (oben, rechts, unten und links) separat zu gestalten.

article {
   border: 4px solid #f0c142;
}
nav {
   border-style: dotted;
   border-color: red;
   border-top-color: blue;
   border-width: 5px;
   border-bottom-style: dashed;
}

1
2
3
4
5
6
7
8
9
10

border-style: Art des Rahmens: solid, dashed, dotted, …

# Box-Model

Aufgabe

Wir versuchen unsere im html-Kapitel erstellte Webseite zu gestalten:

Erstelle im selben Ordner eine neue Textdatei mit dem Namen style.css
Verlinke diese in deiner Html-Datei, indem du im head-Element die folgende Zeile einfügst: <link rel="stylesheet" type="text/css" href="style.css">
Erstelle nun CSS-Regeln, um deine Html-Elemente zu gestalten. Wiederum kannst du mit F5 die Seite im Browser aktualisieren um die Änderungen zu sehen.

← HTML-Elemente