CSS
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>
</div>
<div>
<h2>Important Rivers</h2>
<table class="standard-table">
<tr>
<th>Id</th>
<th>Name</th>
<th>Length</th>
</tr>
<tr>
<td>1</td>
<td>Nil</td>
<td>6000 km</td>
</tr>
<tr>
<td>1</td>
<td>Isar</td>
<td>200 km</td>
</tr>
<tr>
<td>1</td>
<td>Rottach</td>
<td>50 km</td>
</tr>
</table>
</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.
- 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;
}
- Browser F5
- 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"
- 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;
}
.sheet {
background-color: #cc;
margin: 1em;
padding: 1em;
}
.region1 {
background-color: lightgreen;
margin: 1em 33%;
}
.region2 {
background-color: white;
}
.error {
color: red;
border: 0.1em solid red;
}
.warning {
color: blue;
}
.middle {
text-align: center;
}
.right {
text-align: right;
}
- Datei index.php im Browser öffnen.