SelektorenBisher haben wir gesehen, wie wir Styles einbinden können, ein paar erste "Grundregeln" denen CSS folgt und wie wir Textfarbe mit color ändern können.
++ Nun möchten wir näher betrachten, wie man Selektoren benutzt um nur bestimmte Elemente zu stylen. +
++ Die "einfachste" Anwedung von styles geschieht durch die Tag-Selektoren. + Wir können einfach schreiben, welches Tag gestyled werden soll. Style-Regeln werden dabei in geschweiften Klammer platziert +
+
+ span {
+ color: hotpink;
+ }
+ Weitere gängige Werkzeuge für die Selektierung sind Klassen und ID's.
+Klassen-Namen werden in CSS mit einem Punkt (.) prefixed.
ID's werden mit einem Hashtag (#) prefixed.
+ span {
+ color: hotpink;
+ }
+ span.meine-klasse {
+ color: coral;
+ }
+ span#meine-id {
+ color: brown;
+ }
+ meine-klasse"
+ meine-id"
+ Nun ein paar weitere Regeln: Eine ID ist spezifischer als eine Klasse ist spezfischer als ein Tag-Selektor
+Es ist möglich, mehrere Klassen-Namen eines Elements zu selektieren:
+
+ span.eins {
+ color: blue;
+ }
+ span.eins.zwei {
+ color: green;
+ }
+ Weil das letzte span zwei "zutreffende" Klassen hat, hat dies mehr Gewicht (1 vs 2)
Zusätzlich ist nun der span-Selektor hinfällig: Da eine Klasse generell spezifischer wie ein Tag ist, wird der Tag-Selektor "überflüssig".
Dies trifft natürlich nicht in Situationen zu, in denen explizit ein bestimmtes Tag mit einer bestimmten Klasse gestyled werden soll.
+In der Regel wird aber vermehrt einfach nur mit einer Klasse gestyled (auch hier wieder für die wiederverwendbarkeit).
+Manchmal werden Klassen auch als Singulare "Modifikationen" auf Elemente "gepackt".
+
+ <span class="bold">Fetter Text</span>
+ <span class="font-blue">Blauer Text</span>
+ <span class="font-blue bold">Blauer, fetter Text</span>
+ Es ist auch möglich beliebige Attribute eines HTML-Tags zu selektieren und zum stylen zu verwenden
+
+
+ span[data-red] {
+ color: red;
+ }
+
+ span[data-color="red"] {
+ color: red;
+ }
+ Was ist besser? Jedes Element speziell an seine Bedürfnisse stylen? Jedes Element mit Klassen "vollpacken" um den gewünschten Style zu erhalten?
+Beide Wege sind valide und natürlich haben sich auch Systeme hierfür Entwickelt, die das ermöglichen. Trotzdem ist und bleibt die Entscheidung im Team bei den Entwicklern.
+Es gibt 3 Möglichkeiten CSS auf einer HTML-Seite zu verwenden:
+
+ Die meisten HTML-Elemente können mithilfe des style Attributes direkt gestyled werden.
+
+ Im Normalfall sollte von dieser Möglichkeit abgesehen werden, da inline-Styles eine höhere "Wichtigkeit" haben als andere Styling-Methoden und eine Suche nach einem Styling-Fehler sehr mühselig wird. +
+
+ <span style="color: red;">
+ Hier könnte Ihre Werbung stehen!
+ </span>
+ style-TagMithilfe des Style-Tag können mehrere Regeln auf einmal definiert werden, die Mithilfe von Selektoren bestimmte Elemente im HTML stylen
+
+ <style>
+ // Hier sind die selektoren sowie die dazugehörigen Styles zu finden!
+ </style>
+ Die wahrscheinlich üblichste Variante ist es, die Style-Deklarationen in einer gesonderten Datei zu definieren und diese im HTML einzubinden
+Fördert die "Portabilität" zwischen HTML-Dateien
+Alles an einem Platz
+Seperation of Concerns
+Die Einbindung von CSS in HTML-Dateien erfolgt mit dem link-Tag
+ <link rel="stylesheet" href="style.css">
+
+ Wie man seine Website schön macht (oder so ähnlich)
+CSS steht für Cascading Style Sheet.
+Im Grunde selektieren wir bestimmte tags innerhalb der Website anhand spezieller Regeln um diese daraufhin mit bestimmten Instruktionen visuell zu modifizieren.
+Im Regelfall werden Farben auf Vorder- sowie Hintergründe angewendet;
+Die Schriftart sowie weitere Attribute wie Schriftgröße, Fettdruck und mehr modifiziert;
+Weitere visuelle Effekte wie Schattierungen, Ränder und mehr verwendet;
+Zusätzlich bietet CSS auch die Möglichkeit, Abstände zwischen Elementen hinzuzufügen;
+Als auch Layouts im HTML zu implementieren;
+Weitere Features:
+Cascading bezieht sich auf die Funktionsweise von CSS selber
+Im Grunde lassen sich CSS-Regeln überschreiben. Dies Funktioniert im ersten Sinne von "Die letzte Regel gilt"
+
+ color: blue; // Textfarbe "blau" stellen
+ color: red; // Textfarbe "rot" stellen,
+ // dies überschreibt das blau aus der ersten Zeile
+ + Resultat: +
++ Hallo Welt! +
++ Um komplexere Anforderungen zu bewältigen, enthält CSS eine Reihe an weiteren "Regeln", die die "Spezifität" eines Selektors bestimmt. +
+