Erkunden von CSS-Konzepten

  • 4 Minuten

CSS-Struktur

Wenn auf Ihrer HTML-Seite der gesamte Text zwischen den h1-Tags in Orange angezeigt werden soll, können Sie den folgenden CSS-Code verwenden.

h1 {
    color: orange;
}

Der obige CSS-Code beginnt mit h1. Hiermit wird die HTML ausgewählt, die Sie formatieren möchten. Das h1 im Beispiel wird als Selektor bezeichnet.

Beachten Sie den Code in den geschweiften Klammern. color: orange; deklariert, wie das ausgewählte h1-Tag formatiert werden soll. Der CSS-Code in den geschweiften Klammern { }, wie z. B. color: orange;, wird als Deklaration bezeichnet.

Die Beispieldeklaration enthält eine Eigenschaft, colordie von einem Wert getrennt ist, orangemit einem Doppelpunkt (:) und das Ende der Einstellung durch ein Semikolon (;).

Hinweis

Es ist nicht erforderlich, sich alle verfügbaren Eigenschaften und Werte in CSS zu merken. Es gibt viele Websites, auf die Sie verweisen können. Darüber hinaus bieten Tools wie vscode.dev oder Visual Studio Code Optionen für die automatische Vervollständigung, die Sie beim Erstellen eines CSS unterstützen können.

Einbetten einer CSS-Datei

Eine schnelle Möglichkeit zum Hinzufügen von Formatierungsinformationen besteht darin, sie mithilfe eines head-Attributs in den style-Tags Ihrer HTML-Seite zu platzieren. Diese Methode zählt nicht zu den Best Practices, eignet sich aber zu Lern- und Testzwecken.

Im folgenden Beispiel wird das <style>-Tag mit Formatierungsinformationen hinzugefügt, damit alle h1-Elemente grau angezeigt werden. Da dies die einzige Formatierung ist, wird der Rest des HTML-Codes mit der Standardformatierung des Browsers angezeigt.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

In einem Browser wird der Text „Welcome“ im <h1>-Tag grau angezeigt.

Screenshot der gerenderten Seite H T M L zeigt die Überschrift 1 in Grau an.

Anwenden von Formatvorlagen auf HTML mithilfe von CSS

Wenn Sie Formatvorlagen zur Hypertext Markup Language (HTML) hinzufügen, empfiehlt es sich, die Formatierung in einer separaten CSS-Datei vorzunehmen. Wenn mehrere HTML-Dateien das gleiche CSS verwenden, haben sie ein einheitliches Erscheinungsbild. Außerdem ist das Aktualisieren einer CSS-Datei einfacher, als jede einzelne HTML-Datei zu aktualisieren.

Verwenden Sie das link-Element, um auf die CSS-Datei zu verweisen.

link verfügt über die beiden Attribute rel und href. rel wird verwendet, um den Ressourcentyp zu identifizieren, auf den Sie verweisen, Stylesheets für Stylesheets. href wird verwendet, um den Pfad zur CSS-Datei zu identifizieren. Wenn sich Ihre CSS-Datei im selben Ordner wie Ihre HTML-Datei befand und den Namen style.css hatte, können Sie folgendes verwenden, um von Ihrer Seite darauf zu verweisen:

<link rel="stylesheet" href="style.css">

Jetzt haben Sie mindestens zwei Dateien, eine .html Datei und eine .css Datei. Im vorherigen Beispiel wurde eine HTML-Datei mit einer CSS verknüpft.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>