Heim > Web-Frontend > HTML-Tutorial > Wie verbinde ich externe CSS-Dateien in HTML?

Wie verbinde ich externe CSS-Dateien in HTML?

不言
Freigeben: 2020-09-05 09:27:12
Original
56821 Leute haben es durchsucht

Wenn wir das Frontend lernen, sollten wir wissen, dass CSS den HTML-Tags verschiedene Stile hinzufügt, um dem Browser mitzuteilen, wie der Inhalt dieser Tags angezeigt werden soll. Da CSS zum Hinzufügen verschiedener Stile zu HTML verwendet wird, stellt sich die Frage, wie man externen CSS-Text in HTML einfügt? In diesem Artikel werden Ihnen vier Methoden zur Einführung von CSS-Dateien in HTML vorgestellt. Werfen wir einen Blick auf den spezifischen Inhalt.

Wie verbinde ich externe CSS-Dateien in HTML?

So verbinden Sie externe CSS-Dateien in HTML:

1. Verwenden Sie HTML, um CSS-Dateien direkt in Divs einzuführen CSS-Stil zum Erstellen einer div+css-Webseite

<div style="border:1px red solid;">html引入css文件</div>
Nach dem Login kopieren

Hinweis: Diese Methode zum Einführen von CSS-Dateien in HTML wird nicht empfohlen, da die Seite dadurch viele Tags hat, was umständlich aussieht und nicht das widerspiegelt Vorteile von CSS: Wenn Sie diese Methode wirklich verwenden möchten, können Sie sie an Stellen verwenden, die sich nicht oft ändern, aber es wird trotzdem nicht empfohlen.

2. Verwenden Sie den integrierten Stil

, um CSS direkt in den Header zu schreiben

<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
Nach dem Login kopieren

, wenn Sie CSS-Dateien in HTML einfügen. Diese Methode zur Einführung von CSS-Dateien in HTML eignet sich für den Einsatz, wenn weniger Seiten vorhanden sind. Vorteile: Geschwindigkeit Schnell, alle CSS-Steuerelemente gelten für dieses Seiten-Tag, es gibt keine redundanten CSS-Befehle und es besteht keine Notwendigkeit, CSS-Dateien extern zu verknüpfen. Lesen Sie Stile direkt im HTML-Dokument. Nachteile: Bei vielen Seiten ist die Überarbeitung einer einzelnen Seite sehr mühsam. Die Seite sieht aufgebläht aus und das CSS kann nicht von anderem HTML referenziert werden, was zu relativ viel Code und mühsamer Wartung führt. Aber die meisten Unternehmen, die diese Methode nutzen, sind reich. Für sie ist die Anzahl der Benutzer der Schlüssel, und an ihnen mangelt es nicht. Führen Sie komplexe Wartungsarbeiten durch.

3. Verwenden Sie @import, um beim Einfügen von CSS-Dateien in HTML auf externe CSS-Dateien zu verweisen.

Fügen Sie eine unabhängige CSS-Datei ein HTML In der Datei verwendet der Importtyp CSS-Regeln, um externe CSS-Dateien einzuführen. Das