天天看點

HTML中引入CSS檔案的幾種方法

 概況來說有以下四種:

       1.行内式:也稱内聯式,在标記的style屬性中設定CSS樣式。這種方式沒有展現出CSS的優勢;

       2.嵌入式:将CSS樣式集中寫在網頁的<head></head>标簽對的<style></style>标簽對中;

       3.連結式:跟第4個的導入式都稱外部式或者外聯式,使用link引用外部CSS檔案;

       4.導入式:使用@import引用外部CSS檔案;

-----------------------------------------------------A

對于行内式,是剛開始寫最容易也最習慣的方式,但這種寫法完全展現不出css的優勢,如下:

<span style="font-size:14px;"><div id="demo" style="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;">我是行内式寫法</div></span>
           

一個 頁面中如果标簽很多,這種寫法看起來不好并且顯得很累贅,重複性太大,是很不建議的!

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

嵌入式如果頁面比較少的情況下,也是挺不錯的選擇,但如果對應一個項目頁面很多,這樣無疑有點災難性,要修改個樣式,或許是大篇幅的相似頁

面,但都得一個個的去修改,如下:

<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>
           

這種寫法一定程度上避免了頁面一種"無樣式"現象,頁面加載完css才去渲染頁面...

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

外部式css樣式就是把css代碼寫一個單獨的外部檔案中,這個css樣式檔案以“

.css

”為擴充名,在<head>标簽内(不是在<style>标簽内)使用<link>标簽将css樣式檔案連結到HTML檔案内,這樣最大化的發揮了css出現的優勢,當然".css"檔案檔案的命名要有一定的意義,友善後面的修改或增強其可讀性,如"main.css"...     

<link href="main.css" target="_blank" rel="external nofollow"  rel="stylesheet" style="text/css"/>
           

其中的 rel="stylesheet" type="text/css" 是固定寫法不可修改

通過@import引入的格式如下:

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

這種方式會在整個頁面加載完成時才引入css檔案,很明顯的問題就是頁面的"裸奔"現象,這個當然從互動和體驗的角度考慮是絕對不能接受的

以上的兩種外部引入方式從直覺看文法結構的差別:

<span style="font-size:14px;"><link href="CSS路徑" target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css" /></span>
           
<span style="font-size:14px;">@import + 空格+ url(CSS檔案路徑位址);</span>
           

@import這種方式還應注意下載下傳HTML和CSS檔案中的不同,在HTML中需要加上<style type="text/css"></style>,而在css檔案中就可以直接@import

來添加路徑使用了,這就出現了一個點:對應樣式檔案較多的項目,我們可以選擇先主後次,把主要的樣式先渲染出來,一些次要的可以放在css檔案

中進行import,這樣也可一定程度上緩解伺服器的壓力,雖然檔案不大,但能優化還是好的。本質上這兩種外部引入方式并沒太多差別,但有時為了項

目中編輯站點的樣式友善,較多的使用link的方式。

當然還有一些以XML為編輯要求的引入方式,但不常用....