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