Skip to content

Cascading Style Sheets

HTML, CSS und JS

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:

css
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

Um Elemente auszuwählen stehen verschiedene Selektoren zur Verfügung. Die einfachsten sind:

Verschiedene Selektoren
NameMusterBedeutungBeispiel
TypselektorESelektiert jedes Element vom Typ Ep { .. }
selektiert jedes p-Element des HTML-Dokumentes
Klassenselektor.cSelektiert jedes Element der Klasse c.entwurf { .. }
selektiert jedes HTML-Element mit class-Attribut entwurf
ID-Selektor#idSelektiert das Element mit der ID id#hauptnavigation { .. }
selektiert das HTML-Element mit der id hauptnavigation
Element-Klassen-SelektorE.cSelektiert alle Elemente vom Typ E mit Klasse cp.entwurf { .. }
selektiert jedes p-Element mit Klasse entwurf

Aufgabe

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

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

Selektoren kombinieren
KombinationMuster    BedeutungBeispiel
Und-KombinationS1, S2Die Regel gilt für alle S1 und alle S2div, p { .. }
selektiert alle p-Elemente und alle div-Elemente
DescendantS1 S2Aus der Selektion von S1 werden alle Elemente welche S2 entsprechen gewähltdiv p { .. }
selektiert alle p-Elemente die in einem div-Element enthalten sind
ChildS1 > S2Selektiert alle S2-Elemente welche direkte Nachkommen von S1 sinddiv > p.entwurf { … }
alle p-Elemente mit Klasse entwurf welche direkt in einem div-Element sind
Adjacent SiblingS1 + S2Wählt alle Elemente S2 die direkt nach S1 kommen und das selbe Elternelement wie S1 habendiv.entwurf + p { .. }
selektiert alle p-Elemente welche direkt nach einem div-Element mit Klasse entwurf kommen
General SiblingS1 ~ S2Selektiert alle S2-Elemente welche mit dem S1-Element dasselbe Elternelement teilendiv ~ p { .. }
wählt alle p-Elemente welche «Geschwister» von div-Elementen sind

Es existieren mehrere weitere Möglichkeiten, die Selektion einzuschränken. Man kann diese spielerisch im Online-Game CSS-Diner 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:

css
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).

Im obigen Beispiel würde dir rgba-Farbe die vorher gesetzte rgb-Farbe überschreiben – es sei denn der Browser unterstützt keine Farben mit Transparenz.

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.

Einheiten Grösse
EinheitErklärungTypBeispiel
pxPixel (Bildschirmpunkte)absolutbottom: 12px
12 Pixel Abstand von unten
%Prozent des Elternelementesrelativwidth: 50%
Breite 50% der Breite des Elternelementes
remrelatives Vielfaches der Textgrösse des Dokumentesrelativfont-size: 1.4rem
Schriftgrösse Faktor 1.4 der Standard-Schriftgrösse
css
nav {
	position: absolute;
	bottom: 12px;
	font-size: 1.4rem;
	width: 50%;
	border: 1px solid black;
}

Position

Eigenschaften zum Positionieren
EigenschaftWertErklärung
displayinlineAnzeige im «Textfluss», keine Positionierung möglich
blockAnzeige als Block-Element, kann positioniert werden
inline-blockVerhält sich wie Inline-Element, kann aber Breite und Höhe haben
flexfür einen sogenannte Flex-Box-Container

Flex-Box

Die sogenannte Flex-Box eignet sich um mehrere Elemente «flexibel» anzuordnen:

html
<div class="container">
   <div>element1</div>
   <div>element2</div>
   <div>element3</div>
   ...
   <div>elementN</div>
</div>
css
.container {
   display: flex;
}

👉 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Schrift und Text

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

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

css
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

Das CSS-Box-Model bestimmt den äusseren Abstand (margin), die Rahmen-Dicke (border-width) und den inneren Abstand (padding):

css
article {
   border-width: 20px;
   margin-top: 1rem;
   margin-bottom: 0;
   margin-left: 12px;
   margin-right: 3px;
   padding: 0.4rem
   border-radius: 8px;
}

margin und padding gibt es mit den Anhängsel -left, -right, -top und -bottom oder ohne, wenn man überall denselben Wert möchte.

Verknüpfung mit HTML

Am Besten schreibt man die CSS-Regeln in eine separate Datei. Diese kann dann in der HTML-Datei verlinkt werden. Somit können mehrere HTML-Dateien dieselbe CSS-Datei verwenden:

Nehmen wir an, wir hätten eine Datei style.css im selben Verzeichnis wie unsere HTML-Dateien. Dann verlinken wir diese CSS-Datei indem wir in den HTML-Dateien im head folgende Zeile hinzufügen:

html
<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css" />
      ...

Aufgabe

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 obenstehende Zeile einfügst.
  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.

Gymnasium Kirchenfeld, fts & lem