At-Charset

Mit der Anweisung @charset können wir einen Zeichensatz für die .css-Datei festlegen. Diese ist dann von nützen, wenn wir Eigenschaften wie content haben. Diese nehmen einen Zeichenstring auf, welcher einer bestimmten Kodierung folgen muss:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <div></div> </body> </html>
@charset "utf-8"; div:after { content: "\2192"; /* Unicodezeichen für "Pfeil Rechts" */ }

Wenn die Zeichenkodierung nicht festgelegt ist, versucht der Browser folgende Reihenfolge zur Bestimmung:

  1. Der Browser prüft den Wert des Unicode Bytereihenfolge Zeichens (BOM), das am Anfang der Datei gesetzt ist.
  2. Der Browser prüft das charset="" Attribut des <meta http-equiv="Content-Type"> Elements oder das Äquivalent hierzu im Protokoll, das verwendet wird, um das Stylesheet zu übertragen.
  3. Der Browser prüft die @charset-Regel im CSS-Dokument.
  4. Der Browser prüft die Zeichenkodierung des referenzierenden HTML-Dokuments. Diese Prüfung wurde für HTML5 weggelassen.
  5. Der Browser nimmt an, dass es sich um eine utf-8 Zeichenkodierung handelt.

Kommentare

Kommentare werden vom Browser bei der Anzeige der Webseite ignoriert. Damit sind sie bestens für Erklärungen und Hinweise im Code geeignet. Dabei sollten wir bedenken, dass wir oftmals nicht die einzigen sind, die den Code lesen. Arbeitet man im Team, sind Kommentare beinahe unabdinglich.

Ein Kommentar wird mit einem Schrägstrich und einem Stern /* eingeleitet und in umgekehrter Reihenfolge beendet */. Weiterhin können Kommentare über mehrere Zeilen gehen oder auch innerhalb von Anweisungen stehen:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1>Eine rote Überschrift</h1> </body> </html>
/* Für die Überschriftarten h1, h2 und h3 wird eine rote Schriftfarbe definiert */ h1, h2, h3 { color: red; /* Rot = #FF0000 */ } /* Regeln in Kommentaren werden ebenfalls ignoriert: h1{ color: blue; } */

Aufbau von CSS-Regeln

Eine CSS-Regel besteht immer aus einem oder mehreren verschiedenen Selektoren, dem dazugehörigen Deklarationsblock und seine Eigenschaften. Ist diese Kombination nicht vollständig, wird die Regel als ungültig validiert.

Mehrere Selektoren angeben

Vorab sollte erwähnt werden, dass alle nun folgenden Regeln für den Aufbau eines einzigen Selektors dienen. Ein ganz entscheidender Vorteil von CSS besteht jedoch darin, dass wir für eine Regel mehrere Selektoren angeben können:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1>Eine rote Überschrift</h1> <h2>Eine rote Überschrift</h2> <h3>Eine rote Überschrift</h3> <h4>Eine rote Überschrift</h4> <h5>Eine rote Überschrift</h5> <h6>Eine rote Überschrift</h6> </body> </html>
h1, h2, h3, h4, h5, h6 { color: red; }

Im obigen Beispiel wurde 6 Einfachselektoren mithilfe des Kommas aufgelistet. Die Regel color:red; gilt nun für die Elemente <h1></h1> bis <h6></h6>. Damit haben wir Platz gespart und nebenbei den Effekt erzielt, dass der Code wesentlich übersichtlicher ist. Selbstverständlich funktioniert dieses Prinzip auch mit komplizierteren Selektorarten:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <div> <h1 class="rot">Eine schwarze Überschrift</h1> <h1 class="rot">Eine rote Überschrift</h1> </div> <div> <span id="test">Mit der Maus hierüber fahren um <span class="test2"></span> </span> </div> </body> </html>
*:first-child+.rot, div > #test:hover .test2:after { content: "diesen Text anzuzeigen."; color: red; }

Selektoren

Als Selektor kann man den gesamten Inhalt vor den geschweiften Klammern bezeichnen. Wie der Name es bereits vermuten lässt, ist dieses Sprachkonstrukt dafür da, um genau die Elemente zu selektieren, die wir mit Eigenschaften belegen wollen. Es gibt fünf Arten von Selektoren:

SelektornameBeispiel
Universalselektoren*
Typselektorenelement
Klassenselektoren.klasse
ID-Selektoren#id
Attributselektor[attribut]

[attribut = wert]
[attribut ~= wert]
[attribut |= wert]

[attribut ^= wert], [attribut $= wert], [attribut*= wert]

Mit dem Universalselektor können wir alle Elemente gleichzeitig mit Eigenschaften bestücken. Dieser Selektor kommt häufig zum Einsatz, wenn wir Grundregeln für ein Layout festlegen möchten, wie beispielsweise einen Außenabstand (margin) und Innenabstand (padding) von 0px:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1>Überschrift "H1" ohne Außen- und Innenabstand.</h1> <h3>Überschrift "H3" ohne Außen- und Innenabstand.</h3> <p>Paragraf ohne Außen- und Innenabstand.</p> </body> </html>
* { margin: 0px; padding: 0px; }

Der Typselektor sollte aus dem Namen des Elements bestehen. Somit trifft dieser Selektor auf alle Elemente im HTML-DOM zu, die diesen Namen haben, selbst wenn diese id="", class="" oder andere Attribute tragen.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p>Text mit roter Farbe.</p> <p id="id-name">Text mit roter Farbe.</p> <p class="klassenname">Text mit roter Farbe.</p> </body> </html>
p { color: red; }

Wenn wir Eigenschaften für mehrere Elemente gebrauchen können, sollten wir Klassen definieren. Dafür gibt es den Klassenselektor. Dieser wird mit einem Punkt (.) eingeleitet und von dem Klassennamen beendet. Jedes Element, das nun das Attribut class="" mit diesem Wert beinhaltet, trägt jetzt die Eigenschaften, die wir für diese Klasse definiert haben. Im folgenden Beispiel ist der Klassenname "MitRoterFarbe".

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p>Text ohne roter Farbe.</p> <p id="id-name">Text ohne rote Farbe.</p> <p class="MitRoterFarbe">Text mit roter Farbe.</p> <a class="MitRoterFarbe">Link mit roter Farbe.</a> </body> </html>
.MitRoterFarbe { color: red; }

Mit dem ID-Selektor können wir auf ein Element mit genau dieser ID zugreifen. Die heutigen Parser akzeptieren zwar mehrere IDs in einem Dokument, doch die Regel lautet, das eine ID nur einmal pro Dokument vorkommen darf, denn damit soll man ein Element eindeutig bestimmen können.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p>Text ohne roter Farbe.</p> <p id="MitRoterFarbe">Text mit roter Farbe.</p> <p class="MitRoterFarbe">Text ohne roter Farbe.</p> </body> </html>
#MitRoterFarbe { color: red; }

Möchten wir ein Element anhand seiner Attribute stylen, so können wir das mit dem Attributselektor. Dafür stehen uns eine Menge an Variationen zur Verfügung. Die einfachste von Ihnen wäre zu prüfen, ob ein Element das gesuchte Attribut überhaupt hat:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p id="">Text ohne roter Farbe.</p> <p bestimmtesAttribut="">Text mit roter Farbe.</p> <p class="">Text ohne roter Farbe.</p> </body> </html>
p[bestimmtesAttribut] { color: red; }

Dann können wir dieses Attribut auch noch auf einen Wert prüfen:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p bestimmtesAttribut="">Text ohne roter Farbe.</p> <p bestimmtesAttribut="rot">Text mit roter Farbe.</p> <p bestimmtesAttribut="blau">Text ohne roter Farbe.</p> </body> </html>
p[bestimmtesAttribut = rot] { color: red; }

Mit der nächsten Variation suchen wir einen Wert, der durch Leerzeichen von anderen abgetrennt ist. Dafür benötigen wir die Tilde ~ vor dem Gleichheitszeichen.

In folgendem Beispiel ist der Wert "roter" in dem Attribut title="" enthalten, also bekommt dieses Element auch die rote Farbe.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p title="Ein normaler Text.">Text ohne roter Farbe.</p> <p title="Ein roter Text.">Text mit roter Farbe.</p> <p title="Ein blauer Text.">Text ohne roter Farbe.</p> </body> </html>
p[title ~= roter] { color: red; }

Als nächstes können wir den Anfang eines Attributs prüfen, welcher mit einem Bindestrich abgetrennt sein kann. Dafür benötigen wir den Senkrechten Strich | vor dem Gleichheitszeichen.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p sprache="de">Text mit roter Farbe.</p> <p sprache="de de">Text ohne roter Farbe.</p> <p sprache="de-at">Text mit roter Farbe.</p> <p sprache="en-us">Text ohne roter Farbe.</p> </body> </html>
p[sprache |= de] { color: red; }

Kombinatoren

Wenn uns Selektoren nicht für eine genaue Übereinstimmung ausreichen, können wir zu Kombinatoren greifen. Hier ist der Name ebenfalls ausschlaggebend für den Sinn dahinter. Wir können mehrere Selektoren miteinander verknüpfen. Dafür stehen uns vier Kombinatorarten zur Verfügung:

KombinatornameBeispiel
Kindkombinatorselektor > selektor
Nachfahrenkombinatorselektor selektor
Nachbarkombinatorselektor + selektor
Geschwisterkombinatorselektor ~ selektor

Mit dem Kindkombinator können wir ein Element selektieren, dass ein Kindelement (also in einem anderen Element steht) vom zuerst genannten Selektor darstellt:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p>Text mit <em>roter</em> <span><em>Farbe</em></span>.</p> </body> </html>
p > em { color: red; }

Im obigen Beispiel ist lediglich das Wort "roter" auch tatsächlich rot, da es vom Element <em></em> umschlossen ist und dieses ein Kindelement von <p></p> darstellt. Das Wort "Farbe" wird zwar auch von einem <em></em> umschlossen. Dieses befindet sich allerdings in einem <span></span> und ist somit dessen Kindelement. <span></span> wiederum ist ein weiteres Kindelement von <p></p>, da es auf der direkt nachfolgenden Ebene liegt.

Wollen wir alle <em></em> Elemente eines Elternelements ansprechen, so nennen wir diese "Nachfahre". Somit kommen wir zum Nachfahrenkombinator, welcher alle direkten Nachfahren eines Elements selektiert:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p>Text mit <em>roter</em> <span><em>Farbe</em></span>.</p> </body> </html>
p em { color: red; }

In diesem Beispiel haben wir die beiden Einfachselektoren p und em bloß mit einem Leerzeichen kombiniert und erreichen damit, dass auch das Wort "Farbe" nun rot ist. Hierbei ist nun egal, in welcher Ebene sich das Element <em></em> befindet, da es immer ein Nachfahre von <p></p> bleiben wird.

Der Nachbarkombinator ist für direkte Nachbarn von Elementen geeignet und wird mit einem Pluszeichen angewendet:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p>Text ohne roter Farbe.</p> <em>Text mit roter Farbe.</em><br><br> <em>Text ohne roter Farbe.</em><br><br> <em>Text ohne roter Farbe.</em> </body> </html>
p + em { color: red; }

Das obige Beispiel zeigt, was in CSS unter "Nachbar" verstanden wird, denn es wird lediglich das erste <em></em> Elemente mit der Eigenschaft belegt. Dieses befindet sich nämlich auf der gleichen Ebene, wie <p></p> und ist im HTML-DOM das direkt nachfolgende Element. Die zweiten und dritten <em></em> Elemente sind dies nicht und folglich auch keine Nachbarelemente.

Der Geschwisterkombinator wählt alle Folgeelemente aus, die sich auf der gleichen Ebene, wie das Ausgangselement befinden und wird mit der Tilde (~) angewendet:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p>Text ohne roter Farbe.</p> <em>Text mit roter Farbe.</em> <hr> <em>Text mit roter Farbe.</em><br><br> <em>Text mit roter Farbe.</em> </body> </html>
p ~ em { color: red; }

Im Beispiel werden alle <em></em> Elemente mit der Eigenschaft belegt, da sie sich alle auf derselben Ebene wie das <em></em> Element befinden und im HTML-DOM auf dieses folgen. Dabei spielt es keine Rolle, ob ein anderes Element sich dazwischen befindet.

Pseudoelemente

Ein Pseudoelement erzeugt einen Abschnitt der mit CSS formatiert werden kann, jedoch nicht im HTML-DOM vorhanden ist. In CSS2 wurden Pseudoelement mit einem Doppelpunkt : eingeleitet. Im heutigen Standard CSS3 werden Pseudoelemente mit zwei Doppelpunkten :: eingeleitet, damit man sie von den Pseudoklassen (weiterhin mit einem Doppelpunkt) unterscheiden kann.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <p>Es war einmal, <br>Ein warmer Sommerabend auf der alten Holzveranda. <br>Ein laues Lüftchen wehte gerade vorbei, als...</p> </body> </html>
@charset "utf-8"; p::first-letter { background-color: #FF5555; color: #FFF; float: left; font-size: 45px; margin-right: 10px; margin-top: 0; padding: 18px; border-radius: 5px; box-shadow: 0 0 20px -2px #999; }

Pseudoklassen

Ähnlich wie Pseudoelemente werden Pseudoklassen mit einem Doppelpunkt : eingeleitet. Dennoch haben sie einen entscheidenden Unterschied: Mit Pseudoklassen können wir Elemente mit bestimmten Merkmalen stylen. Eines der bekanntesten Merkmale, die ein Element annehmen kann, ist das "hover"-Merkmal. Dieses bekommt ein Element, sobald man mit dem Mauszeiger darüber fährt.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <a href="#">Ich werde rot.</a> </body> </html>
@charset "utf-8"; a:hover { color: red; }

Deklarationsblock

Als Deklarationsblock bezeichnet man die Gesamtheit der Eigenschaften, d.h. Alles, was in den geschweiften Klammern steht:

  • PseudoCode
element { Deklarationsblock }

Die geschweiften Klammern können auch in einer Zeile stehen, da sämtliche Whitespaces weggeschnitten werden.

element { Deklarationsblock }

Eigenschaften und Werte

Als Eigenschaften bezeichnet man in CSS Schlüsselwörter, die für den Browser eine vorgegebene Bedeutung für die Anzeige von Elementen haben. Beispielsweise gibt die Eigenschaft color die Schriftfarbe von Texten an. Welche Farbe nun die Schrift haben soll, geben wir mit dem Wert an. Dieser variiert je nach Eigenschaft und wird mit einem Doppelpunkt : von der Eigenschaft getrennt. Das Semikolon beendet die Initialisierung einer Eigenschaft.

  • PseudoCode
element { eigenschaft : wert; }

Browser-Präfixe

Da CSS eine sich immer weiterentwickelnde Sprache darstellt, stehen Browserhersteller vor einem großen Problem: Sie müssen zukünftige Eigenschaften implementieren, ohne dass ihr Konzept zusammenbricht, wenn ein neuer Standard von CSS verabschiedet wird. Aus diesem Grund setzen sie gerne einen Präfix vor zukunftsträchtige Eigenschaften:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <div></div> </body> </html>
@charset "utf-8"; div { width: 200px; height: 200px; background: red; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

Das obige Beispiel zeigt die Implementierung der Eigenschaft border-radius. Noch bevor diese Eigenschaft zum Standard wurde, unterstützten viele Browser sie. Damit es nicht zu Problemen mit den Anforderungen des baldigen Standards geben würde, setzten die Entwickler Präfixe davor. Im Folgenden steht eine Tabelle der Browser und ihrer zugehörigen Präfixe:

BrowserPräfix
Chrome

Neuere Opera-Versionen
-webkit-
Firefox-moz-
Ältere Opera-Versionen-o-
Internet Explorer-ms-