Heim > Artikel > Web-Frontend > So fügen Sie CSS in eine HTML-Datei ein
So fügen Sie CSS in eine HTML-Datei ein
- 藏色散人Original
- 2021-03-22 11:22:4229716Durchsuche
So fügen Sie CSS in eine HTML-Datei ein: 1. Fügen Sie CSS direkt zum Style-Attribut im HTML-Tag hinzu. 2. Schreiben Sie CSS unter das Style-Tag im HTML-Header. 3. Verwenden Sie das Head-Tag, um externe CSS-Dateien einzuführen. 4. Verwenden Sie CSS-Regeln, um externe CSS-Dateien einzuführen.
Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer
So führen Sie CSS in HTML ein
Es gibt 4 Möglichkeiten, CSS in HTML einzuführen. Zwei davon dienen dazu, CSS-Code direkt in die HTML-Datei einzufügen, und die anderen beiden dienen dazu, externe CSS-Dateien einzuführen. Werfen wir einen Blick auf diese Methoden und ihre Vor- und Nachteile.
Inline-Methode
Die Inline-Methode bezieht sich auf das direkte Hinzufügen von CSS zum Stilattribut im HTML-Tag.
Beispiel:
<div style="background: red"></div>
Dies ist normalerweise eine schlechte Schreibweise, sie ändert nur den Stil des aktuellen Tags. Wenn Sie möchten, dass mehrere dc6dce4a544fdca2df29d5ac0ea9906b denselben Stil haben, müssen Sie ihn für jeden dc6dce4a544fdca2df29d5ac0ea9906b wiederholen ; ; Den gleichen Stil hinzufügen. Wenn Sie einen Stil ändern möchten, müssen Sie den Code in allen Stilen ändern. Offensichtlich führt die Inline-Einführung von CSS-Code dazu, dass der HTML-Code ausführlicher wird und die Wartung der Webseite erschwert wird.
Einbettungsmethode
Einbettungsmethode bezieht sich auf das Schreiben von CSS-Code unter dem c9ccee2e6ea535a969eb3f532ad9fe89-Tag.
Beispiel:
<head>
<style>
.content {
background: red;
}
</style>
</head>Embedded CSS ist nur für die aktuelle Webseite gültig. Da sich der CSS-Code in der HTML-Datei befindet, wird der Code konzentrierter, was normalerweise beim Schreiben von Vorlagen-Webseiten von Vorteil ist. Weil jemand, der sich den Vorlagencode ansieht, die HTML-Struktur und die CSS-Stile auf einen Blick erkennen kann. Da eingebettetes CSS nur für die aktuelle Seite gültig ist, führt das Schreiben auf diese Weise zu Coderedundanz und ist der Wartung nicht förderlich, wenn mehrere Seiten denselben CSS-Code einführen müssen.
Link-Methode
Link-Methode bezieht sich auf die Verwendung des 93f0f5c25f18dab9d176bd4f6de5d30e-Tags im HTML-Header, um externe CSS-Dateien einzuführen.
Beispiel:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>Dies ist die gebräuchlichste und empfohlene Methode zur Einführung von CSS. Bei diesem Ansatz existiert der gesamte CSS-Code nur in einer einzigen CSS-Datei und ist daher gut wartbar. Und der gesamte CSS-Code ist nur in der CSS-Datei vorhanden. Die CSS-Datei wird beim ersten Laden eingeführt. Wenn Sie in Zukunft die Seite wechseln, müssen Sie nur noch die HTML-Datei laden.
Import-Methode
Import-Methode bezieht sich auf die Verwendung von CSS-Regeln zum Einführen externer CSS-Dateien.
Beispiel:
<style>
@import url(style.css);
</style>Vergleichen Sie die Link-Methode und die Import-Methode
Die Link-Methode (unten durch Link ersetzt) und die Import-Methode (unten durch @import ersetzt) sind beide Möglichkeiten, externe CSS-Dateien einzuführen .-Methode und erklären Sie, warum @import nicht empfohlen wird.
link gehört zu HTML und externe Dateien werden über das href-Attribut im 2cdf5bf648cf2f33323966d7f58a7f3f-Tag eingeführt, während @import zu CSS gehört, daher sollte die Importanweisung in CSS geschrieben werden Andernfalls kann die externe Datei nicht korrekt importiert werden.
@import ist ein Konzept, das nur in CSS2.1 vorkommt. Wenn die Browserversion also niedriger ist, kann die externe Stildatei nicht importiert werden richtig;
Wenn die HTML-Datei geladen wird, wird die durch den Link referenzierte Datei geladen, und die von @import referenzierte Datei wartet, bis die Seite vollständig heruntergeladen ist, bevor sie geladen wird.
Zusammenfassung: Wir sollten versuchen, sie zu verwenden das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag, um externe CSS-Dateien zu importieren, und die anderen drei Methoden zu vermeiden oder weniger zu verwenden.
【Empfohlenes Lernen: CSS-Video-Tutorial】
Das obige ist der detaillierte Inhalt vonSo fügen Sie CSS in eine HTML-Datei ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!