Heim > Web-Frontend > CSS-Tutorial > Einführung in CSS

Einführung in CSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2024-08-21 06:36:32
Original
1008 Leute haben es durchsucht

Introduction to CSS

Vorlesung 1: Einführung in CSS

Willkommen zur ersten Vorlesung von „Basic to Brilliance“ – Ihre Reise zur Beherrschung von CSS beginnt hier!


Was ist CSS?

CSS oder Cascading Style Sheets ist die Sprache, die zur Beschreibung der Darstellung einer Webseite verwendet wird. Während HTML die Struktur und den Inhalt bereitstellt, sorgt CSS dafür, dass die Webseiten attraktiv und benutzerfreundlich aussehen. Es steuert das Layout, die Farben, Schriftarten, Abstände und vieles mehr.

Warum ist CSS wichtig?

  • Trennung von Belangen: Mit CSS können Sie Inhalte (HTML) von Präsentation (CSS) trennen, wodurch Ihr Code sauberer und einfacher zu warten ist.
  • Konsistenz: Sie können ein einheitliches Design auf mehreren Webseiten anwenden, indem Sie eine einzelne CSS-Datei verknüpfen.
  • Responsive Design: CSS ist für die Erstellung von Websites unerlässlich, die auf allen Geräten, vom Desktop bis zum Smartphone, gut aussehen.

Grundlegende CSS-Syntax

CSS besteht aus Regeln, die auf HTML-Elemente abzielen. Jede Regel besteht aus einem Selektor und einem Deklarationsblock.

selector {
  property: value;
}
Nach dem Login kopieren
  • Selektor: Zielt auf das HTML-Element ab, das Sie formatieren möchten.
  • Eigenschaft: Der Aspekt des Elements, das Sie ändern möchten (z. B. Farbe, Schriftgröße).
  • Wert: Der spezifische Wert, den Sie auf die Immobilie anwenden möchten.
Beispiel:

Angenommen, Sie möchten die Farbe aller

-Elemente ändern. Elemente zu Blau.

HTML:

<h1>Hello, World!</h1>
Nach dem Login kopieren

CSS:

h1 {
  color: blue;
}
Nach dem Login kopieren

Diese einfache Regel verwandelt den Text in alle

Elemente zu Blau.

CSS zu HTML hinzufügen

Es gibt drei Hauptmethoden, um CSS zu Ihrem HTML-Dokument hinzuzufügen:

  1. Inline-CSS:Direkt im HTML-Element.
   <h1 style="color: blue;">Hello, World!</h1>
Nach dem Login kopieren
  1. Internes CSS: Innerhalb eines