So importieren Sie CSS-Dateien

So führen Sie CSS-Dateien ein: 1. Einführung in die Inline-Methode, Festlegen des CSS-Stils im Stilattribut des Tags. 2. Einführung in die eingebettete Methode, Schreiben des CSS-Stils in das Stil-Tag der Webseite Externe CSS-Dateien; 4. Verwenden Sie @import, um auf externe CSS-Dateien zu verweisen.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wie importiere ich CSS-Dateien? Mehrere Möglichkeiten, CSS-Dateien in HTML einzuführen

Generell gibt es die folgenden vier Methoden:

1. Inline: Auch Inline genannt, der CSS-Stil wird im Stilattribut der Marke festgelegt. Diese Methode spiegelt nicht die Vorteile von CSS wider

2. Eingebettet: Konzentrieren Sie die CSS-Stile im Tag-Paar c9ccee2e6ea535a969eb3f532ad9fe899c3bca370b5104690d9ef395f2c5f8d1 ;

3. Linktyp: Der vierte Importtyp wird als externer Typ oder externer Linktyp bezeichnet. Verwenden Sie einen Link, um auf externe CSS-Dateien zu verweisen.

4. Importtyp: Verwenden Sie @import, um auf externe CSS-Dateien zu verweisen. -------------------------------------------------- A

Inline-Stil ist die einfachste und bequemste Art, mit dem Schreiben zu beginnen, aber diese Schreibweise spiegelt überhaupt nicht die Vorteile von CSS wider, wie folgt:

791e87eb690558b69fd05db4db49382aI am write inline16b28748ea4df4d9c2150843fecfba6854bdf357c58b8a65c66d7c19c8e4d114

Wenn es viele Tags auf einer Seite gibt, wird diese Schreibmethode nicht gut aussehen und es scheint sehr umständlich und eintönig zu sein, daher wird es nicht empfohlen!

------------------------------------------------ -----B

Embedded ist auch eine gute Wahl, wenn es relativ wenige Seiten gibt, aber wenn es viele Seiten gibt, die einem Projekt entsprechen, wird dies zweifellos etwas katastrophal sein. Sie müssen den Stil ändern, vielleicht eine große Ähnliche Seite

, aber sie müssen einzeln wie folgt geändert werden:

<span style="font-size:14px;"><style type="text/css"></span>
<span style="font-size:14px;">#demo{
position:absoulte;
left: 20px;
top:50px;
width:300px;
height: 50px;
border: solid 1px red;
padding-left: 20px;
color:gray;
font-size: 20px;
line-height: 50px;
text-align: center;</span>
<span style="font-size:14px;">}
</style></span>

Diese Schreibmethode vermeidet bis zu einem gewissen Grad das „stillose“ Phänomen der Seite. Die Seite wird nach dem Laden des CSS gerendert ...

-- ----------------- ---- -CD

Beim externen CSS-Stil wird der CSS-Code in eine separate externe Datei geschrieben. Diese CSS-Stildatei hat die Erweiterung „.css“ und befindet sich im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag ;-Tag) Verwenden Sie das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag, um die CSS-Stildatei zu verknüpfen, was die Vorteile von CSS maximiert. Natürlich muss die Benennung der „.css“-Datei eine bestimmte Bedeutung haben, um spätere Änderungen zu erleichtern Verbesserung der Benutzerfreundlichkeit, wie zum Beispiel „main.css“...

<link href="main.css" rel="stylesheet" style="text/css"/>

Das rel="stylesheet" type="text/css" ist eine feste Schreibmethode, die nicht geändert werden kann

Das durch @import eingeführte Format ist wie folgt:

<style type="text/css">
@import url(demo.css);
</style>

Auf diese Weise wird die CSS-Datei erst eingeführt, nachdem die gesamte Seite geladen wurde. Das offensichtliche Problem ist das „Streifen“-Phänomen der Seite. Dies ist aus Sicht der Interaktion und Erfahrung natürlich absolut inakzeptabel

Die beiden oben genannten externen Einführungsmethoden können direkt angezeigt werden:

<span style="font-size:14px;"><link href="CSS路径" rel="stylesheet" type="text/css" /></span>
<span style="font-size:14px;">@import + 空格+ url(CSS文件路径地址);</span>

@import Bei dieser Methode sollten Sie auch auf den Unterschied beim Herunterladen von HTML- und CSS-Dateien achten 080b747a20f9163200dd0a7d304ba388531ac245ce3e4fe3d50054a55f265927 und In der CSS-Datei können Sie direkt @import

hinzufügen, um den Pfad zur Verwendung hinzuzufügen. Dies bringt einen Punkt zur Sprache: für Projekte mit vielen Stildateien , wir können wählen, zuerst die Hauptstile zu rendern und dann die Hauptstile zu rendern. Wenn Sie möchten, können Sie sie in die CSS-Datei importieren, was zwar auch den Druck auf den Server verringern kann Da die Datei nicht groß ist, empfiehlt es sich dennoch, sie zu optimieren. Im Wesentlichen gibt es keinen großen Unterschied zwischen diesen beiden externen Einführungsmethoden, aber manchmal wird zur Vereinfachung der Bearbeitung des Site-Stils im Projekt häufig die Link-Methode verwendet.

Natürlich gibt es einige Einführungsmethoden, die XML als Bearbeitungsvoraussetzung verwenden, aber sie werden nicht häufig verwendet....

Empfohlenes Lernen: „

CSS-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo importieren Sie CSS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!