CSS/Tutorials/Einstieg/Syntax

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Einstieg(Weitergeleitet von Zusammenfassende Eigenschaft)
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Einstieg in CSS


Ist CSS eigentlich eine Programmiersprache?

Eigentlich nein, da es „nur“ eine Auszeichnungs- oder Formatsprache für HTML und SVG ist. Andererseits lassen sich mit ihr auch kompliziertere Wenn-Dann-Bedingungen und sogar Schleifen realisieren.[1]

Nichtsdestotrotz hat CSS eine eigene Syntax, ein festes Regelsystem wie etwas notiert werden soll.

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 Liste 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. Zwischen zwei Deklarationen steht ein Semikolon.

Die Werte, die man zuweisen kann, sind sehr unterschiedlicher Art. Es gibt Eigenschaften, die einen einzelnen Wert erhalten können, und Sammeleigenschaften (shorthand), denen man eine Liste von Werten gibt, die dann auf bestimmte andere Eigenschaften verteilt werden. Werte können Zahlen sein, Längenangaben, Zeichenketten oder unterschiedlichste Schlüsselbegriffe. Das wird bei den Beschreibungen der Eigenschaften im Detail erklärt.

CSS-Regelsatz.svg

Beachten Sie: Genau genommen benötigt die letzte Deklaration eines Regelsatzes kein Semikolon. Sie sollten es aber trotzdem setzen. Wenn Sie den Regelsatz später erweitern und das Semikolon vergessen, entsteht ein Syntaxfehler, der beide Deklarationen unwirksam macht.
Regelsätze ansehen …
h1 {
  color: red;
}
h1, h2 {
  background-color: #eee;
  border-radius: .5em;
}

Information: Farben

Sie können Farbwerte entweder mit Farbnamen (hier: red) oder mit Zahlenwerten angeben.
Üblich ist die Angabe eines hex-Werts nach dem RGB-Modell mit einer # und je 3x2 Ziffern (0-9 und a-f). Wenn die Werte gleich sind, können sie in einer Kurzschreibweise auf drei Ziffern (hier: #eee) verkürzt werden.

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.

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. Die Werte für die Einzeleigenschaften werden dabei durch Leerzeichen voneinander getrennt.

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

h1, h2 {
  background-color: #eee;
  border-radius: .5em;
  border: thin solid red;
}

Die Deklaration für die zusammenfassende Eigenschaft font hat einen Wert für die Schriftgröße (font-size) 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 (border-width), Stil (border-style) und Farbe (border-color) durch Leerzeichen 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ünschtem Verhalten führen.[2]

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.
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 mittlerweile ausgestorbene IE9 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.

Guter CSS-Stil[Bearbeiten]

In diesem Abschnitt werden best practices vorgestellt, die ihre Stylesheets übersichtlicher machen und helfen, Fehler zu vermeiden.

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:

einzeilige Formatierung von CSS-Festlegungen
h1{font-size:2.5em;margin-left: 2em;text-align:center;border-bottom:medium solid red; margin-right:2em;}

Der Regelsatz ist platzsparend innerhalb einer Zeile notiert; dies geht allerdings auf Kosten der Lesbarkeit.

mehrzeilige Formatierung von CSS-Festlegungen
h1 {
  font-size: 2.5em;
  border-bottom: medium 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.


Selektor-Listen
a.backlink:hover, 
a.backlink: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.

Empfehlung:
  • Zwischen zwei Regelsätzen sollte eine Leerzeile stehen.
  • Ein Umbruch sollte
    1. nach der öffnenden geschweiften Klammer,
    2. hinter jedem Semikolon
    3. und bei Selektor-Listen (mehrere durch Komma getrennten Selektoren)
      erfolgen.
  • Nach dem Doppelpunkt zwischen Eigenschaft und Wert sollte ein Leerzeichen gesetzt werden.

Organisation[Bearbeiten]

Was ist eine gute Reihenfolge für die Deklarationen?

Ein Vorschlag könnte lauten:

  1. Schrift
  2. Positionierung
  3. Display
  4. Box-Modell
  5. Farben, Hintergründe und weiteres Styling

Die Deklarationen werden im Seiteninspektor in der festgelegten Reihenfolge aufgeführt, was auch zum Debuggen praktischer ist. Dabei ist anzumerken, dass bei modernen Mobile First-Layouts oft keine Positionierung mehr nötig ist.

In diesem Stylesheet sollten zuerst grundsätzliche Festlegungen wie eine Farbpalette

[3]


und dann mit Medienabfrage weitere Festlegungen …

Zwischenfazit[Bearbeiten]

Information: Exkurs: Magic Numbers

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.

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 empfehlen manche Webdesigner eine Normalisierung, bei der die CSS-Einstellungen der Browser, vor allem Abstände, Rahmen oder Schrifteinstellungen, zurückgesetzt und somit vereinheitlicht werden. Sie ist 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-Angaben sind sinnvoll und die meisten sind browserübergreifend sehr ähnlich.

Css-resets by eliah manor.png Quelle: https://elijahmanor.com/blog/css-resets

Siehe auch:

Vorlagen und Frameworks[Bearbeiten]

Grundsätzlich sollte man vermeiden, mit jedem Projekt wieder bei null anzufangen. Vieles benötigt man in jedem Projekt. Das beginnt bei so profanen Dingen wie Ordnern für Bilder oder CSS, geht über das HTML-Grundgerüst und die Verknüpfung der HTML-Datei mit einer Formatvorlage und kann je nach Arbeitsumgebung bis hin zu Serverkonfigurationen per htaccess, der Einbindung von JavaScript-Bibliotheken und ganzen Frameworks gehen.

Um das alles nicht bei jedem Projekt neu anlegen zu müssen, arbeiten viele Entwickler mit selbst erstellten Vorlagen, die sie für neue Projekte nutzen.

Es gibt aber auch Projekte im Web, die solche Vorlagen kostenlos bereitstellen. Das wohl bekannteste ist die HTML5-Boilerplate von Paul Irish. Der Gedanke hinter so einer Boilerplate (englisch für Kochplatte) ist es, nicht jedesmal einen Herd bauen zu müssen, wenn man sich ein Spiegelei braten möchte.

Die HTML5-Boilerplate bringt all die genannten Dinge mit. Darüberhinaus sind sinnvolle und meist nötige CSS-Styles bereits in der Datei main.css vorhanden, die leicht an eigene Bedürfnisse angepasst werden können.

Für Anfänger lohnt sich ein Blick auf die Boilerplate auch weil man daran eine typische und sinnvolle Struktur nachvollziehen kann.

CSS-Frameworks[Bearbeiten]

Noch weiter gehen CSS-Frameworks zu deren bekanntesten Vertretern Bootstrap, Skeleton und Foundation zählen. Diese bringen fertige Styles für die meisten Komponenten einer Webseite mit. Dazu gehören auch komplexere Konstrukte wie Menüs, Slider oder Tabs (Karteikartenreiter). Alles responsiv und sofort nutzbar. Insbesondere bei Bootstrap sind zudem gute Grundlagen für die Entwicklung zugänglicher Webseiten vorhanden.

Empfehlung: Binden Sie Bootstrap vor Ihren eigenen CSS-Festlegungen ein. So werden Ihre Einstellungen nicht wieder überschrieben![4]

Kritik an Frameworks[Bearbeiten]

Hiermit erstellte Webseiten sehen naturgemäß den vielen Millionen Seiten, die ebenfalls auf den Frameworks aufbauen, sehr ähnlich. Wenn man die Formatvorlagen weitgehend an ein vorgegebenes Layout anpassen möchte, beschreiben viele Entwickler den nötigen Aufwand als genauso hoch oder höher wie bei einer kompletten Eigenentwicklung.

Darüberhinaus wird oft die mangelnde Trennung von Inhalt und Layout kritisiert, die aufgrund der massenhaft eingesetzten präsentationsbezogenen Klassen nicht aufrechtzuhalten ist. Wie in den Zeiten vor CSS muss an alle Elemente geschrieben werden, wie diese aussehen sollen – insbesondere Änderungen an statischen Seiten werden so extrem aufwändig und sind fehleranfällig.

Nicht zuletzt steht mit CSS-Grid eine Technik zur Verfügung, die leicht zu nutzen ist und Teile eines solchen Frameworks (insbesondere die zum Seitenlayout) überflüssig macht.

Weblinks

Typische Fehlerquellen[Bearbeiten]

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

Um die Ursache fehlerhafter Webseiten festzustellen, können Sie Ihr HTML & CSS mit dem Seiteninspektor untersuchen.

Gleichheitszeichen bei Wertzuweisungen[Bearbeiten]

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

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:

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.
Genauer: Der Browser interpretiert einen ungültigen Wert, weil red background-color:yellow keine gültige Farbangabe ist.

Regelsatz mit zwei geschweiften Klammern geschlossen[Bearbeiten]

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, sodass 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:

Groß- und Kleinschreibung bei Selektoren ansehen …
DIV {
  border: 3px solid blue;
  border-radius: 1em;
  padding: 0 1em;
}

#meldungen {
  background: lightgreen;
}

.wichtig {
  color: red;
  font-weight: bold;
}
<body>
  <div id="Meldungen">
    <p class="wichtig">Zur Zeit ist dieses Element nicht wie gewünscht formatiert.</p>
  </div>
</body>
Der Selektor #meldungen passt nicht zum id-Attributwert Meldungen, daher formatiert der Browser das Element <div id="Meldungen"> 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 referenzierte Ordner- und Mediennamen
… immer eine konsequente Kleinschreibung. So beugen Sie potentiellen Fehlern vor.

Leerzeichen[Bearbeiten]

Leerzeichen können semantische Bedeutung haben ansehen …
h2 span {
  color: red;
}
h2, span {
  background: #ccc;
  border: 1px solid;
}
Überschriften und Absätze sollen in roter Schrift dargestellt werden.
Allerdings bekommt nur das span-Element innerhalb von h2 die rote Schriftfarbe. Der zweite Regelsatz fasst alle h2- und span-Elemente zusammen und gibt ihnen einen grauen Hintergrund und einen Rand in Schriftfarbe.
Beachten Sie: Leerzeichen (oder allgemein Whitespace-Zeichen) innerhalb eines Selektors sind nicht möglich. Im Gegenteil, sie haben semantische Bedeutung, sie verknüpfen zwei Selektoren zum Nachfahrenselektor.

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

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.)


Quellen[Bearbeiten]

  1. css-tricks: Is CSS a Programming Language? von Chris Coyier on May 7, 2021
  2. csswizardry.com: CSS Shorthand Syntax Considered an Anti-Pattern
  3. CSS Coding Guidelines – CSS Code besser schreiben, formatieren und organisieren (Kulturbanause.blog)
  4. SELF-Forum: Bootstrap Background Color geht nicht vom 14.01.2019