Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Selektoren

Selektoren selektieren HTML-Elemente und weisen ihnen CSS-Eigenschaften zu. Verschiedene Arten von Selektoren machen es möglich, allgemeingültige Angaben zu machen, ganz gezielt nur bestimmte Elemente einer Seite oder ganze Gruppen von Elementen anzusprechen.

Universal-Selektor

Der Universal-Selektor gilt für alle HTML-Elemente einer Seite. Er wird meistens verwendet um die Basistypografie festzulegen und überflüssige Formatierungen zu entfernen.

* { margin:0; padding:0; font-family:"bla"; color:black; font-size:16px; line-height:1.4em; }

Typ-Selektor

Typ-Seletoren gelten für alle Vorkommen eines selektierten HTML-Elements-Typs. Im Beispiel hier werden sämtlichen Absätzen <p> die Aussenabstände entfernt und die Schriftfarbe Grau zugewiesen und allen Listen <ul> werden die Aufzählungspunkte entfernt:

p  { margin:0; color:gray; }
ul { list-style:none; }

Class-Selektor

Gilt für alle HTML-Elemente, denen die entsprechende Klasse zugewiesen ist. Klassennamen müssen im Stylesheet immer mit einem Punkt am Anfang genannt werden.
Beispiel für <em class="Rhabarber">Text</em>:

.Rhabarber { color:red; }

ID-Selektor

Gilt für das HTML-Element, dem die entsprechende ID zugewiesen ist und kann pro HTML-Seite nur einmal verwendet werden. ID-Namen müssen im CSS immer mit einer Raute (Hash) am Anfang stehen.
Beispiel für <div id="Kopf">Text</div>:

#Kopf { color:blue; }

Wichtig

  • Klassennamen und ID-Namen dürfen nicht mit einer Ziffer beginnen und keine Sonderzeichen und keine Wortabstände enthalten.
  • Grosskleinschreibung beachten: Rezepte rezepte

Kombinierte Selektoren

Typ- und Class-Selektoren lassen sich miteinander kombinieren. So könnte beispielsweise die Class «Klaus» für unterschiedliche Kombinationen ergänzt oder verändert werden. Ein Class-Selektor kombiniert mit einem Typ-Selektoren ist immer stärker als der Class-Selektor alleine, egal in welcher Reihenfolge sie im Stylesheet notiert sind.

.Klaus   { color:cyan; }     /* = cyan */
h1.Klaus { color:orange; }   /* = orange */
li.Klaus { color:red; }      /* = rot (stärker als nur .Klaus) */

Grundsätzlich lassen sich in gleicher Weise auch ID- mit Class- oder ID- mit Typ-Selektoren kombinieren. Am ehesten findet dies Anwendung, um Layout-Elemente auf bestimmten Pages anders darzustellen. So könnte man beispielsweise das Logo auf der Startseite etwas grösser machen oder den Body auf der Shop-Seite anders einfärben. Wie man das kombiniert ist Geschmacksache.

#Logo      { width:50px; height:50px; }
#Logo.Home { width:100px; height:100px; }
body       { background: white; }
body#Shop  { background: yellow; }

Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.