Aktuelle Version vom 1. Dezember 2020, 11:06 Uhr

Links[Bearbeiten]

Eine CSS-Regel beginnt mit einem Selektor und einer Klammer '{', es folgen die Attributszuweisungen, am Ende '}'.

Beispiel:

body {
    background-image: url("../../../images/hintergrund/hg.png");
}

Selektor ist hier "body", das ist der Bereich, der im HTML mit <body> ... </body> markiert ist.
HTML-Bereiche (wie body, div, a...) werden ohne führende Sonderzeichen benannt.
Das zu definierende Attribut "background-image" bekommt den Wert url("../../../images/hintergrund/hg.png")
Dabei gilt, dass der Ausgangspunkt von Pfaden immer die CSS-Datei ist in der die Definition steht. user.css liegt in templates/protostar/css/user.css. Wir wollen aber images/hintergrund/hg.png, also müssen wird 3 Verzeichnisse zurückgehen (../../..) und dann nach images/hintergrund/hg.png.

.item-page {
  border: 2px #EFC969 solid;
  border-radius: 1em;
  padding: 1em;
  background: white;
}

Hier ist der Selektor die Klasse .item-page (Klassen beginnen mit '.'). Es wird ein Rahmen in Farbe gelb (#EFC969), mit 2 Pixel Breite und durchgehender Linie definiert.
Wichtig: Klassen werden im HTML ohne führenden '.' angegeben, z.B. <em class="timaios">
Die Ecken sind rund mit Radius 1em. em ist ein Längenmass, das von der Schriftgröße abhängt.
padding bezeichnet den Abstand vom Rahmen zum Innenbereich, der den Text beinhaltet.
Wenn die Hintergrundfarbe nicht definiert würde, würde das Hintergrundbild (siehe oben) auch in diesem Bereich sichtbar.

a {
    color: #EFC969 !important;
}

Der Selektor a bezeichnet die Darstellung von Links. Diese werden also gelb dargestellt. das "!important" sorgt dafür, dass keine andere Regel diese Regel überschreibt.

a:hover,
a:focus {
    color: #c8a95c !important;
    text-decoration: underline;
}

Der Selektor a:hover bezieht sich auf einen Link, wenn die Maus darüber steht. Dann ändert sich die Farbe zu einem dunkleren gelb, zusätzlich wird der Link unterstrichen.
Der Selektor a:focus bezieht sich auf einen Link, auf dem der aktuelle Cursor steht.
Hier siehst Du, dass mehrere Selektoren, mit Komma getrennt, auf einmal definiert werden können.

.timaios {
  color: #efc969; font-family: verdana, geneva, sans-serif;
}

Die Klasse timaios ändert Farbe und die Schriftfamilie. Wenn Du den Inhalt der Startseite anschaust, siehst Du, dass das Wort Timaios jedesmal mit Timaios umrahmt ist. Mit entsprechender Ausgestaltung.

Dazu öffnet man die Seite mit dem Firefox.
Strg-Umschalt-C öffnet die Webentwicklung, dort auf Registerblatt "Inspektor" gehen.
Links neben "Inspektor" ist ein Icon "Mauszeiger in eine Bildschirm". Ist dieses angeklickt, so kannst Du auf der Seite ein Element anklicken und es wird dir unten die HTML-Definition angezeigt. Da kannst Du die Klasse des Elementes sehen, und rechts sogar alle Eigenschaften des Elementes mit dem Ort der Definition.
Im Chrome von Google kriegst Du was ähnliches mit Strg-Umschalt-I

@@ Zeile 28: / Zeile 28: @@
 </source>
 * Hier ist der Selektor die Klasse .item-page (Klassen beginnen mit '.'). Es wird ein Rahmen in Farbe gelb (#EFC969), mit 2 Pixel Breite und durchgehender Linie definiert.
+* Wichtig: Klassen werden im HTML ohne führenden '.' angegeben, z.B. <nowiki><em</nowiki> class="timaios">
 * Die Ecken sind rund mit Radius 1em. em ist ein Längenmass, das von der Schriftgröße abhängt.
 * padding bezeichnet den Abstand vom Rahmen zum Innenbereich, der den Text beinhaltet.