Wie verbinde ich externe CSS-Dateien in HTML?

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.

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>

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>

, 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 c9ccee2e6ea535a969eb3f532ad9fe89-Tag wird wie folgt geschrieben:

<style type="text/css">
    @import"mystyle.css"; 此处要注意.css文件的路径
</style>

4. HTML führt CSS-Dateien ein. Verwenden Sie einen Link, um auf externe CSS-Dateien zu verweisen.

Verwenden Sie das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag-Paar der Webseite um externe Stylesheet-Dateien einzuführen und HTML-Regeln zu verwenden, um sie einzuführen Externes CSS.

<link href="./mystyle.css" rel="stylesheet" type="text/css"/>

Hinweis: Diese Methode zum Einfügen von CSS-Dateien in HTML erfordert keine Stil-Tags, sondern verweist direkt auf externe Stile, indem ein Stil verlinkt wird. Es wird empfohlen, einen Link zu verwenden, um auf externe Stile zu verweisen CSS-Stile.

Die oben genannten vier Möglichkeiten, externe CSS-Dateien in HTML einzuführen. Weitere Informationen zu HTML und CSS finden Sie auf der chinesischen PHP-Website.

Das obige ist der detaillierte Inhalt vonWie verbinde ich externe CSS-Dateien in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!