MDN wants to learn about developers like you: https://www.surveygizmo.com/s3/5171903/MDN-Learn-Section-Survey-Recruiter-Pathway

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

CSS (Cascading Style Sheets) erlauben Ihnen, gut aussehende Webseiten zu erstellen, aber was läuft hinter den Kulissen ab? Dieser Artikel erklärt, was CSS ist, wie der Browser HTML in ein Document Object Model (DOM) umwandelt sowie CSS auf Teile des DOMs angewendet wird. Wir erkunden außerdem erste, sehr einfache Syntax-Beispiele und welcher Code benötigt wird, um CSS in unsere Webseite einzubinden.

Voraussetzungen: Grundlegende Computerkenntnisse, grundlegende Software installiert, grundlegende Kentnisse im Nutzen von Dateien, und HTML Grundlagen (siehe Einführung in HTML.)
Ziel: Lernen, was CSS ist und wie es funktioniert — auf einem grundlegenden Level.

Was ist CSS?

Wie wir bereits erwähnt haben, ist CSS eine Sprache um zu beschreiben wie Dokumente dem Besucher präsentiert werden — wie sie gestaltet sind, gelayoutet, etc.

Ein Dokument ist normalerweise eine Textdatei welchs mithilfe einer Auszeichnungssprache strukturiert wird — HTML ist die am meisten verbreitete Auszeichnungssprache, aber du wirst auch anderen Auszeichnungssprachen begegnen wie SVG oder XML.

Einem Benutzer ein Dokument zu präsentieren bedeutet, es für Ihr Publikum in eine verwendbare Form zu konvertieren. Browser, wie Firefox, Chrome oder Internet Explorer wurden entwickelt, um Dokumente visuell darzustellen, beispielsweise auf einem Computerbildschilm, Projektor oder Drucker.

Wie wird HTML von CSS beeinflusst?

Browser wenden CSS rules auf ein Dokument an, um zu beeinflussen, wie sie dargestellt werden. Eine CSS-Regel besteht aus:

  • Einem Set von properties, deren Werte updaten, wie der HTML-Inhalt dargestellt wird, zum Beispiel Ich will, dass die Breite meines Elementes 50% der Breite des Elternelementes beträgt und der Hintergrund rot ist.
  • Einem selector, der die Elemente auswählt (engl. "select"), deren Property Values ein Update erhalten sollen. Beispiel: Ich will, dass meine CSS-Regel auf alle Absätze in meinem HTML-Dokument angewendet wird.

Mehrere CSS rules, die in einem Stylesheet enthalten sind, legen fest, wie eine Webseite aussehen soll. Sie werden im nächsten Artikel des Moduls eine Menge mehr über CSS-Syntax lernen — CSS Syntax.

Ein kleines CSS Beispiel

Die bisherigen Beschreibungen mögen sinnvoll für Sie gewesen sein oder auch nicht, gehen wir also sicher, dass alles klar ist, indem wir uns ein schnelles Beispiel ansehen. Zuallererst nehmen wir ein einfaches HTML-Dokument, das ein <h1> and a <p> -Element enthält (beachten Sie, dass ein Stylesheet auf ein HTML-Dokument mit dem <link>-Element angewendet wird):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mein CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist mein erstes CSS-Beispiel</p>
  </body>
</html>

Sehen wir uns nun ein sehr einfaches CSS-Beispiel an, das zwei Regeln enthält:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Die erste Regel beginnt mit einem h1-Selektor, was bedeutet, dass alle Wertbelegungen  auf das <h1>-Element angewendet werden. Es beinhaltet drei Eigenschaften (properties) und ihre Werte (values; die Property/Value-Paare werden Deklaration genannt):

  1. Die erste Deklaration legt die Textfarbe auf blau fest.
  2. Die zweite Deklaration färbt den Hintergrund gelb.
  3. Die dritte Deklaration umrahmt den Header mit einer ein-Pixel-breiten Umrahmung, durchgehend (nicht gepunktet oder gestrichelt, etc.) und in der Farbe schwarz.

Die zweite Regel beginnt mit einem p-Selektor, was bedeutet, dass alle Wertbelegungen auf das <p>-Element angewendet werden. Es beinhaltet eine Deklaration, die die Textfarbe auf rot setzt.

So sieht das Ergebnis des obigen Codes in einem Web-Browser aus:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

Sieht zwar nicht allzu schön aus, aber man erkennt an diesem Beispiel, wie CSS funktioniert.

Aktives Lernen: Schreiben Sie Ihr erstes CSS

Nun möchten wir Ihnen die Chance geben, Ihr eigenes CSS zu schreiben. Sie können dies tun, indem Sie die Eingabeflächen zu den live bearbeitbaren Beispielen verwenden. Auf ähnliche Weise wie im Minibeispiel von eben haben Sie einige einfache HTML-Elemente gegeben und einige CSS-Properties. Fügen Sie einfach einige Deklarationen zu Ihrem CSS hinzu, um das HTML zu stylen.

Keine Sorge, falls Ihnen ein Fehler unterläuft, können Sie jederzeit alle Änderungen zurücksetzen, indem Sie den Reset-Button betätigen. Wenn Sie überhaupt nicht weiterkommen, klicken Sie auf den Show solution-Button, um eine mögliche Antwort zu sehen.

Wie genau funktioniert CSS?

Wenn ein Browser ein Dokument darstellt, muss er den Inhalt des Dokuments mit seinen Style-Informationen kombinieren. Er verarbeitet das Dokument in zwei Phasen:

  1. Der Browser konvertiert HTML und CSS in das DOM (Document Object Model). Das DOM repräsentiert das Dokument im Computerspeicher. Es kombiniert dazu Inhalt und Style.
  2. Der Browser stellt die Inhalte des DOMs dar.

Über das DOM

Ein DOM hat eine Baum-artige Struktur. Jedes Element, Attribut und Textteilchen in der Auszeichnungssprache wird zu einem DOM node (auch Knoten) in der Baumstruktur. Die Nodes sind durch Ihre Beziehung zu anderen DOM Nodes definiert. Einige Elemente sind Eltern von Kindknoten und Kindknoten haben Geschwisterknoten.

Das DOM zu verstehen hilft Ihnen, Ihr CSS zu designen, debuggen und maintainen, denn im DOM treffen Ihr CSS und der Dokumenteninhalt aufeinander.

DOM representation

Statt einer langen, langweiligen Erklärung ziehen wir lieber ein Beispiel heran, um zu zeigen, wie das DOM und das CSS zusammenarbeiten.

Nehmen wir folgenden HTML-Code als Grundlage:

<p>
  Wir verwenden
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Im DOM iist der Knoten des <p>-Elements ein Elternknoten. Seine Kinder sind ein Textknoten und die Knoten, die zu unseren <span>-Elementen gehören. Die SPAN-Knoten sind auch Eltern, mit Textknoten als ihre Kinder:

P
├─ "Wir verwenden"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

So interpretiert ein Browser den HTML-Schnippsel — er rendert den dargestellten DOM-Tree und der Output im Browser sieht dann folgendermaßen aus:

Anwenden von CSS auf das DOM

Fügen wir nun ein wenig CSS zu unserem Dokument hinzu, um es zu stylen. Zur Erinnerung hier noch einmal das HTML:

<p>
  Wir verwenden:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Wenn wir das nachfolgende CSS darauf anwenden:

span {
  border: 1px solid black;
  background-color: lime;
}

, wird der Browser das HTML parsen und ein DOM daraus erzeugen, anschließend parst er das CSS. Da die einzige verfügbare Regel im CSS einen span-Selektor hat, wird jede Regel auf jeden der drei Spans angewendet. Der abgeänderte Output ist nun der folgende:

Anwenden Ihres CSS auf Ihr HTML

Es gibt im Allgemeinen drei Wege, auf denen Sie CSS auf ein HTML-Dokument anwenden können. Einige sind hilfreicher als andere. Hier wollen wir kurz jeden dieser Wege beleuchten.

Externes Stylesheet

Sie haben bereits externe Stylesheets in diesem Artiken gesehen, aber sie noch nicht so genannt. Ein externes Stylesheet ist, wenn Ihr CSS in einer separaten Datei mit der Endung .css  geschrieben ist und sie aus einem HTML <link>-Element heraus darauf zugreifen. Die HTML-Datei sieht ungefähr so aus:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mein CSS-Experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist mein erstes CSS-Beispiel</p>
  </body>
</html>

Und die CSS-Datei:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Diese Methode ist die wohl beste, da so ein einziges Stylesheet auf mehrere Dokumente angewendet werden kann. Bei einer Veränderung muss so lediglich ein CSS überarbeitet werden.

Internes Stylesheet

Bei einem internal stylesheet gibt es keine externe CSS-Datei, sondern stattdessen ein ist Ihr CSS in ein <style>-Element geschrieben, das im HTML head enthalten ist. Das HTML sieht dann beispielsweise so aus:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Dies kann unter bestimmten Umständen sinnvoll sein (Möglicherweise arbeiten Sie in einem CMS (Content management system), in dem Sie CSS-Dateien nicht direkt bearbeiten können). Allerdings ist es weit nicht so effizient wie externe Stylesheets — auf einer Webseite müsste das CSS auf jeder einzelnen Seite wiederholt angepasst werden, wenn Veränderungen nötig sind.

Inline Styles

Inline styles sind CSS-Deklarationen, die lediglich ein einzelnes Element beeinflussen, eingebunden in ein style-Attribute:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Bitte unterlassen Sie das, wenn es nicht wirklich notwendig ist! Es ist wirklich schlecht zu warten (man muss möglicherweise dieselbe Information mehrfach im selben Dokument updaten) und vermischt außerdem die CSS-Informationen zur Präsentation mit den Strukturinformationen Ihres HTML, sodass das CSS schwieriger zu lesen und zu verstehen ist. Verschiedene Typen von Code separat und rein zu halten macht es allen leichter, die mit dem Code arbeiten.

Die einzige Situation, in der man möglicherweise auf Inline Styles zurückgreifen muss, ist wenn Ihre Arbeitsumgebung sehr restriktiv ist (vielleicht erlaubt Ihnen Ihr CMS nur, den HTML-Body zu bearbeiten).

Was kommt als nächstes

An diesem Punkt sollten Sie grundlegend verstehen, wie CSS funktioniert und wie Browser damit umgehen. Als nächstes werden Sie die CSS Syntax kennenlernen.

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: DiscW0rld, mdnwebdocs-bot, Carsten-Lehmann, pixelwiese
Zuletzt aktualisiert von: DiscW0rld,