Heim >Web-Frontend >CSS-Tutorial >So importieren Sie mehrere CSS-Dateien in eine CSS-Datei
So importieren Sie mehrere CSS-Dateien in eine CSS-Datei
- 高洛峰Original
- 2016-12-16 15:48:021519Durchsuche
Zwei Methoden zum Einführen von CSS in HTML:
Der Zweck des Importierens und Verknüpfens besteht darin, eine unabhängige CSS-Datei in eine Datei einzuführen. Tatsächlich gibt es keinen großen Unterschied zwischen den beiden Die beiden sind, dass der Linktyp HTML-Tags verwendet, um externe CSS-Dateien einzuführen, während der Importtyp CSS-Regeln verwendet, um externe CSS-Dateien einzuführen. Daher ist auch ihre Syntax unterschiedlich.
1. Wenn Sie den Linkstil verwenden, müssen Sie die folgende Anweisung verwenden, um die externe CSS-Datei einzuführen:
e5fd2c34382acdd142289a7d0d3b4b6c
2. Wenn Sie Import verwenden, müssen Sie die folgende Anweisung verwenden:
162d4d502799d8ed0da5f9e19dd2968d
@import "style.css"
531ac245ce3e4fe3d50054a55f265927
```` Darüber hinaus unterscheiden sich auch die tatsächlichen Effekte nach Verwendung dieser beiden Methoden geringfügig. Bei Verwendung des Linktyps wird die CSS-Datei vor dem Laden des Hauptteils der Seite geladen, sodass die eigentliche Seite von Anfang an Stileffekte aufweist. Bei Verwendung des Importtyps wird die CSS-Datei nach der gesamten Seite geladen wird geladen Für einige Browser wird in einigen Fällen, wenn die Auslagerungsdatei relativ groß ist, zuerst eine nicht gestaltete Seite angezeigt, und dann wird der Effekt des Festlegens des Stils nach einem Flash angezeigt. Aus Sicht des Betrachters ist dies ein Nachteil der Verwendung von Import.
````Für eine größere Website möchten Sie möglicherweise alle CSS-Stile in mehreren CSS-Dateien unterbringen. Wenn Sie den Linkimport verwenden, benötigen Sie mehrere Anweisungen, um CSS separat zu importieren. dokumentieren. Wenn Sie die Klassifizierung von CSS-Dateien anpassen möchten, müssen Sie gleichzeitig die HTML-Dateien anpassen. Dies ist ein Nachteil für Wartungsarbeiten. Wenn Sie die Importmethode verwenden, können Sie nur eine allgemeine CSS-Datei importieren und dann andere unabhängige CSS-Dateien in diese Datei importieren, während die Link-Methode nicht über diese Funktion verfügt.
````Der Vorschlag hier lautet also: Wenn Sie nur eine CSS-Datei einführen, verwenden Sie die Link-Methode. Wenn Sie mehrere CSS-Dateien einführen müssen, verwenden Sie zuerst die Link-Methode, um eine „Verzeichnis“-CSS-Datei einzuführen „Verzeichnis“ CSS-Datei und verwenden Sie dann den Import, um andere CSS-Dateien einzuführen.
````Aber wenn Sie dynamisch entscheiden möchten, welche CSS-Datei Sie über JavaScript importieren möchten, müssen Sie dazu eine Verknüpfung verwenden.
Wie importiere ich mehrere CSS-Dateien in eine CSS-Datei?
Antwort:
Sie können drei CSS-Stylesheets schreiben:
css_red.css, css_blue.css, css_green.css
so dass Sie einen Hauptstil schreiben können .css Installieren Sie alle drei Stylesheets:
@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";
Beim Aufruf, Rufen Sie einfach style.css auf.
Spezifischer Code:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>字体属性</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p class="red">红色</p> <p class="blue">蓝色</p> <p class="green">绿色</p> </body> </html>
style.css
@charset "utf-8"; @import "css_red.css"; @import "css_blue.css"; @import "css_green.css";
css_red.css
@charset "utf-8";
.red {
color:red;
}css_blue.css
@charset "utf-8";
.blue{
color:blue;
}css_green.css
@charset "utf-8";
.green{
color:green;
}Weitere verwandte Artikel zum Importieren mehrerer CSS-Dateien in eine CSS-Datei finden Sie unter Bitte folgen Sie der chinesischen PHP-Website!