Heim > Web-Frontend > HTML-Tutorial > So referenzieren Sie CSS-Dateien in HTML

So referenzieren Sie CSS-Dateien in HTML

青灯夜游
Freigeben: 2023-01-07 11:43:18
Original
13577 Leute haben es durchsucht

So zitieren Sie CSS-Dateien: 1. Verwenden Sie die Anweisung „". style tag url("css file path");"-Anweisung.

So referenzieren Sie CSS-Dateien in HTML

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

CSS-Code wird in einem Stylesheet mit der Erweiterung .css gespeichert.

HTML-Dateien verweisen auf ein Stylesheet mit der Erweiterung .css (externes CSS). Es gibt zwei Möglichkeiten: Linktyp und Importtyp.

Grammatik:

1. Linktyp

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
Nach dem Login kopieren

2. Importtyp

<style type="text/css">
  @import url("css文件路径");
</style>
Nach dem Login kopieren

Der Unterschied zwischen Linktyp und Importtyp

1 . Gehören dazu XHTML

2. Priorisieren Sie das Laden von CSS-Dateien auf die Seite

@import

1 Gehört zu CSS2.1

2. Laden Sie zuerst die HTML-Struktur und dann die CSS-Dateien.

Vorteile von externem CSS:

1. Die Größe der HTML-Seite ist kleiner und die Struktur ist klarer.


2. Schnellere Ladegeschwindigkeit.

3. Dieselbe CSS-Datei kann auf mehreren Seiten verwendet werden.

Nachteile von externem CSS:

1. Die Seite wird möglicherweise nicht richtig gerendert, bevor das externe CSS geladen wird.

Lernvideo-Sharing:

CSS-Video-Tutorial

, HTML-Video-Tutorial

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage