Cascading Style Sheets

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;
}
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

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>

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 austesten.

Screenshot CSS-Diner

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);
}
blue
«Textfarbe» – Mögliche Werte: https://www.w3schools.com/colors/colors_names.asp
#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;    
}

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;
}

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;
}
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;
}
border-style
Art des Rahmens: solid, dashed, dotted, ...

Box-Model

CSS-Box-Model

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

  1. Erstelle im selben Ordner eine neue Textdatei mit dem Namen style.css
  2. 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">
  3. 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.