Rumah > Artikel > hujung hadapan web > Apakah bentuk pautan luar css?

Apakah bentuk pautan luar css?

青灯夜游asal: 2022-07-27 20:27:315883semak imbas

Terdapat dua bentuk pautan luar css: 1. Pautkan gaya luaran css ke halaman HTML melalui teg pautan Teg pautan perlu diletakkan di kawasan teg kepala dan sintaksnya ialah "< ;link type="text/css" rel="styleSheet" href="CSS file path" />"; 2. Pautkan melalui peraturan "@import" dalam teg gaya, dengan sintaks "@import url(" laluan fail css");".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Jika gaya CSS diletakkan dalam fail di luar dokumen web, ia dipanggil helaian gaya luaran Dokumen helaian gaya CSS mewakili helaian gaya luaran.

Malah, helaian gaya luaran ialah fail teks dengan sambungan .css. Apabila anda menyalin kod gaya CSS ke dalam fail teks dan menyimpannya sebagai fail .css, ia ialah helaian gaya luaran.

Seperti yang ditunjukkan di bawah, ia adalah helaian gaya luaran:

Apakah bentuk pautan luar css?

Jadi bagaimana untuk memautkan helaian gaya luaran css ke dokumen HTML? Terdapat dua cara untuk menggunakan helaian gaya luaran:

1), menggunakan pautan

gaya pautan merujuk kepada mentakrifkan helaian gaya CSS secara luaran dan membentuknya sebagai Sambungan fail .CSS, dan kemudian paut ke halaman melalui teg pautan <link> dan pernyataan pautan mesti diletakkan di kawasan teg

Sintaks:

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

2), gunakan @import

Import adalah melalui @import dalam teg

sintaks:

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

Contoh mudah:

css external style sheet style.css

h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}

Dokumen HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link type="text/css" rel="styleSheet"  href="style.css" />
		<!-- <style>
			@import url("style.cs");
		</style> -->
	</head>
	<body>
		<h1>link标签或@import的应用</h1>
		<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
	</body>
</html>

Kesan pelaksanaan:

Apakah bentuk pautan luar css?

Perbezaan antara pautan dan @import:

1. Perbezaan dalam gabungan

@import ialah peraturan sintaks yang disediakan oleh CSS, yang hanya mempunyai fungsi mengimport helaian gaya ialah teg yang disediakan oleh HTML, yang bukan sahaja boleh memuatkan fail CSS, tetapi juga menentukan sifat RSS dan rel Connection, dsb.

2. Memuatkan perbezaan pesanan

Apabila halaman dimuatkan, CSS yang diperkenalkan oleh teg pautan dimuatkan pada masa yang sama CSS yang diperkenalkan oleh @import akan dimuatkan selepas halaman itu dimuatkan.

3. Perbezaan keserasian

@import ialah sintaks yang unik untuk CSS2.1, jadi ia hanya boleh dikenali dalam IE5;

4. Perbezaan dalam kawalan DOM

Anda boleh mengendalikan DOM melalui JS dan memasukkan tag pautan untuk menukar gaya kerana kaedah DOM adalah berdasarkan dokumen, anda tidak boleh menggunakan @import kaedah untuk memasukkan gaya.

(Mempelajari perkongsian video: Bermula dengan bahagian hadapan web)

Atas ialah kandungan terperinci Apakah bentuk pautan luar css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 html JS dom href 样式表

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Apakah tiga jenis peraturan css?Artikel seterusnya：Apakah tiga jenis peraturan css?

Artikel berkaitan

Lihat lagi