• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter

CSS (Cascading Style Sheets) ermöglicht es Ihnen, ansprechend aussehende Webseiten zu erstellen, aber wie funktioniert es im Hintergrund? Dieser Artikel erklärt, was CSS ist, wie die grundlegende Syntax aussieht und wie Ihr Browser CSS auf HTML anwendet, um es zu stylen.

Standardbrowserstile

Im ModulStrukturieren von Inhalten mit HTML haben wir behandelt, was HTML ist und wie es zum Markieren von Dokumenten verwendet wird. Diese Dokumente sind in einem Webbrowser lesbar. Überschriften sehen größer aus als normaler Text, Absätze brechen auf eine neue Zeile um und haben Zwischenräume. Links sind eingefärbt und unterstrichen, um sie vom Rest des Textes zu unterscheiden.

Was Sie sehen, sind die Standardstile des Browsers – sehr grundlegende Styles, die der Browser auf HTML anwendet, um sicherzustellen, dass die Seite lesbar ist, selbst wenn der Autor der Seite keine expliziten Styles angegeben hat. Diese Styles sind in den standardmäßigen CSS-Stylesheets definiert, die im Browser enthalten sind – sie haben nichts mit HTML zu tun.

Das Web wäre ein langweiliger Ort, wenn alle Webseiten so aussehen würden. Deshalb müssen Sie CSS lernen.

Wofür ist CSS?

Mit CSS können Sie genau steuern, wie HTML-Elemente im Browser aussehen, und Ihre Dokumente mit jedem gewünschten Design und Layout präsentieren.

• EinDokument ist normalerweise eine Textdatei, die mit einer Auszeichnungssprache strukturiert ist, meistHTML (diese werden alsHTML-Dokumente bezeichnet). Sie können auch auf Dokumente stoßen, die in anderen Auszeichnungssprachen wieSVG oderXML geschrieben sind. Ein HTML-Dokument enthält die Inhalte einer Webseite und legt deren Struktur fest.
• Präsentieren eines Dokuments für einen Benutzer bedeutet, es in eine für das Publikum nutzbare Form zu konvertieren.Browser wieFirefox,Chrome,Safari undEdge sind darauf ausgelegt, Dokumente visuell darzustellen, beispielsweise auf einem Computermonitor, Projektor, mobilen Gerät oder Drucker. In einem Webkontext wird dies im Allgemeinen alsRendering bezeichnet; wir boten eine vereinfachte Beschreibung des Prozesses, durch den eine Webseite gerendert wird, inWie Browser Webseiten laden.

CSS kann für viele Zwecke im Zusammenhang mit dem Aussehen und der Wahrnehmung Ihrer Webseite verwendet werden, zum Beispiel:

• Textstyling, einschließlich der Änderung derFarbe undGröße von Überschriften und Links.
• Erstellen von Layouts wieRasterlayouts odermehrspaltige Layouts.
• Spezielle Effekte wieAnimation.

Die CSS-Sprache ist inModule organisiert, die verwandte Funktionalitäten enthalten. Beispielsweise werfen Sie einen Blick auf die MDN-Referenzseiten für dasHintergrund und Rahmen Modul, um dessen Zweck und die Eigenschaften und Funktionen zu erfahren, die es enthält. In unseren Modulseiten finden Sie auch Links zuSpezifikationen, die die Technologien definieren.

Grundlagen der CSS-Syntax

CSS ist eine regelbasierte Sprache – Sie definieren Regeln, indem Sie Gruppen von Styles angeben, die auf ein bestimmtes Element oder Gruppen von Elementen auf Ihrer Webseite angewendet werden sollen.

Beispielsweise könnten Sie entscheiden, die Hauptüberschrift auf Ihrer Seite als großen roten Text zu gestalten. Der folgende Code zeigt eine sehr einfache CSS-Regel, die dies erreichen würde:

h1 {  color: red;  font-size: 2.5em;}

• Im obigen Beispiel öffnet sich die CSS-Regel mit einemSelektor. Dieserwählt die HTML-Elemente aus, die wir stylen werden. In diesem Fall stylen wir Überschriften der Stufe eins (<h1>).
• Dann fügen wir eine Menge geschweifter Klammern ein –{ }.
• Die Klammern enthalten eine oder mehrereDeklarationen, die die Form vonEigenschafts- undWert-Paaren haben. Wir geben die Eigenschaft (zum Beispielcolor im obigen Beispiel) vor dem Doppelpunkt an und den Wert der Eigenschaft nach dem Doppelpunkt (red ist der Wert, der für die Eigenschaftcolor festgelegt wird).
• Dieses Beispiel enthält zwei Deklarationen, eine fürcolor und eine fürfont-size.

Verschiedene CSS-Eigenschaften haben unterschiedliche zulässige Werte. In unserem Beispiel haben wir die Eigenschaftcolor, die verschiedeneFarbwerte annehmen kann. Wir haben auch die Eigenschaftfont-size, die verschiedeneGrößeneinheiten als Wert annehmen kann.

Ein CSS-Stylesheet enthält viele solcher Regeln, die nacheinander geschrieben werden.

h1 {  color: red;  font-size: 2.5em;}p {  color: aqua;  padding: 5px;  background: midnightblue;}

Sie werden feststellen, dass Sie schnell einige Werte lernen werden, während andere Sie nachschlagen müssen. Die individuellen Eigenschaftsseiten auf MDN geben Ihnen eine schnelle Möglichkeit, Eigenschaften und deren Werte nachzuschlagen.

Wie wird CSS auf HTML angewendet?

Wie inWie Browser Webseiten laden erklärt, erhält der Browser beim Navigieren zu einer Webseite zunächst das HTML-Dokument, das den Webseiteninhalt enthält, und konvertiert es in einenDOM-Baum.

Danach werden alle in der Webseite gefundenen CSS-Regeln (entweder direkt im HTML eingefügt, oder in referenzierten externen.css-Dateien) in verschiedene "Eimer" sortiert, basierend auf den unterschiedlichen Elementen, auf die sie angewendet werden (wie von ihren Selektoren angegeben). Die CSS-Regeln werden dann auf den DOM-Baum angewendet, was in einemRenderbaum resultiert, der dann im Browserfenster gezeichnet wird.

Schauen wir uns ein Beispiel an. Zuerst definieren wir ein HTML-Snippet, auf das das CSS angewendet werden könnte:

<h1>CSS is great</h1><p>You can style text.</p><p>And create layouts and special effects.</p>

Jetzt unser CSS, wiederholt aus dem vorherigen Abschnitt:

h1 {  color: red;  font-size: 2.5em;}p {  color: aqua;  padding: 5px;  background: midnightblue;}

Dieses CSS:

• Wählt alle<h1>-Elemente auf der Seite aus, färbt deren Text rot und macht sie größer als ihre Standardgröße. Da es in unserem Beispiel-HTML nur ein<h1> gibt, wird nur dieses Element das Styling erhalten.
• Wählt alle<p>-Elemente auf der Seite aus, gibt ihnen eine benutzerdefinierte Text- und Hintergrundfarbe und etwas Abstand um den Text herum. Es gibt zwei<p>-Elemente in unserem Beispiel-HTML, und beide erhalten das Styling.

Wenn das CSS auf das HTML angewendet wird, sieht die gerenderte Ausgabe wie folgt aus:

Spielen Sie mit etwas CSS

Versuchen Sie, mit dem obigen Beispiel zu experimentieren. Um dies zu tun, drücken Sie die "Play"-Schaltfläche in der oberen rechten Ecke, um es in unserem MDN Playground-Editor zu laden.

Tun Sie Folgendes:

1. Fügen Sie einen weiteren Absatz Text unterhalb der beiden vorhandenen hinzu, und beachten Sie, wie die zweite CSS-Regel automatisch auf den neuen Absatz angewendet wird.
2. Fügen Sie eine<h2>-Unterüberschrift irgendwo unterhalb der<h1> hinzu, vielleicht nach einem der Absätze.
3. Versuchen Sie, den<h2>-Elementen eine andere Farbe zu geben, indem Sie eine neue Regel zum CSS hinzufügen. Machen Sie eine Kopie derh1-Regel, ändern Sie den Selektor zuh2, und ändern Sie dencolor-Wert vonred zupurple, zum Beispiel.
4. Wenn Sie sich abenteuerlustig fühlen, versuchen Sie, einige neue CSS-Eigenschaften und -Werte in der MDNCSS-Referenz nachzuschlagen, um sie zu Ihren Regeln hinzuzufügen!

Für zusätzliche Übungen zu den CSS-Grundlagen, sehen Sie sichSchreiben Sie Ihre ersten Zeilen CSS! von Scrimba an^{MDN-Lernpartner}. Diese Übung gibt einen nützlichen Überblick über die grundlegende CSS-Syntax und bietet eine interaktive Herausforderung, bei der Sie etwas mehr Übung im Schreiben von CSS-Deklarationen erhalten.

Zusammenfassung

Jetzt, da Sie ein gewisses Verständnis dafür haben, was CSS ist und wie es funktioniert, lassen Sie uns weitermachen, um Ihnen etwas Übung im Schreiben von CSS selbst zu geben und die Syntax detaillierter zu erklären.

• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter