Wenn Sie das Erscheinungsbild Ihrer Website ändern und ein einheitliches Design für alle Seiten erstellen möchten, ist das Anschließen einer externen CSS-Datei eine gute Möglichkeit, dies zu erreichen. Das Styling von Webseiten hilft, die Website attraktiver, benutzerfreundlicher und professioneller zu machen.
Das Verbinden einer externen CSS-Datei mit einer Seite ist ein einfacher Vorgang. Sie müssen zuerst eine CSS-Datei erstellen, die den Code mit den Stilen enthält, und diese Datei dann mit Ihrer HTML-Seite verbinden. Auf diese Weise wird der gesamte CSS-Code in einer separaten Datei gespeichert, wodurch das Laden der Seite beschleunigt und der Prozess der Änderung erleichtert wird.
Verwenden Sie ein Tag, um eine externe CSS-Datei mit Ihrer HTML-Seite zu verbinden. Dieses Tag ist Teil des Seitenkopfes und befindet sich in einem Abschnitt . Es zeigt auf die Formatvorlagendatei, die auf diese Seite angewendet werden soll. Die externe CSS-Datei muss im angegebenen Pfad im Dateisystem des Servers verfügbar sein. Als nächstes betrachten wir ein Beispiel für das Verbinden einer externen CSS-Datei mit einer HTML-Seite und erklären alle Schritte dieses Prozesses.
Verbinden einer externen CSS-Datei mit einer Seite: wie man es richtig macht
Um eine Webseite mit CSS zu formatieren, müssen Sie eine externe CSS-Datei mit Ihrer HTML-Seite verbinden. Befolgen Sie diese Schritte, um die externe CSS-Datei richtig zu verbinden:
| Schritt 1: | Erstellen Sie eine neue Datei mit der Erweiterung .css und speichern Sie es im selben Ordner, in dem sich Ihre HTML-Seite befindet. Benennen Sie zum Beispiel die Datei "styles.css". |
| Schritt 2: | Öffnen Sie Ihre HTML-Seite mit einem beliebigen Texteditor. |
| Schritt 3: | Fügen Sie innerhalb des Tags das folgende Link-Element hinzu: |
| Schritt 4: | Geben Sie im href-Attribut den Pfad zu Ihrer CSS-Datei an. Zum Beispiel, wenn Ihre CSS-Datei "styles.css" und befindet sich im selben Ordner wie Ihre HTML-Seite, verwenden Sie den Wert styles.css". Wenn sich Ihre CSS-Datei in einem anderen Ordner befindet, geben Sie den entsprechenden Pfad an. |
Jetzt wird Ihre HTML-Seite eine externe CSS-Datei einbinden, und alle in dieser Datei definierten Stile werden auf Ihre Seite angewendet.
Vorteile der Verwendung einer externen CSS-Datei
Die Verwendung einer externen CSS-Datei beim Entwerfen einer Webseite hat mehrere Vorteile:
| 1. | Vereinfachung der Codestruktur: Sie können eine externe CSS-Datei verwenden, um alle Stile an einer Stelle zu platzieren, wodurch der Code der Seite klarer und lesbarer wird. |
| 2. | Wiederverwendung von Stilen: Die Verwendung externer CSS-Dateien ermöglicht die Verwendung derselben Stile für verschiedene Seiten der Website, was die Unterstützung und das Ändern des Designs erheblich vereinfacht. |
| 3. | Leistungsverbesserung: wenn Sie eine externe CSS-Datei verwenden, lädt der Browser sie nur einmal herunter und kann sie dann für nachfolgende Seitenaufrufe zwischenspeichern, was die Ladezeit verkürzt und die Geschwindigkeit der Website erhöht. |
| 4. | Einfache Entwicklung: eine externe CSS-Datei ermöglicht es dem Entwickler, sich auf die Gestaltung und Gestaltung der Seite zu konzentrieren, ohne von der Erstellung und Unterstützung von Stilen im HTML-Code selbst abgelenkt zu werden. |
| 5. | Einfaches Design ändern: wenn Sie eine externe CSS-Datei verwenden, genügt es, den Stil nur an einer Stelle zu ändern, um ihn auf allen Seiten zu aktualisieren, auf denen die Datei verwendet wird. |
Als Ergebnis ist die Verwendung einer externen CSS-Datei auf einer Seite eine effektive und bequeme Möglichkeit, das Design zu stylen und zu verwalten, wodurch der Support und die technische Flexibilität der Website verbessert werden können.
Schritte zum Verbinden einer externen CSS-Datei mit einer HTML-Seite
Führen Sie die folgenden Schritte aus, um Stile aus einer externen CSS-Datei auf eine HTML-Seite anzuwenden:
1. Erstellen Sie eine Stildatei
Erstellen Sie eine neue Datei mit der Erweiterung .css wie "styles.css". In dieser Datei können Sie alle erforderlichen Stile für Ihre HTML-Seite definieren.
2. Speichern Sie die Stildatei
Speichern Sie die Stildatei im selben Ordner, in dem sich Ihre HTML-Datei befindet, damit sie leicht zugänglich ist.
3. Verknüpfen Sie die Stylesheet-Datei mit der HTML-Seite
Fügen Sie im Abschnitt Ihrer HTML-Seite das folgende Tag hinzu:
Wo "styles.css" ist der Name der Stildatei, die Sie im ersten Schritt erstellt haben.
4. Speichern und starten Sie die HTML-Seite
Speichern Sie alle Änderungen in Ihrer HTML-Datei und öffnen Sie sie in einem Webbrowser. Jetzt sollten Ihre Stile aus der externen CSS-Datei auf Ihre HTML-Seite angewendet werden.
Festlegen des Pfads für eine externe CSS-Datei
Um einer Seite eine externe CSS-Datei hinzuzufügen, müssen Sie ein Link-Element mit einem rel-Attribut verwenden, das den Beziehungstyp angibt, und einem href-Attribut, das den Dateipfad angibt.
- Erstellen Sie eine neue Datei mit der Erweiterung .css mit den gewünschten Stilen.
- Öffnen Sie die HTML-Datei, mit der Sie das CSS verbinden möchten.
- Fügen Sie im Head-Tag das folgende Link-Element hinzu:
Hier gibt das href-Attribut den Pfad zur CSS-Datei relativ zum aktuellen HTML der Seite an. Wenn sich die CSS-Datei im selben Ordner wie die HTML-Datei befindet, genügt es, nur den Dateinamen anzugeben. Wenn sich die CSS-Datei in einem anderen Ordner befindet, müssen Sie einen Pfad relativ zum aktuellen HTML der Seite angeben.
Überprüfen, ob die externe CSS-Datei korrekt angeschlossen ist
Nachdem Sie eine externe CSS-Datei mit den gewünschten Stilen erstellt haben, müssen Sie sie mit der HTML-Seite verbinden. Führen Sie die folgenden Schritte aus, um zu überprüfen, ob die Datei ordnungsgemäß verbunden ist:
- Stellen Sie sicher, dass sich Ihre CSS-Datei im selben Verzeichnis wie die HTML-Datei befindet. Wenn dies nicht der Fall ist, müssen Sie den richtigen Dateipfad im Attribut "href" des Tags angeben.
- Öffnen Sie Ihre HTML-Datei in einem beliebigen Texteditor und suchen Sie nach dem Tag .
- Fügen Sie innerhalb des Tags das folgende Tag hinzu, um Ihre CSS-Datei zu verbinden:
- Speichern Sie die Änderungen in der HTML-Datei und öffnen Sie sie in einem Webbrowser.
- Öffnen Sie die Webbrowser-Entwicklertools (normalerweise durch Drücken der Taste F12 aufgerufen) und klicken Sie auf die Registerkarte "Netzwerk" oder "Netzwerk".
- Geben Sie in der Suche den Namen Ihrer CSS-Datei ein. Wenn die Datei erfolgreich heruntergeladen wurde, sollte sie in der Dateiliste auf der Registerkarte "Netzwerk" oder "Netzwerk" mit dem Statuscode 200 OK angezeigt werden.
Wenn Sie den Namen Ihrer CSS-Datei in der Liste der Dateien mit dem Statuscode 200 OK sehen, bedeutet dies, dass Ihre externe CSS-Datei korrekt angeschlossen wurde. Sie können zusätzlich die Funktionsweise der aus dieser Datei angewendeten Stile auf Ihre HTML-Seite überprüfen.
Optionen zum Verbinden einer CSS-Datei mit einer HTML-Seite
Um das Aussehen einer HTML-Seite zu ändern, können Sie eine CSS-Datei (Cascading Style Sheets) an die HTML-Seite anhängen. Dadurch können Sie der Seite Stile, Farben, Schriftarten und andere Designelemente hinzufügen. Hier sind einige Möglichkeiten, eine CSS-Datei mit einer HTML-Seite zu verbinden:
| Art | Die Beschreibung |
|---|---|
| Externe Verbindung | Der einfachste Weg. Erstellen Sie eine separate CSS-Datei mit der Erweiterung ".css". Verwenden Sie dann das Tag im Block der HTML-Seite, indem Sie das Attribut "href" mit dem Pfadwert Ihrer CSS-Datei angeben. |
| Interner Anschluss | Wenn Sie einen kleinen CSS-Code haben, können Sie das Tag im HTML-Seitenblock verwenden, um den CSS-Code direkt in die Seite einzubetten. |
| Integrierte Verbindung | Verwenden Sie für kleine Stile das Attribut "style" direkt in den Elementen einer HTML-Seite, um einzelne Stile zu einzelnen Elementen hinzuzufügen. |
Jede dieser Methoden hat ihre eigenen Vorteile und eignet sich für verschiedene Situationen. Wählen Sie je nach Ihren Bedürfnissen und Vorlieben eine geeignete Methode aus. Wenn Sie eine CSS-Datei anschließen, können Sie schöne und attraktive Webseiten erstellen.
Anwenden von Stilen mithilfe einer externen CSS-Datei
Um eine externe CSS-Datei zu verbinden, müssen Sie ein Tag verwenden und Attribute rel und href. Attribut rel gibt den Typ der zu verbindenden Datei und das Attribut an href enthält den Pfad zur CSS-Datei.
Beispiel für das Verbinden einer externen CSS-Datei:
Standardmäßig wird die angehängte CSS-Datei auf die gesamte Seite angewendet. Sie können jedoch auch bestimmte Stile für ein Element oder eine Gruppe von Elementen angeben, indem Sie die entsprechenden Klassen oder IDs angeben.
Beispiel für das Anwenden einer Klasse auf ein Element:
Текст с выделением
In einer angehängten CSS-Datei können Sie Stile für eine Klasse definieren .highlight wie folgt:
.highlight
Also ein Element mit einer Klasse highlight wird einen gelben Hintergrund und fetthaltigen Text haben.
Sie können Stile auch auf Elemente mit einem bestimmten Tag oder einer bestimmten ID anwenden.
Beispiel für das Anwenden eines Stils auf Elemente mit einem bestimmten Tag:
Текст в параграфе
Текст с выделениемIn einer angehängten CSS-Datei können Sie die Stile für das Tag wie folgt definieren:
Der Text im Absatz wird daher in einer Schriftart mit einer Größe von 18 Pixeln angezeigt.
Beispiel für das Anwenden eines Stils auf Elemente mit einer bestimmten ID:
Основной текст
In einer angehängten CSS-Datei können Sie Stile für ein Element mit einer ID definieren main-text wie folgt:
#main-text
Auf diese Weise wird der Haupttext in Blau angezeigt.
Mit einer externen CSS-Datei können Sie leicht Stile auf Ihrer Webseite hinzufügen und ändern, um sie attraktiver und lesbarer zu machen.
Beispielübersicht zum Verbinden einer externen CSS-Datei mit einer Seite
Schritt 1: Erstellen Sie eine Stildatei mit der Erweiterung .css zum Beispiel "style.css".
Schritt 2: Öffnen Sie die HTML-Datei, in die Sie die externe CSS-Datei einbinden möchten.
Schritt 3: Fügen Sie im Abschnitt das folgende Tag hinzu:
Schritt 4: Speichern Sie die HTML-Datei und öffnen Sie sie in einem Webbrowser. Jetzt wird die externe CSS-Datei auf Ihre Seite angewendet.
Dies ist nur ein Beispiel für das einfache Verbinden einer externen CSS-Datei mit einer Seite. Sie können mehrere CSS-Dateien erstellen und sie in verschiedenen HTML-Dateien einbinden, um die Struktur Ihrer Website zu organisieren und verschiedene Stile auf verschiedene Seiten anzuwenden.
