Grundlegende CSS-Syntax

3.1 Regeln (Rules)

Die wichtigsten Elemente von CSS umfassen Regeln (rules), Eigenschaften (properties) und Werte (values). Das Verständnis der grundlegenden CSS-Syntax ist der Schlüssel zum Erstellen attraktiver und funktionaler Webseiten.

Wichtige CSS-Elemente:

• Regeln (Rules)
• Selektoren (Selectors)
• Eigenschaften (Properties)
• Werte (Values)

Regeln (Rules)

CSS-Regeln bestehen aus einem Selektor und einem Deklarationsblock. Der Selektor gibt an, auf welche HTML-Elemente die Styles angewendet werden, und der Deklarationsblock enthält eine oder mehrere Eigenschaften und deren Werte. Normalerweise besteht er aus einem oder mehreren Eigenschaften und Werten, eingeschlossen in geschweiften Klammern {}.

Beispiel:

    
      selektor {
        eigenschaft: wert;
        eigenschaft: wert;
      }
    
  

Beispiel für eine Überschrift:

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

In diesem Beispiel ist h1 der Selektor, color und font-size sind Eigenschaften, und blue und 24px sind die Werte dieser Eigenschaften.

3.2 Eigenschaften und Werte

CSS bietet eine breite Palette von Eigenschaften, die zur Verwaltung des Erscheinungsbilds von Elementen verwendet werden können. Jede Eigenschaft hat einen oder mehrere Werte, die bestimmen, wie diese Eigenschaft angewendet wird.

Wichtige Eigenschaften und ihre Werte:

Farbe und Hintergrund:

• color: legt die Textfarbe fest
• background-color: legt die Hintergrundfarbe eines Elements fest

Beispiel:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Schriftart:

• font-family: definiert die Schriftfamilie
• font-size: legt die Schriftgröße fest
• font-weight: definiert die Schriftstärke

Beispiel:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Text:

• text-align: richtet den Text innerhalb eines Elements aus
• text-decoration: fügt Effekte zu Text hinzu, z. B. Unterstreichungen

Beispiel:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

Abstände und Grenzen:

• margin: legt äußere Abstände um ein Element fest
• padding: legt innere Abstände innerhalb eines Elements fest
• border: definiert die Grenze eines Elements

Beispiel:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Größen und Position:

• width und height: legen die Breite und Höhe eines Elements fest
• position: bestimmt die Positionierungsart eines Elements

Beispiel:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

Du solltest:

• die Standard-Eigenschaften der Elemente behalten
• die Standard-Werte dieser Eigenschaften behalten
• die einzigartigen Eigenschaften verschiedener Elemente behalten
• wissen, wie diese Eigenschaften in der Praxis funktionieren
• wissen, wie diese Eigenschaften sich gegenseitig beeinflussen.

Am besten geht das durch Praxis – viel CSS schreiben und sehen, wie es funktioniert.