CSS/Einstieg in CSS

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Dieser Artikel dient als Einstieg in CSS. Mit Cascading Style Sheets (engl. für: mehrstufige Formatvorlagen) können Sie das Aussehen von Text und HTML-Elementen festlegen. Im Artikel Warum Layouts mit CSS? werden die Vorteile von zentralen Formatierungen mit Stylesheets erklärt.

Syntax[Bearbeiten]

Regelsatz und Deklaration[Bearbeiten]

In CSS sind Eigenschaften innerhalb von Regelsätzen (auch Regeln) organisiert. Ein Regelsatz besteht aus:

  • Einem Selektor oder einer Gruppe von Selektoren, gefolgt von
  • einem durch geschweifte Klammern begrenzten Bereich, in dem
  • eine oder mehrere Deklarationen stehen, in denen Eigenschaften ein Wert zugewiesen wird.

Eine Deklaration benötigt zwischen Eigenschaft und Wert einen Doppelpunkt und schließt mit einem Semikolon ab.

Beachten Sie: Die letzte Deklaration eines Regelsatzes benötigt genau genommen kein Semikolon. Wenn Sie den Regelsatz später aber erweitern, wird die folgende Deklaration ignoriert.
Beispiel: Regelsätze ansehen …
h1 { 
  color: red; 
}
h1, h2 { 
  background-color: #ccc;
  border-radius: 1em; 
}
Der erste Regelsatz besteht aus einem Selektor h1, dem als Deklaration die Eigenschaft color mit dem (Farb)-Wert rot zugewiesen wird.
Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, über die den Überschriften mit background-color eine Hintergrundfarbe und mit border-radius abgerundete Ecken zugewiesen werden. Hier werden mehrere Werte für Breite, Stil und Farbe durch Leerstellen voneinander getrennt.

Selektoren können HTML-Elemente, aber auch ganz spezielle Kombinationen sein. Sie werden im Abschnitt CSS/Selektoren ausführlich behandelt.

„shorthand“-Eigenschaften[Bearbeiten]

Werden einer Eigenschaft mehrere Werte zugewiesen, handelt es sich üblicherweise um eine so genannte „shorthand“-Eigenschaft. Dabei handelt es sich um Eigenschaften, die mehrere andere Eigenschaften zusammenfassen.

Beispiel: Deklarationen für „shorthand“-Eigenschaften ansehen …
h1 { 
  color: red; 
  font: 300% cursive;
}

h1, h2 { 
  background-color: #ccc;
  border-radius: 1em; 
  border: thin solid red;
}
Die Deklaration für die zusammenfassende Eigenschaft font hat einen Wert für die Schriftgröße und durch ein Leerzeichen getrennt einen für den Schrift-Stil (die Einzeleigenschaft font-style).
Der zweite Regelsatz enthält eine Deklaration für die zusammenfassende Eigenschaft border, die den Selektoren eine Randlinie zuweist. Hier werden mehrere Werte für Breite, Stil und Farbe durch Leerstellen voneinander getrennt.

Durch die Angabe einer „shorthand“-Eigenschaft wie z.B.

.btn {
  background: red;
}

setzen Sie aber nicht nur die Hintergrundfarbe, sondern implizit auch weitere Eigenschaften:

.btn {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: red;
}

Besonders bei Farbverläufen können solche Festlegungen dann zu unerwünschten Verhalten führen.[1]

Empfehlung: Setzen Sie CSS-Festlegungen so sparsam wie möglich.
Legen Sie im Zweifelsfall lieber Einzeleigenschaften anstelle der „shorthand“-Eigenschaften fest.

Mehrfaches Vorkommen einer Eigenschaft[Bearbeiten]

Der Browser arbeitet die verschiedenen Deklarationen des Stylesheets nacheinander ab. Wenn eine Eigenschaft mehrfach definiert wird, so gilt nur der zuletzt akzeptierte gültige Wert. Werden in einer Regel Eigenschaften aufgeführt, die das verarbeitende Programm nicht kennt, so wird diese Eigenschaft ignoriert. Das gilt auch für unbekannte oder ungültige Werte.

Beispiel
h1 { 
  color: red; 
  color: verygreen; 
  color: gren; 
}
In diesem Beispiel wird für ein Element die Schriftfarbe rot definiert. Die nachfolgenden Wertzuweisungen werden ignoriert, denn der Farbname „verygreen“ ist keine in CSS gültige Farbangabe und auch der Wert „gren“ (statt „green“) wird nicht akzeptiert.

Dieses System machte man sich bei herstellerspezifischen Eigenschaften zunutze, bei denen vor der eigentlichen Deklaration eine Deklaration mit einem vendor-prefix wie -webkit- notiert wurde. Wenn eine Eigenschaft in den Standard übernommen wurde, konnten die Browser dann die „normale“ Deklaration verwenden.

Empfehlung: Die in vielen Code-Beispielen im Internet noch verwendeten herstellerspezifischen Eigenschaften sind heute oft nicht mehr nötig.
Beispiel: mehrfache Angaben als Fallback für ältere Browser
body { 
  background: skyblue; 
  background: linear-gradient(white, skyblue); 
}
Dieses Beispiel enthält zwei Angaben für den Hintergrund. Zuerst wird in der zusammenfassenden Eigenschaft background der Wert für eine flächige Hintergrundfarbe festgelegt. Diese Deklaration wird durch die Festlegung eines Farbverlaufs überschrieben. Ältere Browser wie der IE9 (der mittlerweile aber auch fast ausgestorben ist), ignorieren die ihnen unbekannte Eigenschaft.

Kommentare[Bearbeiten]

Um die Übersicht zu behalten oder bestimmte Regelsätze zu erläutern, ist es möglich, innerhalb von Stylesheets Kommentare zu verfassen, die vom Browser bei der Anzeige des Dokuments ignoriert werden. Ein Kommentar beginnt mit den Zeichen /* und endet mit dem ersten Auftreten der Zeichen */. Das bedeutet, dass Kommentare nicht ineinander verschachtelt werden können.

Beispiel
/* Dies ist ein Kommentar. Er besitzt keine Auswirkungen. */ /* Verschachtelte /* Kommentare sind */ nicht möglich */
Kommentare dürfen sich über mehrere Zeilen erstrecken. Jedoch ist es nicht möglich, Kommentare zu verschachteln.
Beachten Sie: Die aus vielen Programmiersprachen bekannten einzeiligen Kommentare gibt es in CSS nicht.

Stylesheets einbinden[Bearbeiten]

Es gibt mehrere Möglichkeiten, Formatfestlegungen mit CSS in HTML-Dokumenten einzubinden.

Formate direkt in einem style-Attribut festlegen[Bearbeiten]

Mit dem Universalattribut style können Sie Eigenschaften einem Element direkt zuweisen. Dabei sind nur Deklarationen, also Eigenschaft-Wert-Zuweisungen möglich.

Beispiel: Formate direkt festlegen ansehen …
<p style="text-align: center; color: green;">
  Dieser Absatz wird über ein style-Attribut formatiert. 
</p>
Dieses Beispiel zeigt, wie einem p-Element per style-Attribut verschiedene Formate zugewiesen werden können. Diese Festlegung gilt aber nicht für weitere Textabsätze.
Beachten Sie: Durch das direkte Festlegen von Formaten, umgangsprachlich auch „Inline-Style“ genannt, gehen viele Vorteile verloren. Der Wartungsaufwand steigt während sich die Flexibilität verringert. Inline-Styles sind an ein Element gebunden und können nicht an zentraler Stelle bearbeitet werden.

Formate zentral in einem style-Element festlegen[Bearbeiten]

Das HTML-Element style erlaubt es, Formate zentral im head des HTML-Dokuments festzulegen.

Beispiel ansehen …
<!doctype html>
<html lang="de">
  <head>
    <style>
    h1 { 
       background-color: green;
       color: white;
    }
    p {
    	text-align: center; 
    	color: green;
    }
    </style>
  </head>
In diesem Beispiel wird das Format für das Überschriftenelement h1 und alle Textabsätze des Dokuments innerhalb eines style-Elements festgelegt. Das style-Element ist ein Kindelement des head-Elements.

Einbinden einer externen Datei[Bearbeiten]

Im Normalfall besteht eine Webpräsenz aus mehreren (oft hunderten) von Seiten, die alle gleich formatiert werden sollen. Hier hat es sich durchgesetzt, das CSS in einem eigenen externen Stylesheet mit der Endung .css abzuspeichern und mit dem HTML-Element link direkt im head einzubinden.

Beispiel: Einbinden eines externen Stylesheets
<!doctype html>
<html lang="de">
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    ...
Das link-Element ist ein Kindelement des head-Elements.

Folgende Attribute gibt es:

  • rel definiert den logischen Beziehungstyp des Elements. „stylesheet“ bedeutet, dass ein Stylesheet eingebunden werden soll.
  • href: referenziert die einzubindende Stylesheetdatei.

Diese beiden Attribute sind erforderlich und ausreichend um ein Stylesheet einzubinden. Das link-Element kann aber noch weitere Attribute besitzen, die auf Stylesheets eine Wirkung haben.

  • type: enthält den Medientyp der einzubindenden Datei, für CSS also „text/css“. Da dies in HTML der Standard Typ ist, kann es weggelassen werden.
  • media: kann festlegen, dass ein Stylesheet nur dann verarbeitet werden soll, wenn das Dokument von einem bestimmten Ausgabemedium ausgegeben wird. Als Attributwert ist eine Medienabfrage erlaubt, beispielsweise screen für Bildschirme oder print für Drucker (siehe: medienspezifische Stylesheets). Ist das Attribut nicht definiert, gilt der Standardwert all. Das Stylesheet wird dann unabhängig vom verwendeten Ausgabemedium verarbeitet.
  • title: Werden mehrere Stylesheets eingebunden, die einen Titel besitzen, werden alternative Stylesheets definiert.

Sie können für jede Internetseite beliebig viele Stylesheets einbinden. Beachten Sie dabei jedoch sowohl die Regeln zur Reihenfolge der Abarbeitung von CSS-Deklarationen als auch die Hinweise zur Performanceoptimierung.

Empfehlung: CSS erlaubt es, erlauben es, mit Medienabfragen (Media Queries) für Ausgabemedien mit bestimmten Eigenschaften, etwa Tablets, Smartphones aber auch Drucker abweichende Darstellungen festzulegen. Passen Sie Ihr Layout flexibel an.

typische Fehlerquellen[Bearbeiten]

Wenn es zu Problemen in der Darstellung kommt, sind die Ursache häufig Flüchtigkeitsfehler in der Syntax oder logische Fehler.

Gleichheitszeichen bei Wertzuweisungen[Bearbeiten]

Ein beliebter Fehler ist beispielsweise, bei der Wertzuweisung an eine CSS-Eigenschaft anstelle des Doppelpunktes ein Gleichheitszeichen zu notieren.

Beispiel: Wertzuweisung mit Gleichheitszeichen ansehen …
h1 { color=red;} h2 { color:red;}
h2 wird rot dargestellt, wegen des Gleichheitszeichens wird der Wert für h1 ignoriert und h1 schwarz dargestellt.

vergessene Strichpunkte ( ; )[Bearbeiten]

Auch vergessene Strichpunkte ( ; ) führen zu Fehlinterpretationen:

Beispiel: Wertzuweisung nicht geschlossen ansehen …
h1 { color:red background-color:yellow;} h2 { color:red; background-color:yellow;}
Da die 1. Wertzuweisung für h1 nicht geschlossen worden ist, ignoriert der Browser beide Wertzuweisungen.

Regelsatz mit zwei geschweiften Klammern geschlossen[Bearbeiten]

Beispiel: Regelblock doppelt geschlossen ansehen …
h1 {
 color: red; 
 background-color: yellow;  

}}

h2 {

  color: red; 
background-color: yellow;
}
Die überzählige schließende Klammer wird schon dem Selektor für den nächsten Regelblock zugeordnet. Nun ist } h2 aber kein gültiger Selektor, also wird der gesamte Block ignoriert.

Da die Browser bei Syntaxfehlern in CSS keine Fehlermeldungen erzeugen, bleiben solche Fehler häufig unentdeckt und machen sich nur in Form von Fehlinterpretationen bemerkbar. Überprüfen Sie deshalb stets genau die Syntax Ihrer CSS-Formatdefinitionen.

Empfehlung: Sie können Ihre CSS-Formatdefinitionen auch durch einen Validator auf korrekte Syntax überprüfen lassen.

Groß- und Kleinschreibung bei Selektoren[Bearbeiten]

CSS berücksichtigt die Groß- und Kleinschreibung eigentlich nicht, so dass Sie die Elementnamen wie p für Textabsätze auch als P notieren könnten. Eine Ausnahme gilt allerdings bei Klassennamen und IDs in den Selektoren, weshalb die jeweiligen Attributwerte im HTML-Markup passend notiert sein müssen:

Beispiel: Groß- und Kleinschreibung bei Selektoren ansehen …
DIV { border: 3px solid blue; border-radius: 1em; padding: 0 1em; } #navigation { background: lightgreen; } .wichtig { color: red; font-weight: bold; }
<body> <div id="Navigation"> <p class="wichtig">Zur Zeit ist die Navigation kaputt.</p> </div> </body>
Der Selektor #navigation passt nicht zum id-Attributwert "Navigation", daher formatiert der Browser das Element <div id="Navigation"> nicht mit dem hellgrünen Hintergrund, DIV als Selektor wird dagegen angewendet.
Empfehlung: Verwenden Sie für …
  • HTML-Markup wie Tags und Attribute
  • CSS-Selektoren
  • und auch referenzierten Ordner- und Mediennamen
… immer eine konsequente Kleinschreibung. So beugen Sie potentiellen Fehlern vor.

Leerzeichen[Bearbeiten]

Beispiel: Leerzeichen können semantische Bedeutun habeng ansehen …
h1 p {
 color: red;

} h1, p {

 background: #ccc;
 border: 1px solid;
}
Überschriften und Absätze sollen rot gefärbt werden.
Allerdings wird nur der Absatz innerhalb von h1 rot gefärbt. Der zweite Regelsatz fasst alle h1- und p-Elemente zusammen und gibt ihnen einen grauen Hintergrund und ein roten Rand.
Beachten Sie: Leerzeichen (oder allgemein Whitespace-Zeichen) innerhalb eines Selektors haben semantische Bedeutung, sie entsprechen dem Kombinator Nachfahrenselektor.

Auch innerhalb von Wertzuweisungen können Leerzeichen zu ungültigen Werten führen:

Beispiel: Leerzeichen führen zu ungültigen Werten ansehen …
/* fehlerhafter Code */

.medaille { color: # 000; background-color: rgb (255, 204, 0); font-size: 50 px; margin: 1em auto; padding: 1em; width: 1em; height: 1em; text-align: center; border: 1px solid; border-radius: 50%;

}
Entferne 3 Leerzeichen im CSS und verdiene dir die Goldmedaille!
(In diesem Beispiel wird ein Element nicht angezeigt. Korrigiere das CSS!)

→ Auflösung

guter CSS-Stil[Bearbeiten]

In diesem Abschnitt wird erklärt, wie Sie Ihre CSS-Festlegungen nach den Regeln der "best practice" so organisieren und notieren können, dass sie später von Ihnen und anderen leichter verstanden und auch aktualisiert werden können.

Formatierung[Bearbeiten]

Die grundsätzliche Formatierung ist bei CSS weitgehend frei, man kann also zwischen den einzelnen Bestandteilen Selektor, geschweiften Klammern, Eigenschaften, Doppelpunkt, Werten und Semikola beliebig Leerzeichen, Tabulatorzeichen und Zeilenumbrüche einfügen, z.B. um das Stylesheet übersichtlicher zu gestalten. So sind die zwei folgenden – inhaltlich identischen – Definitionen beide erlaubt:

Beispiel: Formatierung von CSS-Festlegungen
h1{font-size:2.5em;margin-left: 2em;text-align:center;border-bottom:2px solid red; margin-right:2em;}
Der Regelsatz ist platzsparend innerhalb einer Zeile notiert; dies geht allerdings auf Kosten der Lesbarkeit.
h1 {
  font-size:   2.5em;
  border-bottom: 2px solid red;
  text-align: center;
  margin: 0 2em;
}
Dieser Regelsatz wirkt viel übersichtlicher:
  • Der Selektor ist gleich erkennbar
  • Deklarationen sind eingerückt
  • Eigenschaft und Wertzuweisung sind durch ein zusätzliches Leerzeichen getrennt.
  • die beiden Deklarationen margin-left und margin-right wurden zu margin zusammengefasst.
Er erscheint zwar länger, moderne Code-Editoren können solche Regelsätze mittels Code-Folding jedoch ein- und ausklappen.
Beispiel: Selektor-Listen
a.backlink:hover, 
a.backling:focus {
  color: purple;
  background: #fffbf0 url("data:image/svg+xml,...) no-repeat right;
} 
}
Hier werden im zweiten Regelsatz mehrere Selektoren in einer durch komma separierten Selektor-Liste angesprochen.
Der Regelsatz wird lesbarer, wenn die einzelnen Selektoren untereinander dargestellt werden.

Was ist eine gute Reihenfolge für die Deklarationen?

Ein Vorschlag könnte lauten: Zuerst display und float, dann weitere Blockeigenschaften, dann border-Eigenschaften, dann color- und background-Eigenschaften.

Die Deklarationen werden im Seiteninspektor in der festgelegten Reihenfolge aufgeführt, was auch zum Debuggen praktischer ist.

Organisation[Bearbeiten]

In der Frage, wie man CSS-Styles am besten organisiert, herrscht darin Einigkeit, dass

  • das Einbinden von CSS-Dateien den Notationen in style-Elementen oder gar style-Attributen vorzuziehen ist. CSS-Dateien erzeugen zwar einmalig einen zusätzlichen Request pro Datei. Da sie aber in der Regel gecached oder von Bots gar nicht erst angefordert werden, erzeugen sie deutlich weniger Datentransfer.

Auch wenn im oben erwähnten Kapitel die Einbindung eines eigenen Print-Stylesheets vorgestellt wird, ist es empfehlenswert, in Ihrem Stylesheet zuerst grundsätzliche Festlegungen und dann mit Medienabfrage weitere Festlegungen …

  • für Print
  • für größere Viewports

zu treffen.

Normalisierung[Bearbeiten]

Browser wenden ihr eigenes Browser-Stylesheet an, bevor sie das Autoren-CSS anwenden. Die Defaultregeln können aber von Browser zu Browser abweichen.

Beispielsweise wird die Einrückung von Listen durch die Browser unterschiedlich gehandhabt. Die einen realisieren dies über Innenabstände des ul- bzw. ol-Elementes, die anderen über Außenabstände der li. Deshalb ist die Normalisierung vor allem für folgende Elemente verbreitet: ul, ol, li, dl, dt, dd.

Beispiel
ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}

li {
  display: list-item; 
  margin-left: 2em;
}
Empfehlung: Vermeiden Sie weitreichende Normalisierungen, alle Default-Einstellungen sind sinnvoll und die meisten sind browserübergreifend sehr ähnlich.

Magic Numbers[Bearbeiten]

Mit festen Zahlenwerten (auch engl. „Magic Numbers“ genannt) erreichen Sie unter bestimmten Umständen das Gewünschte, aber in anderen Kontexten wie geänderten Viewport- oder Schriftgrößen wird das Layout zerstört. Meistens wurden sie von Entwicklern verwendet, die nur in ihrem eigenen Browser unter Idealbedingungen getestet wurden.

Empfehlung: Verwenden Sie
  • keine festen Werte für die Breite
  • keine festen Werte für die Höhe eines Elements, sondern lassen dem Inhalt (auch bei geänderter Schriftgröße) den nötigen Platz. Regeln Sie Abstände über padding.
  • relative relative Längenmaße wie em, die sich an geänderte Schriftgrößen anpassen.

Siehe auch[Bearbeiten]


Quellen[Bearbeiten]

  1. csswizardry.com: CSS Shorthand Syntax Considered an Anti-Pattern