Erste Schritte mit CSS: Gestalten Sie Ihre Webseiten

CSS (Cascading Style Sheets) ist der Grundstein des Webdesigns. Damit können Sie das Erscheinungsbild Ihrer Website steuern, von Farben, Schriftarten bis hin zu Layouts und Animationen.

1. Was ist CSS?

CSS ist eine Sprache, die zur Beschreibung der Darstellung eines in HTML geschriebenen Dokuments verwendet wird. Es definiert, wie HTML-Elemente auf dem Bildschirm, auf Papier oder in anderen Medien angezeigt werden sollen.

2. Grundlegende Syntax

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock:

selector {
  property: value;
}

zum Beispiel:

body {
  background-color: lightblue;
}

Dadurch ändert sich die Hintergrundfarbe der Seite in Hellblau.

3. Selektoren

Selektoren ermöglichen es Ihnen, auf bestimmte HTML-Elemente abzuzielen, um Stile anzuwenden. Sie können Elemente auswählen nach:

• Typ: p {} zielt auf alle Absätze ab.
• Klasse: .my-class {} zielt auf Elemente mit der Klasse „my-class“ ab.
• ID: #my-id {} zielt auf Elemente mit der ID „my-id“ ab.

4. Box-Modell

Jedes HTML-Element kann man sich als eine Box vorstellen, bestehend aus:

• Inhalt: Der eigentliche Text oder das darin enthaltene Medium.
• Innenabstand: Der Abstand zwischen dem Inhalt und dem Rand.
• Rand: Der Umriss um das Element.
• Rand: Der Raum außerhalb des Randes, der Elemente trennt.

5. Gemeinsame Eigenschaften

Farbe: Farbe: rot; Ändert die Textfarbe.

• Schriftart: Schriftgröße: 16px; legt die Textgröße fest.
• Hintergrund: Hintergrundfarbe: hellgrau; ändert die Hintergrundfarbe.
• Breite/Höhe: Breite: 100 %; und Höhe: 200px; Elementabmessungen definieren.

6. Responsives Design

Verwenden Sie Medienabfragen, damit Ihre Webseiten auf allen Geräten gut aussehen. Zum Beispiel:

@media screen and (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}

Dadurch ändert sich die Hintergrundfarbe in Hellgelb, wenn die Bildschirmbreite 600 Pixel oder weniger beträgt.

Das obige ist der detaillierte Inhalt vonErste Schritte mit CSS: Gestalten Sie Ihre Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!