So verwenden Sie CSS

CSS (Cascading Style Sheets) ist eine Sprache zum Definieren von Webseitenstilen. Sie wird zusammen mit HTML zum Erstellen von Webseiten verwendet. CSS steuert das Erscheinungsbild und die Position von HTML-Elementen, um Webseiten zu verschönern und die Benutzererfahrung zu verbessern.

In diesem Artikel stellen wir die Grundlagen von CSS vor und zeigen Ihnen, wie Sie mit CSS den Stil von HTML-Elementen ändern.

CSS-Grundlagen

CSS besteht aus Selektoren und Deklarationen. Mit Selektoren werden HTML-Elemente ausgewählt, auf die Stile angewendet werden sollen, während Deklarationen die Stile angeben, die auf die ausgewählten Elemente angewendet werden sollen.

Selektor

Hier sind einige gängige Selektoren:

• Elementselektor# 🎜🎜#: Wählen Sie ein Element aus, indem Sie den HTML-Elementnamen angeben, zum Beispiel:

  p {
  color: red;
  }

  Dadurch werden alle

  -Elemente im Dokument ausgewählt und ihre Farbe auf Rot gesetzt.

• Klassenselektor : Wählen Sie Elemente aus, indem Sie den Klassennamen angeben, zum Beispiel:

  .my-class {
  background-color: yellow;
  }

  Dies wird ausgewählt Alle Elemente mit class="my-class" und setzen ihre Hintergrundfarbe auf Gelb.

• ID-Auswahl : Wählen Sie ein einzelnes Element aus, indem Sie die ID angeben, zum Beispiel:

  #my-id {
  font-size: 20px;
  }

  Das wird Wählen Sie Element mit der ID="my-id" aus und stellen Sie die Schriftgröße auf 20 Pixel ein.

• Attributauswahl : Wählen Sie Elemente aus, indem Sie ihre Attribute angeben, zum Beispiel:

  a[href="https://www.google.com"] {
  color: blue;
  }

  Dadurch werden alle ausgewählt

  Elemente, die auf Google-Websites verweisen, und ihre Farbe auf Blau setzen.

• Pseudoklassen und Pseudoelemente : Wählen Sie Elemente aus, indem Sie ihren Status oder ihre Position angeben, zum Beispiel:

  a:hover {
  text-decoration: underline;
  }

  #🎜🎜 #Dadurch werden alle
  Elemente ausgewählt und deren Text beim Mouseover unterstrichen.

Deklarationen

Deklarationen sind Teil von CSS-Regeln und jede Deklaration besteht aus Attributen und Werten. Das Attribut gibt den anzuwendenden Stil an und der Wert bestimmt den spezifischen Wert des Attributs. Zum Beispiel:

p {
  color: red;
}

In dieser Regel ist „Farbe“ das Attribut und „Rot“ der Wert. Dadurch werden alle

-Elemente im Dokument ausgewählt und ihre Farbe auf Rot gesetzt.

So wenden Sie CSS an

CSS kann auf drei Arten auf HTML-Dokumente angewendet werden: interne Stylesheets, externe Stylesheets und Inline-Stile. Wir werden jede dieser drei Methoden separat betrachten.

Internes Stylesheet

Internes Stylesheet bezieht sich auf CSS-Regeln, die im