Bearbeiten von „CSS-Einführung“

= Links =

* [https://wiki.selfhtml.org/wiki/CSS https://wiki.selfhtml.org/wiki/CSS]
* [https://www.w3schools.com/css/ https://www.w3schools.com/css/]

= Intro =

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

Beispiel:
<source lang=css>
body {
    background-image: url("../../../images/hintergrund/hg.png");
}
</source>
* 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.

<source lang=css>
.item-page {
  border: 2px #EFC969 solid;
  border-radius: 1em;
  padding: 1em;
  background: white;
}
</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.
* Wenn die Hintergrundfarbe nicht definiert würde, würde das Hintergrundbild (siehe oben) auch in diesem Bereich sichtbar.
<source lang=css>
a {
    color: #EFC969 !important;
}
</source>
* 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.
<source lang=css>
a:hover,
a:focus {
    color: #c8a95c !important;
    text-decoration: underline;
}
</source>
* 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.

<source lang=css>
.timaios {
  color: #efc969; font-family: verdana, geneva, sans-serif;
}
</source>
* Die Klasse timaios ändert Farbe und die Schriftfamilie. Wenn Du den Inhalt der Startseite anschaust, siehst Du, dass das Wort Timaios jedesmal mit <em class="timaios">Timaios</em> umrahmt ist. Mit entsprechender Ausgestaltung.

= Woher weiß man, welchen Selektor man nehmen muss? =
* Dazu öffnet man die Seite mit dem Firefox.
* Strg-Umschalt-C öffnet die Webentwicklung, dort auf Registerblatt "Inspector" gehen.
@@ Zeile 58: / Zeile 58: @@
 = Woher weiß man, welchen Selektor man nehmen muss? =
 * Dazu öffnet man die Seite mit dem Firefox.
-* Strg-Umschalt-C öffnet die Webentwicklung, dort auf Registerblatt "Inspektor" gehen.
+* Strg-Umschalt-C öffnet die Webentwicklung, dort auf Registerblatt "Inspector" 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