CSS - Syntax

Leon A. -

CSS-Syntax

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock. Der Selektor zeigt auf das HTML-Element, das Sie gestalten möchten. Der Deklarationsblock enthält eine oder mehrere durch Semikolons getrennte Deklarationen. Jede Deklaration umfasst einen CSS-Eigenschaftsnamen und einen Wert, die durch einen Doppelpunkt getrennt sind.

CSS-Regel Beispiel

p {
  color: red;
  text-align: center;
}

p ist der Selektor, und { color: red; text-align: center; } ist der Deklarationsblock. Der Deklarationsblock enthält zwei Deklarationen: color: red; und text-align: center;.

CSS-Selektoren

CSS-Selektoren werden verwendet, um die HTML-Elemente auszuwählen, die Sie gestalten möchten. CSS-Selektoren können Elementnamen, Klassennamen, ID-Namen oder Attributnamen sein.

  1. Der Elementselektor wählt HTML-Elemente basierend auf dem Elementnamen aus.

Elementselektor Beispiel

p {
  font-size: 16px;
}
  1. Der ID-Selektor verwendet das id-Attribut eines HTML-Elements, um ein bestimmtes Element auszuwählen. Die ID eines Elements ist innerhalb einer Seite einzigartig, daher wird der ID-Selektor verwendet, um ein einzelnes Element auszuwählen. Um ein Element mit einer bestimmten ID auszuwählen, schreiben Sie ein Rautezeichen (#) gefolgt von der ID des Elements:

ID-Selektor Beispiel

#my-element {
  background-color: blue;
}
  1. Der Klassenselektor wählt HTML-Elemente mit einem bestimmten Klassenattribut aus. Um Elemente mit einer bestimmten Klasse auszuwählen, schreiben Sie einen Punkt (.) gefolgt vom Klassennamen:

Klassenselektor Beispiel

.my-class {
  color: green;
}

CSS-Deklarationsblöcke

Ein CSS-Deklarationsblock wird von geschweiften Klammern {} umgeben und kann mehrere Deklarationen enthalten, die mit Semikolons (;) enden.

Eine Deklaration besteht aus zwei Teilen:

  • Eigenschaft (vordefinierter Name, der sich auf stilistische Merkmale bezieht)
  • Wert (den Eigenschaften zugewiesen)

Mehrfache Deklarationen Beispiel

{
  color: blue;
  font-size: 12px;
  width: 100%;
}
  • color: blue; legt die Textfarbe fest.
  • font-size: 12px; legt die Schriftgröße fest.
  • width: 100%; legt die Breite relativ zum übergeordneten Container fest.

Durch die Kombination von Selektoren und Deklarationsblöcken können Sie Regeln erstellen, die das Aussehen Ihrer Webseiten steuern.

CSS verwenden

CSS kann auf drei Arten zu HTML-Dokumenten hinzugefügt werden: inline, intern und extern.

Inline CSS

Inline-Stile werden verwendet, um einen Stil auf ein einzelnes HTML-Element anzuwenden. Um Inline-Stile zu verwenden, fügen Sie dem betreffenden Element das style-Attribut hinzu. Das style-Attribut kann jede CSS-Eigenschaft enthalten.

Beispiel: Inline gestylte Überschrift

<h1 style="color: blue; font-size: 12px;">Inline gestylte Überschrift</h1>

Internes CSS

Interne Stile werden innerhalb des <style>-Elements im <head>-Bereich einer HTML-Seite definiert. Das interne Stylesheet sollte nur verwendet werden, wenn eine einzelne HTML-Seite einen einzigartigen Stil benötigt.

Beispiel für internes CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>
<body>

  <h1>Dies ist eine Überschrift</h1>
  <p>Dies ist ein Absatz.</p>

</body>
</html>

Externes CSS

Mit externen Stilen können Sie das Aussehen einer ganzen Website ändern, indem Sie nur eine Datei ändern. Jede HTML-Seite muss einen Verweis auf die externe Stylesheet-Datei innerhalb des <link>-Elements im Kopfbereich enthalten. Ein externes Stylesheet kann in jedem Texteditor geschrieben und mit einer .css-Erweiterung gespeichert werden. Die externe .css-Datei sollte keine HTML-Tags enthalten.

Beispiel für externes CSS

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <h1>Dies ist eine Überschrift</h1>
  <p>Dies ist ein Absatz.</p>

</body>
</html>

Die externe styles.css Datei:

h1 {
  color: navy;
  margin-left: 20px;
}

Die gängigste Methode, CSS zu HTML-Seiten hinzuzufügen, ist die Verwendung externer CSS-Dateien, damit mehrere Seiten das gleiche Erscheinungsbild haben.