Aufbau und Syntax

Das Diagramm rechts zeigt zwei verschiedene Methoden oder Syntaxen zum Schreiben von CSS-Code. Die erste Syntax zeigt CSS als Regelsatz angewendet, während die zweite es als Inline-Stil geschrieben zeigt. Zwei verschiedene Methoden zum Schreiben von CSS können zunächst etwas einschüchternd wirken, aber es ist nicht so schlimm, wie es aussieht!

Beide Methoden weisen gemeinsame Merkmale in ihrer Anatomie auf. Beachten Sie, dass beide Syntaxen eine Deklaration enthalten. Deklarationen sind der Kern von CSS. Sie wenden einen Stil auf das ausgewählte Element an. Hier wurde das <p>-Element in beiden Syntaxen ausgewählt und so gestaltet, dass der Text in Blau angezeigt wird.

Das Verständnis, dass eine Deklaration zum Stylen eines ausgewählten Elements verwendet wird, ist der Schlüssel zum Erlernen des Stylens von HTML-Dokumenten mit CSS! Die folgenden Begriffe erklären jedes der Labels im Diagramm rechts.

Regelsatzbedingungen (CSS Datei):

• Selektor-Der Anfang des Regelsatzes, der zum Anvisieren des zu formatierenden Elements verwendet wird.

• Deklarationsblock-Der Code zwischen (und einschließlich) den geschweiften Klammern ({ }), der die CSS-Deklaration(en) enthält.

• Deklaration-Der Gruppenname für ein Eigenschafts- und Wertepaar, das einen Stil auf das ausgewählte Element anwendet.

• Eigenschaft-Der erste Teil der Deklaration, der angibt, welche visuelle Eigenschaft des Elements geändert werden soll.

• Wert-Der zweite Teil der Deklaration, der den Wert der Eigenschaft angibt.

Inline-Style-Begriffe (in HTML Datei):

• Eröffnungstag: Der Anfang eines HTML-Elements. Dies ist das Element, das formatiert wird.

• Attribut – Das Stilattribut wird verwendet, um einem HTML-Element CSS-Inline-Stile hinzuzufügen.

• Deklaration: Der Gruppenname für ein Eigenschafts- und Wertepaar, das einen Stil auf das ausgewählte Element anwendet.

• Eigenschaft – Der erste Teil der Deklaration, der angibt, welche visuelle Eigenschaft des Elements geändert werden soll.

• Wert: Der zweite Teil der Deklaration, der den Wert der Eigenschaft angibt.

Machen Sie sich keine Sorgen, dass Sie sich all das merken müssen – Sie werden im Verlauf des Kurses immer mehr davon lernen! Sie können diese Übung später gerne als Referenz verwenden.

Es ist wichtig zu wissen, dass Inline-Styles eine schnelle Möglichkeit sind, ein HTML-Element direkt zu stylen, aber beim Erstellen von Websites selten verwendet werden. Es kann jedoch Situationen geben, in denen Inline-Styling erforderlich ist. Daher ist es gut zu wissen, wie es funktioniert und wie man es im HTML-Code erkennt. Bald lernen Sie, wie Sie CSS-Code richtig hinzufügen!

Der CSS-Code im obigen Beispiel ändert die Farbe des gesamten Absatztexts in Rot und ändert auch die Größe des Texts auf 20 Pixel. Beachten Sie, dass die Syntax des CSS-Codes (größtenteils) der Syntax entspricht, die Sie für das Inline-Styling verwendet haben. Der Hauptunterschied besteht darin, dass Sie angeben können, auf welche Elemente das Styling angewendet werden soll.

Entwickler vermeiden das Vermischen von Code, indem sie HTML- und CSS-Code in separaten Dateien speichern (HTML-Dateien enthalten nur HTML-Code und CSS-Dateien enthalten nur CSS-Code).

Sie können ein externes Stylesheet erstellen, indem Sie die Dateinamenerweiterung .css verwenden, wie folgt: style.css

Mit einem externen Stylesheet können Sie den gesamten CSS-Code schreiben, der zum Stylen einer Seite erforderlich ist, ohne die Lesbarkeit und Wartbarkeit Ihrer HTML-Datei zu beeinträchtigen.

Die Verwendung eines relativen Pfads ist eine gängige Methode zum Verknüpfen eines Stylesheets.

Wenn wir verstehen, wie wir CSS-Code in unserem HTML-Datei einbinden, und einige der wichtigsten Begriffe lernen, sind wir auf dem besten Weg, spektakuläre Websites mit HTML und CSS zu erstellen.

Lassen wir uns noch einmal wiederholen, was wir bisher gelernt haben:

• Die grundlegende Anatomie der CSS-Syntax, geschrieben sowohl für Inline-Stile als auch für Stylesheets.

• Einige häufig verwendete CSS-Begriffe wie Regelsatz, Selektor und Deklaration.

• CSS-Inline-Styles können mit dem Style-Attribut in den öffnenden HTML-Tag geschrieben werden.

• Zum Formatieren von HTML können zwar Inline-Stile verwendet werden, dies ist jedoch nicht die beste Vorgehensweise.

• Ein internes Stylesheet wird mithilfe des <style>-Elements innerhalb des <head>-Elements einer HTML-Datei geschrieben.

• Interne Stylesheets können zum Formatieren von HTML verwendet werden, sind aber ebenfalls keine bewährte Vorgehensweise.

• Ein externes Stylesheet trennt CSS-Code von HTML, indem es die Dateierweiterung .css verwendet.

• Wenn es um die Verwendung von HTML und CSS geht, sind externe Stylesheets die beste Lösung.

• Externe Stylesheets werden über das Element <link> mit HTML verknüpft.

Nehmen wir dieses Wissen mit in die nächste Lektion, in der wir lernen, wie wir zu formatierende HTML-Elemente auswählen!