Icon: Seitenanfang.
Seitenanfang.
Inhaber Kay Eickhoff visuelle Kommunikation: Kay Eickhoff.
Ansprechpartner und Direktkontakt: Kay Eickhoff.

Von Kay Eickhoff

+

Was ist eine CSS-Regel?

Mit CSS-Regeln das visuelle Erscheinungsbild von HTML-Elementen kontrollieren und das Website-Layout gestalten.

Eine "CSS-Regel" ist eine grundlegende Anweisung in einer Cascading Style Sheets (CSS)-Datei, die festlegt, wie HTML-Elemente auf einer Webseite gestaltet werden sollen. Durch CSS-Regeln können Webdesigner das visuelle Erscheinungsbild von HTML-Elementen kontrollieren und das Layout einer Website gestalten.

Eine typische CSS-Regel besteht aus drei Hauptkomponenten:

1) Selektor: Dieser Teil der Regel identifiziert die HTML-Elemente, auf die die folgenden Stilregeln angewendet werden sollen. Selektoren können verschiedene Formen annehmen, darunter Elementnamen (z. B. h1, p, div), Klassen (.class-name), IDs (#id-name), Attribute ([attribute]), Pseudo-Klassen (:hover, :first-child) oder kombinierte Selektoren.

2) Geschweifte Klammern: {} Die geschweiften Klammern {} umfassen die Gruppe von Stilregeln für das ausgewählte HTML-Element oder die ausgewählten Elemente.

3) Deklarationen: Die Deklarationen oder Stilregeln definieren, wie die ausgewählten HTML-Elemente gestaltet werden sollen. Diese Deklarationen bestehen aus Eigenschaften und Werten. Eine Eigenschaft ist das Attribut des Elements, das gestaltet werden soll (z. B. color, font-size, margin). Der Wert ist der Wert, den diese Eigenschaft annehmen soll (z. B. blue, 16px, 20px 10px). Mehrere Deklarationen werden durch Semikolons voneinander getrennt. Siehe auch: empfohlene Reihenfolge für CSS-Deklarationen.

Beispiel für eine CSS-Regel:

  • Der Selektor ist h1.
  • Die geschweiften Klammern {} umfassen die Stilregeln.
  • Die Deklarationen (Kombination aus Eigenschaft / Attribut und Wert) innerhalb der geschweiften Klammern setzen die Farbe des Textes (Eigenschaft / Attribut) auf Blau (Wert) und die Schriftgröße auf 24 Pixel für alle <h1>-Elemente auf der Seite.
h1 {
  color: blue;
  font-size: 24px;
}

Empfohlene Reihenfolge für CSS-Deklarationen:

Die allgemein empfohlene Reihenfolge für CSS-Deklarationen trägt dazu bei, den Code übersichtlich zu halten und potenzielle Probleme zu minimieren. Die allgemeine Reihenfolge sieht wie folgt aus:

1) Positionierung und Box-Modell:

  • position: Die Position eines Elements auf einer Webseite kann durch CSS festgelegt werden, um zu definieren, wie es im Verhältnis zu anderen Elementen platziert wird.
  • top, right, bottom, left: Dies sind die Eigenschaften in CSS, die verwendet werden, um die Positionierung eines Elements relativ zu seinem Elternelement oder einem anderen positionierten Element festzulegen.
  • float, clear: Float ist eine CSS-Eigenschaft, die es einem Element erlaubt, entweder links oder rechts eines Containers zu schweben, während Clear angibt, wie ein Element sich neben anderen schwebenden Elementen verhalten soll.
  • display: Die Display-Eigenschaft in CSS bestimmt, wie ein HTML-Element im Layout des Dokuments dargestellt wird, zum Beispiel block, inline oder inline-block.

2) Dimensionen:

  • width: Die Breite eines Elements in CSS kann mit der Width-Eigenschaft festgelegt werden, um anzugeben, wie breit das Element sein soll.
  • height: Die Höhe eines Elements in CSS kann mit der Height-Eigenschaft festgelegt werden, um anzugeben, wie hoch das Element sein soll.
  • max-width: Die Max-width-Eigenschaft in CSS legt die maximale Breite eines Elements fest, die es haben kann, bevor es nicht mehr größer wird.
  • max-height: Die Max-height-Eigenschaft in CSS legt die maximale Höhe eines Elements fest, die es haben kann, bevor es nicht mehr höher wird.
  • min-width: Die Min-width-Eigenschaft in CSS legt die minimale Breite eines Elements fest, unter die es nicht schrumpfen kann.
  • min-height: Die Min-height-Eigenschaft in CSS legt die minimale Höhe eines Elements fest, unter die es nicht schrumpfen kann.

3) Typografie:

  • font-family: Die Font-family-Eigenschaft in CSS legt die Schriftart fest, die für den Textinhalt eines Elements verwendet werden soll.
  • font-size: Die Font-size-Eigenschaft in CSS bestimmt die Größe des Textes innerhalb eines Elements.
  • font-weight: Die Font-weight-Eigenschaft in CSS bestimmt die Dicke oder Stärke der Schrift.
  • font-style: Die Font-style-Eigenschaft in CSS wird verwendet, um den Stil des Textes zu bestimmen, wie zum Beispiel kursiv oder normal.
  • line-height: Die Line-height-Eigenschaft in CSS legt den vertikalen Abstand zwischen den Zeilen des Textes innerhalb eines Elements fest.
  • letter-spacing: Die Letter-spacing-Eigenschaft in CSS legt den horizontalen Abstand zwischen den Buchstaben eines Textes fest.
  • text-align: Die Text-align-Eigenschaft in CSS bestimmt die Ausrichtung des Textes innerhalb eines Elements, wie z. B. linksbündig, zentriert, rechtsbündig oder im Blocksatz.
  • text-decoration: Die Text-decoration-Eigenschaft in CSS wird verwendet, um dekorative Effekte wie Unterstreichungen, Durchstreichungen oder Überstreichungen auf Text anzuwenden.
  • text-transform: Die Text-transform-Eigenschaft in CSS wird verwendet, um den Text in verschiedene Schreibweisen umzuwandeln, wie zum Beispiel in Großbuchstaben, Kleinbuchstaben oder Kapitälchen.
  • white-space: Die White-space-Eigenschaft in CSS legt fest, wie Leerzeichen und Zeilenumbrüche im Text eines Elements behandelt werden sollen, zum Beispiel durch Zusammenfassen oder Erzwingen von Zeilenumbrüchen.

4) Farben und Hintergrund:

  • color: Die Color-Eigenschaft in CSS legt die Textfarbe eines Elements fest.
  • background-color: Die Background-color-Eigenschaft in CSS bestimmt die Hintergrundfarbe eines Elements.
  • background-image: Die Background-image-Eigenschaft in CSS ermöglicht es, eine Hintergrundgrafik für ein Element festzulegen.
  • background-repeat: Die Background-repeat-Eigenschaft in CSS bestimmt, wie eine Hintergrundgrafik wiederholt wird, wenn sie nicht groß genug ist, um das gesamte Element abzudecken.
  • background-position: Die Background-position-Eigenschaft in CSS bestimmt die Ausrichtung der Hintergrundgrafik innerhalb des Elements.
  • background-size: Die Background-size-Eigenschaft in CSS bestimmt die Größe der Hintergrundgrafik in Bezug auf das Element, in dem sie platziert ist.

5) Abstände:

  • margin: Die Margin-Eigenschaft in CSS definiert den äußeren Abstand eines Elements zu seinen benachbarten Elementen. Sie bestimmt den Raum um ein Element herum.
  • padding: Die Padding-Eigenschaft in CSS bestimmt den inneren Abstand eines Elements zwischen dem Inhalt des Elements und seinem Rahmen. Sie bestimmt den Raum innerhalb des Rahmens eines Elements.

6) Rand:

  • border: Die Border-Eigenschaft in CSS definiert die Linie, die den Rahmen eines Elements umgibt. Sie ermöglicht die Festlegung von Breite, Stil und Farbe des Rahmens.
  • border-radius: Die Border-radius-Eigenschaft in CSS ermöglicht es, die Ecken eines Elements abzurunden, indem sie einen Radius für die Ecken des Rahmens festlegt. Dies verleiht dem Element eine abgerundete Erscheinung.

7) Andere:

  • z-index: Die z-index-Eigenschaft in CSS definiert die Stapelreihenfolge von positionierten Elementen, wenn sich diese überlappen. Ein Element mit einer höheren z-index-Wertung wird über einem Element mit einer niedrigeren z-index-Wertung angezeigt.
  • opacity: Die Opacity-Eigenschaft in CSS bestimmt die Transparenz eines Elements. Sie legt den Grad der Undurchsichtigkeit fest, wobei 1 für vollständig undurchsichtig und 0 für vollständig transparent steht.
  • transition: Die Transition-Eigenschaft in CSS ermöglicht das definierte Übergangsverhalten eines Elements, wenn ein bestimmtes Ereignis ausgelöst wird, wie zum Beispiel Hover oder Klick. Sie steuert die Animation von CSS-Eigenschaften über eine definierte Dauer und Verzögerung hinweg.

Beispiel für eine CSS-Deklaration:

.box-yellow {
  position: absolute;
  width: 400px;
  height: 400px;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4rem;
  color: #000000;
  background-color:#FDEA40;
  margin: 0;
  padding: 20px;
  border: 2px solid #000000;
  z-index: 1;
}

Fazit: CSS-Regeln geben Anweisungen, wie HTML-Elemente auf einer Website gestaltet werden!

Zusammenfassend kann gesagt werden, dass eine CSS-Regel eine Anweisung ist, die definiert, wie HTML-Elemente auf einer Webseite gestaltet werden sollen. Eine CSS-Regel besteht aus einem Selektor und einer oder mehreren Deklarationen. Der Selektor identifiziert die HTML-Elemente, auf die die Stilregeln angewendet werden sollen, während die Deklarationen definieren, wie diese Elemente gestaltet werden sollen, indem sie Eigenschaften / Attribute und Werte angeben. Mit CSS-Regeln können Webdesigner und Entwickler das Erscheinungsbild und Layout ihrer Webseiten genau kontrollieren und anpassen.