Es gibt 4 Möglichkeiten, CSS in HTML einzubinden. Zwei davon bestehen darin, CSS-Code direkt in die HTML-Datei einzufügen, und die anderen beiden darin, externe CSS-Dateien einzubinden. Sehen wir uns diese Methoden und ihre Vor- und Nachteile an.

Inline-Style

Inline-Stil bezeichnet das Hinzufügen von CSS direkt imstyle-Attribut eines HTML-Tags.

Beispiel:

<div style="background: red"></div>

Dies ist normalerweise eine sehr schlechte Schreibweise. Sie kann nur den Stil des aktuellen Tags ändern. Wenn mehrere<div>-Tags denselben Stil haben sollen, müssen Sie jedem<div>-Tag. Wenn Sie einen Stil ändern möchten, müssen Sie den gesamten Code in `style` erneut ändern. Offensichtlich macht das Einfügen von CSS-Code inline den HTML-Code weitschweifig und die Webseite schwer zu pflegen.

Eingebetteter Stil

Eingebetteter Stil bedeutet, CSS-Code im HTML-Kopf im<style>`<style>`-Tag zu schreiben.

Beispiel:

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

Das eingebettete CSS ist nur für die aktuelle Webseite wirksam. Da sich der CSS-Code in der HTML-Datei befindet, ist der Code konzentrierter, was normalerweise vorteilhaft ist, wenn wir Vorlagen-Webseiten schreiben. Da Personen, die den Vorlagencode ansehen, die HTML-Struktur und die CSS-Stile auf einen Blick sehen können. Da das eingebettete CSS nur für die aktuelle Seite wirksam ist, führt das Schreiben auf diese Weise zu Coderedundanz und ist nicht wartungsfreundlich, wenn mehrere Seiten denselben CSS-Code einbinden müssen.

Verknüpfter Stil

Verknüpfter Stil bedeutet, dass man den<head>`<link>`-Tag im HTML-Kopf verwendet, um eine externe CSS-Datei zu importieren.

Beispiel:

<head>
    <link rel="stylesheet" type="text/css" href="style.css.html">
</head>

Dies ist die gebräuchlichste und am meisten empfohlene Methode, CSS einzubinden. Bei dieser Methode existiert der gesamte CSS-Code nur in einer separaten CSS-Datei, daher ist die Wartbarkeit gut. Außerdem existiert der gesamte CSS-Code nur in der CSS-Datei, und die CSS-Datei wird beim ersten Laden eingebunden. Wenn später zwischen Seiten gewechselt wird, muss nur die HTML-Datei geladen werden.

Importierter Stil

Importierter Stil bedeutet, dass eine CSS-Regel verwendet wird, um eine externe CSS-Datei zu importieren.

Beispiel:

<style>
    @import url(style.css);
</style>

Vergleich von verknüpftem Stil und importiertem Stil

Verknüpfter Stil (im Folgenden als@import`@import` bezeichnet) sind beide Möglichkeiten, externe CSS-Dateien einzubinden. Vergleichen wir diese beiden Methoden und erklären, warum die Verwendung von `@import` nicht empfohlen wird.@import。

  • `link` gehört zu HTML und importiert über<link>das `href`-Attribut im Tag externe Dateien, während@import`@import` zu CSS gehört, daher sollte die Import-Anweisung in CSS geschrieben werden. Beachten Sie, dass die Import-Anweisung am Anfang des Stylesheets stehen sollte, sonst kann die externe Datei nicht korrekt importiert werden.

  • @import`@import` ist ein Konzept, das erst in CSS2.1 auftauchte. Daher können externe Stildateien nicht korrekt importiert werden, wenn die Browserversion niedrig ist.

  • Wenn die HTML-Datei geladen wird, werden die von `link` referenzierten Dateien gleichzeitig geladen, während@importvon `@import` referenzierte Dateien geladen werden, nachdem die Seite vollständig heruntergeladen wurde.

Zusammenfassung: Wir sollten versuchen,<link>das `link`-Tag zu verwenden, um externe CSS-Dateien zu importieren, und die anderen drei Methoden vermeiden oder seltener verwenden.

Quelle: https://segmentfault.com/a/1190000003866058