Links

Zielsetzung

Cascading Style Sheets (CSS) ist eine Sprache, mit der HTML-Inhalte mit Formateigenschaften ausgestattet werden. Das dient der Trennung von Inhalt (HTML) und Form (CSS).

Schnellkurs

Datei anlegen: index.html

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="tutorial.css">
</head>
   <div class="sheet">
      <h1>Try it!</h1>
      <p class="region1 right">
         This is a paragraph with right alignment.
      </p>
      <div class="region2">
         <p class="error">Error found</p>
         <p class="warning">Warning: it is dangerous</p>
      </div>
      <p class="region1 middle">
         This is a paragraph too, but with center alignment.
      </p>
      <p class="long-text">
         Dieser Satz ist ein besonders langer Satz, der mittels verschachtelter Relativsätze, die
         nicht immer einen Sinn
         ergeben, einfach mehrere Zeilen, die eben auch lang sein dürfen, erzeugen, so dass das als Muster für normale
         Textabsätze dienen kann.
      </p>
      <p class="long-text2">
         Dieser <b>zweite</b> Satz ist ebenfalls ein besonders langer Satz, der mittels
         verschachtelter Relativsätze, die nicht immer einen Sinn
         ergeben, einfach mehrere Zeilen, die eben auch lang sein dürfen, erzeugen, so dass das als Muster für normale
         Textabsätze dienen kann.
      </p>
      <p class="long-text2">Dieser <b>zweite</b> Satz ist ebenfalls ein besonders langer Satz, der mittels
         verschachtelter Relativsätze, die nicht immer einen Sinn
         ergeben, einfach mehrere Zeilen, die eben auch lang sein dürfen, erzeugen, so dass das als Muster für normale
         Textabsätze dienen kann.
         <br />
         Im gleichen Absatz folgt hier noch ein Satz.
      </p>
      <p class="normal-text">Und noch ein Absatz am Schluss.</p>
      </p>
      <p class="experiment">
         Mit diesen Absatz können wir mal so richtig experimentieren. Er ist genügend lang, dass er mehr als eine Zeile füllt, und das passt uns gut.<br/>
         Hier fängt eine Zeile wieder an.
      </p>
   </div>
   <div>
</body>
</html>

Datei index.php im Browser öffnen.
Wir legen die Datei tutorial.css an.
Wir wollen die Überschrift in blauer Schrift, in der Mitte zentriert:

h1 {
  color: blue;
  text-align: center;
}

Im Editor Visual Code werden die Farben angezeigt. Welche Farben gibt es? Cursor hinter den "color:", Strg-Enter liefert eine Auswahl.

Textattribute

Ausrichtung (Alignment)

der erste Absatz soll rechtsbündig werden: dazu haben wir schon eine Klasse "right" eingetragen: <div class="region1 right">
Diese Klasse definieren wir jetzt: eine Klasse beginnt in der CSS-Definition immer mit einem Punkt. In der HTML-Datei wird kein Punkt geschrieben!

.right {
  text-align: right; /* möglich sind: left right center */
}

Browser F5

Schrift

p {
  font-family: Georgia, 'Times New Roman', serif; /* Komma bedeuted "oder" Anführungszeichen sind bei Blanks im Namen nötig */
  font-weight: normal; /* Strichstärke. Möglich: lighter bolder bold normal, eine Zahl zwischen 1 und 1000 */
  font-size: 80%; /* Schriftgröße ist 80% des Elternelements. */
  line-height: 1.4; /* Zeilenhöhe im Verhältnis zur Zeichenbreite, normalerweise zwischen 1.25 und 1.4 */
}

Generische Schriftfamilien:
- serif: mit Serifen (kleine waagrechten Striche in der Zeilenbasis)
- sans-serif: Ohne Serifen
- fantasy: ungewöhnliche Schrift
- cursive: Kursivschrift
- monospace: jedes Zeichen ist gleich breit

@font-face {
  font-family: 'meine-schrift';
  src: local('meine-schrift'),
       url('pfad/zu/meinerschrift.woff2') format('woff2');
}

Damit kann man eine bestimmte Schriften einbinden, die sonst nicht beim Client installiert sind.

Rahmen und Längenangaben

Wir wollen, dass Div-Bereiche mit einem schwarzen Rahmen der Breite 3 Pixel versehen sind.
Längen (oder Breiten) können in CSS verschieden Bezüge haben:
- Pixel (Punkte auf dem Bildschirm)
- %: Prozent des umgebenden Elements.
- em: Schriftbreite des Parent-Elements (umgebendes Element), und zwar die Breite des Buchstabens "m".
- rem (root front size): Schriftgröße des HTML-Elements, meist relativ zu der Browser-Schriftgröße (16 px).
- lh (line height): Höhe einer Zeile im Parent-Element
- rlh (root line height): Zeilenhöhe des HTML-Elements, meist relativ zu 16 px
- ch (character): die Höhe des Zeichens "0" (Null).
- vh (viewport height): 1% der Höhe des "View Ports" (Sichtbarer Bereich des Anzeigegerätes: Im Smartphone die Bildschirmhöhe, in Windows die Fensterhöhe)
- vw (viewport width): 1% der Breite des "View Ports"

Das Boxmodell

Der Abstand eines Absatzes zum nächsten Absatz soll eine halbe Zeichenbreite sein, mit dunkelblauem Rahmen.

div {
  border: solid 3px black;
 }
p {
  border: solid 1px darkblue;
  padding-bottom: 0.5rem;
}

Wir probieren mal Veschiedenes mit genau dem einen Absatz mit der Klasse "experiment" aus:

.experiment {
    border red 3px dotted;
    margin: 1rem 2rem 3rem 5rem;
    padding: 1rem 5rem;
    color: blue;
    background: lightcyan;
}

Werden bei margin, border oder padding 4 Einheiten angegeben, so gelten die für oben, rechts, unten und links.
Bei 2 Einheiten: erste bezieht sich auf oben und unten, die zweite auf rechts und links.
Bei einer Einheit: alle Seiten.
Probiere mal die anderen Einheiten aus: px, vt, %

Farben

Der Standard definiert eine Reihe von Farbnamen: red green blue white black cyan...
Diese können noch mit "light" oder "dark" modifiziert werden: lightgreen darkblue
Reicht das nicht aus, kann mit Hexadezimalzahlen ein genauer Wert festgelegt werden.
- wenn 6 Hexziffern genommen werden, sind die ersten 2 der Rotanteil, die 2ten 2 der Grünanteil, die 3ten 2 der Blauanteil
- #00ff00: kein Rot, volles Grün (ff), kein Blau
- #ff0000: volles Rot, kein Grün, kein Blau
- #000000: kein "Licht": schwarz
- #ffffff: volles "Licht": weiß
- #1289ab: ein bisschen rot (12), mittel grün (89), viel blau
- mit einer Browser-Erweiterung kann man mittels "Color-Picker" diese Farbnummer ermitteln
- mit rgb(123 70 255) werden die 3 Farbanteile in Dezimalzahlen angegeben: 0..255
- mit rgb(123 70 255 / 0.5) wird zusätzlich die Transparenz 50% angegeben.

Tabelle

Neue Datei table.html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="tutorial.css">
</head>
<body>
    <table class="standard-table">
        <caption>Flüsse</caption>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Length</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-header"><th colspan="3">Afrika</th></tr>
            <tr>
                <td>1</td>
                <td>Nil</td>
                <td>6650 km</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Niger</td>
                <td>4184 km</td>
            </tr>
            <tr class="table-header"><th colspan="3">Europa</th></tr>
            <tr>
                <td>1</td>
                <td>Donau</td>
                <td>2857 km</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Isar</td>
                <td>292 km</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Rottach</td>
                <td>51 km</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Length</th>
            </tr>
        </tfoot>
    </table>
    </div>
</body>
</html>

Diese Datei im Browser anzeigen.
In der Tabelle tutorial.css:

table {
  border-collapse: separate;
  border-spacing: .2rem;
  margin-left: 2rem;
  box-shadow: 0 0 .1rem #666;
  position: relative;
  z-index: 1;
}
  
caption {
  color: white;
  background: hsl(13 96% 39%);
  font-size: 1.5rem;
  box-shadow: .1rem .1rem .1rem 0 hsl(0 0 50%);
  padding: .2rem .2rem .2rem 2rem;
  width: 10rem;
  margin-left: -.6rem;
  position: relative;
}

Probiere aus:

...
table {
  border-collapse: collapse;
  width: 80%; 
  table-layout: fixed; 
  table-layout: auto;
}
th {
  height: 3rem;
}
td:nth-of-type(3), th:nth-of-type(3) {
  text-align: right;
}
tbody tr:nth-child(even) { 
  background-color: lightgray; 
  color: blue; 
}
tbody tr:hover {
  background: darkgray;
  color: white;
}

border-collapse: collapse fasst die Rahmen zusammen, wenn mehrere verschachtelte Rahmenlinien existieren.
table-layout: fixed: Tabellenlayout unabhängig vom Inhalt. table-layout: auto passt an Inhalt an
td:nth-of-type(3): das dritte Kind-Elrement des Elternelrements, hier also die 3. Überschriftsspalte (td)

Selektoren

Der Teil der CSS-Definition vor dem '{' wird Selektor genannt.

/* Der einfachste Fall: genau ein Element: */
table { ... }
/* Werden mehrere Elemente mit Komma getrennt, bedeutet das: jedes Element (lies das Komma als "oder"). */
h1, h2, h3 { ... }
/* Werden Elemente nur mit Leerzeichen getrennt, gilt beliebige Hierarchie: Kind Enkel ...*/
tbody tr {} /* Gilt für alle tr-Elemente, die zwischen <tbody> und </tbody> stehen
/* Kind-Beziehung wird mit ">" ausgedrückt:
p > a { ... } /* Alle Anker , die sich in einem Paragraphen befinden */
/* Nachbarelement: */
.first + .second { ... } /* Attribute der Klasse second, aber nur, wenn davor ein Element der Klasse first steht. */
/* Geschwisterelemente: */
.starter ~ .child { ... } /* Attribute der Klasse starter, die auf gleicher Ebene wie starter sind, aber danach folgen. */

Pseudoklassen

Pseudoklassen beginnen mit einem ':'.

Dynamische Pseudoklassen
- tr:hover { ... } gilt für eine Tabellenzeile, wenn sich die Maus darin befindet
- Nur für Eingabefelder:
  - input:enabled{ ... } gilt für der Felder, die geändert werden dürfen
  - input:disabled{ ... } gilt für der Felder, die nicht geändert werden dürfen
  - input:checked { ... } gilt für angeklickte Checkboxen.
  - input:focus { ... } gilt für Felder, die den Focus haben.
- Nur für Links:
  - a:active { ... } gilt für angeklickte Links.
  - a:link { ... } gilt für alle Verweise, die noch nicht besucht wurden.
  - a:visited { ... } gilt für alle Verweise, die bereits besucht wurden.
  - a:any-link { ... } gilt für alle Verweise (wie :link und :visited)

- Strukturelle Pseudoklassen
- li:first-of-type { ... } für das erste Listenelement.
- p:last-of-type { ... } nur für den letzten Paragraphen.
- p:empty { ... } nur für leere Paragraphen.
- .article:first-child { ... } gilt für das erste Kind-Element der Klasse article
- .article:last-child { ... } gilt für das letzte Kind-Element der Klasse article
- .article:nth-child(4) { ... } gilt für das vierte Kind-Element der Klasse article
- tr:nth-child(odd) { ... } gilt alle ungeraden Spalten (Kinder einer Zeile) einer Tabelle
- tr:nth-child(even) { ... } gilt alle geraden Spalten ((Kinder einer Zeile) einer Tabelle
- tr:nth-of-type(odd) { ... } gilt alle ungeraden Zeilen einer Tabelle
- tr:nth-of-type(even) { ... } gilt alle geraden Zeilen einer Tabelle

Aufgaben

Trage einen Link auf https://bahn.de ein.
Die Schrift soll rot werden, wenn die Maus auf dem Link ist.
Eine Liste mit 4 Obstsorten: jede 2.te Obst soll blaue Schrift haben.

Pseudoelemente

Pseudoelemente beginnen mit "::", sie werden mit einer normalen Klasse kombiniert:

b::before, b::after { content: '!'; } fügt vor und nach fettem Text ein Ausrufezeichen ein.
th::after { content: ':' } fügt bei Tabellenüberschriften immer ein ':' am Ende ein.
h1::first-letter: {color: red; } spricht das erste Zeichen in der Überschrift der ersten Ebene an.
.article::first-line { color: blue; } spricht die erste Zeile in Elementen mit Klasse article an.
input::placeholder { color: lightgray; }

Hintergrundbilder

body {
  background-image: url("../img/Wolke.png");
/* oder */
  background-image: url("img_tree.gif"), url("paper.gif");
  background-repeat: no-repeat;
}

Hinweis: die url-Angabe ist am besten relativ zur CSS-Datei.

CSS

Inhaltsverzeichnis