W3docs
de
Anmelden

CSS-Syntax

CSS-Syntax besteht aus 3 Teilen: einem Selektor, einer Eigenschaft und einem Wert. Probiere CSS-Syntax-Beispiele selbst aus! Lerne mit W3Docs!

CSS-Syntax ist die Menge an Regeln, die dem Browser mitteilt, wie HTML gestaltet werden soll. Jede CSS-Regel folgt demselben Muster — sobald du die Struktur einer Regel verstehst, kannst du sie alle lesen. Dieses Kapitel zerlegt dieses Muster in seine drei Teile, zeigt ein funktionierendes Beispiel und erklärt, wie man Kommentare schreibt.

Wenn du völlig neu in CSS bist, lies zuerst die CSS-Einführung, um zu sehen, wie Stylesheets mit einer Seite verbunden werden.

Der Aufbau einer CSS-Regel

Eine CSS-Regel (auch Regelblock genannt) besteht aus zwei Teilen: einem Selektor und einem Deklarationsblock. Innerhalb des Deklarationsblocks ist jede Deklaration ein property: value-Paar.

selector {
  property: value;
}

Zusammen besteht eine Regel aus drei Dingen, die du kennen musst:

  • Selektor — welche(s) Element(e) gestaltet werden sollen.
  • Eigenschaft — welcher Aspekt geändert werden soll.
  • Wert — die anzuwendende Einstellung.

Selektor

Der Selektor zielt auf das HTML-Element ab, das du gestalten möchtest. Das kann ein beliebiges Tag wie <h1> oder <p>, eine Klasse oder eine ID sein. Ein einzelner Selektor kann eine oder mehrere Deklarationen enthalten. Selektoren sind ein eigenes Thema — siehe CSS-Selektoren für die vollständige Liste.

Eigenschaft

Die Eigenschaft ist das spezifische Merkmal, das du ändern möchtest, zum Beispiel color, border oder font-size. Jede Eigenschaft akzeptiert eine bestimmte Art von Wert, und jede Eigenschaft muss mit einem Wert verbunden werden.

Wert

Der Wert ist das, was du der Eigenschaft zuweist. Zum Beispiel kann der Wert der color-Eigenschaft ein Schlüsselwort wie red oder ein Hex-Code wie #f1f1f1 sein.

Syntaxregeln zum Merken

  • Ein Doppelpunkt (:) trennt eine Eigenschaft von ihrem Wert.
  • Ein Semikolon (;) beendet jede Deklaration und trennt eine von der nächsten.
  • Der gesamte Deklarationsblock ist in geschweifte Klammern ({ }) eingeschlossen.
  • CSS ignoriert zusätzliche Leerzeichen und Zeilenumbrüche zwischen Selektoren, Eigenschaften und Werten, sodass du Regeln frei zur besseren Lesbarkeit formatieren kannst.

Ein Selektor kann mehr als eine Deklaration enthalten, die jeweils durch ein Semikolon getrennt sind:

p {
  color: #1c87c9;
  font-size: 16px;
  line-height: 1.5;
}

Beispiel für CSS-Syntax

CSS-Syntax-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a>The color of this link is #1c87c9.</a>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS-Syntax

Im obigen Beispiel ist das <a>-Tag der Selektor, color ist die Eigenschaft und #1c87c9 ist der Wert. Die Eigenschaft und ihr Wert befinden sich innerhalb der geschweiften Klammern, getrennt durch einen Doppelpunkt und abgeschlossen mit einem Semikolon.

CSS-Kommentare

Kommentare ermöglichen es dir, Erklärungen oder Notizen zu deinem Stylesheet hinzuzufügen. Browser ignorieren sie, sodass sie die Seite nie beeinflussen. Sie sind nützlich, um zu dokumentieren, warum eine Regel existiert, Abschnitte zu beschriften oder eine Deklaration während des Debuggens vorübergehend zu deaktivieren.

Ein CSS-Kommentar beginnt mit /* und endet mit */:

Kommentare in CSS — Beispiel

/* This is a comment */

Kommentare können auch mehrere Zeilen umfassen, was praktisch ist, um mehrere Deklarationen auf einmal auszublenden:

/*
  This whole block is ignored by the browser.
  color: red;
  font-size: 20px;
*/

Beachte, dass CSS-Kommentare nicht verschachtelt werden können — sobald du /* öffnest, beendet das erste */ den Kommentar. Denke auch daran, dass // kein gültiger CSS-Kommentar ist; er funktioniert in manchen Präprozessoren wie Sass, aber nicht in reinem CSS.

Beispiel für CSS-Kommentare

Beispiele für CSS-Kommentare

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        padding-left: 10px;
        font-size: 26px;
        line-height: 30px;
        /*color:red;*/
      }
      p {
        color: #1c87c9;
        /*font-size:25px;
        border:1px solid red;
        */
        padding: 10px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Comments</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>
Probier es selbst »

Zusammenfassung

  • Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock in geschweiften Klammern.
  • Jede Deklaration ist ein property: value-Paar, das mit einem Semikolon abgeschlossen wird.
  • Leerzeichen werden ignoriert, daher kannst du Regeln so formatieren, wie es am besten lesbar ist.
  • Kommentare werden mit /* ... */ geschrieben und können mehrere Zeilen umfassen, aber nicht verschachtelt werden.

Als Nächstes lernst du, wie du diese Regeln in HTML-Styles an eine Seite anfügst, und erforschst dann CSS-Selektoren, um genau die gewünschten Elemente anzusprechen.

Übungen

Übung
Welche der folgenden Optionen beschreibt die korrekte CSS-Syntax?
Welche der folgenden Optionen beschreibt die korrekte CSS-Syntax?
Was this page helpful?