CSS-Kurs / Syntax: Selektoren, Deklarationen, Kommentare und Fehler

Eine CSS-Regel kombiniert einen Selektor mit Deklarationen, die als Eigenschaft: Wert; in geschweiften Klammern geschrieben werden. Korrekte Syntax hilft dem Browser, die beabsichtigten Stile anzuwenden, aber eine fehlerhafte Deklaration kann ignoriert werden, während andere gültige Deklarationen weiterhin funktionieren.

Lesen Sie die Bestandteile einer CSS-Regel

.notice {
  color: #087f5b;
  padding: 16px;
}

Jede Eigenschaft erlaubt unterschiedliche Werte. Geben Sie den Farbwert in color und den Längenwert in padding ein. padding: blue; ist kein gültiger Wert für den Innenabstand, selbst wenn das Wort korrekt geschrieben ist. 16px wird mit Zahlen und Einheiten geschrieben. Wenn Sie Leerzeichen wie 16 px verwenden, wird es nicht als ein einzelner Längenwert gelesen.

Verwenden Sie geschweifte Klammern, Doppelpunkte, Semikolons und Leerzeichen

Zeilenumbrüche und Einrückungen helfen, den Code für Menschen leichter lesbar zu machen. Die beiden folgenden Regeln gelten gleich, weil sie denselben Selektor und dieselbe Deklaration haben. Wenn man gerade erst lernt, ist es einfacher, fehlende Symbole zu finden, wenn man die Deklarationen Zeile für Zeile aufteilt. Wie man einen Selektor entsprechend dem zu dekorierenden Objekt auswählt, wird in Grundlegende CSS-Selektoren: Typ, Klasse, ID und Attribute verglichen.

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

Obwohl die letzte Deklaration ihr Semikolon weglassen kann, macht das konsequente Schreiben spätere Ergänzungen sicherer. Leerzeichen im Selektor können die Bedeutung ändern: .notice.urgent entspricht einem Element mit beiden Klassen, während .notice .urgent ein Element mit der Klasse urgent innerhalb eines Elements mit der Klasse notice auswählt. Das Entfernen dieses Leerzeichens ändert den Selektor. Siehe MDN: Einführung.

Gruppieren Sie Selektoren und schreiben Sie Kommentare

h1, h2 {
  color: #087f5b;
}

/* Apply the background and border only to the notice. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

Ein Komma verbindet mehrere Selektoren mit demselben Deklarationsblock. h1, h2 wählt jeweils h1 und h2 aus, und h1 h2 ist ein weiterer Selektor, der h2 innerhalb von h1 findet. Ein Komma ist zweckmäßig, um dieselbe Farbe anzuwenden.

CSS-Kommentare beginnen mit /* und enden mit */. Anweisungen innerhalb von Kommentaren werden im Stil nicht ausgeführt. Es kann verwendet werden, um eine Erklärung zu schreiben oder eine Regel vorübergehend auszuschließen, aber wenn das schließende Symbol fehlt, kann der dahinter stehende Code als Kommentar behandelt werden. In regulärem CSS wird JavaScripts // nicht als Notation für einzeilige Kommentare verwendet.

Vergleichen Sie Deklarationsfehler und Selektorfehler

Wenn ein Browser auf einen Fehler in CSS stößt, ignoriert er den ungültigen Teil und verarbeitet weiterhin mögliche Regeln. Das bedeutet nicht immer „ignorieren Sie eine Zeile, die falsch ist.“ Fehlende Trennzeichen oder Selektorfehler können große Auswirkungen haben.

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

Nur padding: blue ist hier ungültig. Sofern es keine anderen Regeln gibt, werden die Textfarbe und die Hintergrundfarbe angewendet, und das Padding wird durch diese Deklaration nicht geändert. Selbst wenn die Eigenschaft falsch geschrieben ist, wie z. B. colro, wird die Deklaration nicht erkannt.

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

In diesem Block fehlt ein Semikolon nach der ersten Deklaration. Der Browser liest blue background-color: #e9f7ef als den Wert von color, was ungültig ist. Weder die beabsichtigte Farbe noch die beabsichtigte Hintergrunddeklaration wird angewendet, aber padding: 16px; wird dennoch angewendet. Fügen Sie das fehlende Semikolon nach blue hinzu.

h1, .notice:made-up-state {
  color: blue;
}

Eine unbekannte Pseudo-Klasse macht diese gewöhnliche komma-getrennte Selektorenliste ungültig, sodass die Regel ebenfalls nicht auf h1 angewendet wird. Bestimmte spezielle Selektorenlisten verwenden eine fehlertolerante Verarbeitung. Dieses Beispiel beschreibt daher nicht das Verhalten jedes Selektorlisten-Kontexts. Siehe MDN: Fehlerbehandlung.

Führen Sie das vollständige Beispiel aus

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* Sentence describing operating hours */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <h2>Visitor Information</h2>
  <p class="description">Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Wenn Sie den gesamten Code als index.html speichern und öffnen, sind h1 und h2 gleich grün, und der Hinweis hat einen hellen Hintergrund, 16px Innenabstand und 1px Rahmen. Beschreibende Sätze erscheinen in 18px. font-size ist die Eigenschaft, die die Schriftgröße festlegt, line-height ist die Zeilenhöhe, und border ist der Rahmen. Hier wird sie als Hilfseigenschaft verwendet, um Syntax und Ergebnisse zu verknüpfen.

Finden und beheben Sie Syntaxfehler

Ersetzen Sie den .notice-Block im gesamten Beispiel durch den folgenden Code. Das Ziel ist es, zwei Syntaxfehler zu beheben und es zu „blauer Text, hellgrüner Hintergrund, 16px Innenabstand“ zu machen. Sie können leicht zurückkehren, indem Sie die Originaldatei vor der Änderung unter einem anderen Namen kopieren.

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

Ändern Sie colro zu color und fügen Sie nach background-color einen Doppelpunkt hinzu. Speichern und aktualisieren Sie: Die Benachrichtigung sollte blauen Text, einen hellgrünen Hintergrund und 16px Padding haben. Das Padding war bereits gültig, sodass etwas Abstand selbst vor der Behebung der Syntaxfehler bestehen bleiben kann.

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

Wenn Ihre Bearbeitung die Seite nicht ändert, prüfen Sie zuerst, ob Sie die richtige Datei geöffnet haben. Dann CSS mit DevTools prüfen: Styles und Computed, um zu sehen, welche Werte tatsächlich angewendet werden. Unterscheiden Sie Syntaxfehler, Selektoren, die zum falschen Element passen, und Konflikte zwischen Regeln, bevor Sie weitere Werte ändern.