Was ist CSS?

Standard-Browserstile

Im Modul Strukturelle Inhalte mit HTML haben wir besprochen, was HTML ist und wie es zur Markierung von Dokumenten verwendet wird. Diese Dokumente sind in einem Webbrowser lesbar. Überschriften erscheinen größer als normaler Text, Absätze brechen in eine neue Zeile um und haben Abstand zwischen ihnen. Links sind farbig und unterstrichen, um sie vom restlichen Text zu unterscheiden.

Das, was Sie sehen, sind die Standard-Browserstile — sehr grundlegende Stile, die der Browser auf HTML anwendet, um sicherzustellen, dass die Seite auch dann lesbar ist, wenn der Autor der Seite keine expliziten Stile angegeben hat. Diese Stile sind in Standard-CSS-Stylesheets enthalten, die sich im Browser befinden — 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 über CSS lernen.

Wozu dient CSS?

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

• Ein Dokument ist in der Regel eine Textdatei, die mit einer Auszeichnungssprache strukturiert ist, am häufigsten HTML (diese werden HTML-Dokumente genannt). Möglicherweise begegnen Sie auch Dokumenten, die in anderen Auszeichnungssprachen wie SVG oder XML geschrieben sind. Ein HTML-Dokument enthält den Inhalt einer Webseite und legt deren Struktur fest.
• Präsentieren eines Dokuments für einen Benutzer bedeutet, es in eine Form zu konvertieren, die von Ihrem Publikum genutzt werden kann. Browser wie Firefox, Chrome, Safari und Edge sind darauf ausgelegt, Dokumente visuell darzustellen, zum Beispiel auf einem Computerbildschirm, Projektor, Mobilgerät oder Drucker. Im Web-Kontext wird dies allgemein als Rendering bezeichnet; wir haben eine vereinfachte Beschreibung des Prozesses geliefert, durch den eine Webseite in Wie Browser Websites laden gerendert wird.

CSS kann für viele Zwecke im Zusammenhang mit dem Erscheinungsbild Ihrer Webseite verwendet werden, zum Beispiel:

• Textstyling, einschließlich der Änderung der Farbe und Größe von Überschriften und Links.
• Erstellung von Layouts, wie Rasterlayouts oder Mehrspaltenlayouts.
• Spezielle Effekte wie Animationen.

Die CSS-Sprache ist in Module organisiert, die zusammengehörige Funktionalitäten enthalten. Beispielsweise finden Sie auf den MDN-Referenzseiten für das Modul Hintergründe und Ränder heraus, was dessen Zweck ist und welche Eigenschaften und Funktionen es enthält. Auf unseren Modul-Seiten finden Sie auch Links zu Spezifikationen, die die Technologien definieren.

Grundlegende CSS-Syntax

CSS ist eine regelbasierte Sprache — Sie definieren Regeln, indem Sie Gruppen von Stilen 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 stylen. Der folgende Code zeigt eine sehr einfache CSS-Regel, die dies erreicht:

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

• Im obigen Beispiel beginnt die CSS-Regel mit einem Selektor. Dieser selektiert die HTML-Elemente, die wir stylen werden. In diesem Fall stylen wir Überschriften der Ebene eins (<h1>).
• Dann fügen wir eine Reihe von geschweiften Klammern ({ }) ein, um einen Deklarationsblock zu erstellen.
• Der Deklarationsblock enthält eine oder mehrere Deklarationen, die in Form von Eigenschaft- und Wert-Paaren vorliegen. Wir geben die Eigenschaft (zum Beispiel color im obigen Beispiel) vor dem Doppelpunkt an und den Wert der Eigenschaft nach dem Doppelpunkt (im Beispiel ist red der Wert, der für die Eigenschaft color festgelegt wird).
• Dieses Beispiel enthält zwei Deklarationen, eine für color und eine weitere für font-size.

Verschiedene CSS-Eigenschaften haben verschiedene zulässige Werte. In unserem Beispiel haben wir die color-Eigenschaft, die verschiedene Farbwerte annehmen kann. Wir haben auch die font-size-Eigenschaft. Diese Eigenschaft kann verschiedene Größeneinheiten als Wert annehmen.

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, während andere Sie nachschlagen müssen. Die individuellen Eigenschaftsseiten auf MDN bieten Ihnen eine schnelle Möglichkeit, Eigenschaften und ihre Werte nachzuschlagen.

Wie wird CSS auf HTML angewendet?

Wie in Wie Browser Websites laden erklärt, empfängt der Browser beim Navigieren zu einer Webseite zuerst das HTML-Dokument, das den Webseiteninhalt enthält, und konvertiert es in einen DOM-Baum.

Danach werden alle CSS-Regeln, die auf der Webseite gefunden werden (entweder direkt in das HTML eingefügt oder in referenzierten externen .css-Dateien), in verschiedene "Bucket" sortiert, basierend auf den unterschiedlichen Elementen, auf die sie angewendet werden (wie durch ihre Selektoren angegeben). Die CSS-Regeln werden dann auf den DOM-Baum angewendet, was zu einem Renderbaum führt, der dann im Browserfenster gezeichnet wird.

Schauen wir uns ein Beispiel an. Zuerst definieren wir einen HTML-Ausschnitt, auf den 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>

Nun, unser CSS, wiederholt aus dem vorherigen Abschnitt:

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

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

Dieses CSS:

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

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

Spielen Sie mit etwas CSS

Versuchen Sie, mit dem obigen Beispiel zu spielen. Drücken Sie dazu die "Play"-Taste in der oberen rechten Ecke, um es in unserem MDN Playground-Editor zu laden.

Tun Sie Folgendes:

1. Fügen Sie einen weiteren Absatz unterhalb der beiden vorhandenen ein 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> ein, 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 der h1-Regel, ändern Sie den Selektor zu h2 und ändern Sie den color-Wert von red zu purple, zum Beispiel.
4. Wenn Sie sich abenteuerlustig fühlen, versuchen Sie, einige neue CSS-Eigenschaften und Werte in der MDN CSS-Referenz nachzuschlagen, um sie Ihren Regeln hinzuzufügen!

Für zusätzliche Übungen mit den CSS-Grundlagen siehe Schreiben Sie Ihre ersten CSS-Zeilen! von Scrimba ^{MDN Lernpartner}. Dieses Skript bietet eine nützliche Übersicht über die grundlegende CSS-Syntax und bietet eine interaktive Herausforderung, bei der Sie weitere Übung im Schreiben von CSS-Deklarationen erhalten.

Zusammenfassung

Da Sie jetzt ein gewisses Verständnis dafür haben, was CSS ist und wie es funktioniert, gehen wir weiter und geben Ihnen einige Übungen, um CSS selbst zu schreiben und die Syntax ausführlicher zu erklären.

• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter