首頁技術(shù)文章正文

引入ＣＳＳ樣式表的方式有哪些？

更新時間:2019年07月18日17時39分來源:傳智播客瀏覽次數(shù):

CSS用于修飾網(wǎng)頁樣式，但是，如果希望CSS修飾的樣式起作用，就必須在html檔中引入CSS樣式表。引入樣式表的常用方式有三種，即行內(nèi)式、內(nèi)嵌式、外鏈?zhǔn)?，具體介紹如下。

1.行內(nèi)式

行內(nèi)式也稱內(nèi)聯(lián)樣式，是通過標(biāo)記的 Istyle屬性來設(shè)置標(biāo)記的樣式，其基本語法格式如下：

<標(biāo)記名 style= ”屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">

上述語法中，style是標(biāo)記的屬性，實際上任何HTML標(biāo)記都擁有 style屬性，用來設(shè)置行內(nèi)式。屬性和屬性值的書寫規(guī)范與Cs樣式規(guī)則一樣，行內(nèi)式只對其所在的標(biāo)記及嵌套在其中的子標(biāo)記起作用。

通常CSS的書寫位置是在頭部標(biāo)記中，行內(nèi)式卻是寫在根標(biāo)記中，例如下面的示例代碼，即為行內(nèi)式CS樣式的寫法。

<h1 style="font-size:20px; color:b1ue;">使用CSS行內(nèi)式修飾一級標(biāo)題的字體大小和顏色</h1>

在上述代碼中，使用標(biāo)記的style屬性設(shè)置行內(nèi)式CSS樣式，用來修飾一級標(biāo)題的字體大小和顏色。效果如下圖所示。

行內(nèi)式效果

需要注意的是，行內(nèi)式是通過標(biāo)記的屬性來控制樣式的，這樣并沒有做到結(jié)構(gòu)與樣式分離，所以一般很少使用。

2.內(nèi)嵌式

內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)記中，并且用< style>標(biāo)記定義，其基本語法格式如下:

<head>

選擇器 {屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}

/style>

</head>

上述語法中，<style>標(biāo)記一般位于<head>標(biāo)記中title標(biāo)記之后，也可以把它放在HTML文檔的任何地方。但是由于瀏覽器是從上到下解析代碼的，把CSS代碼放在頭部有利于提前下載和解析，從而可以避免網(wǎng)頁內(nèi)容下載后沒有樣式修飾帶來的尷尬。除此之外，必須設(shè)置type的屬性值為“text/css”，這樣瀏覽器才知道< style>標(biāo)記包含的是CSS代碼，因為< style>標(biāo)記還可以包含其他代碼，如 JavaScript代碼。

3.外鏈?zhǔn)?/span>

外鏈?zhǔn)绞菍⑺械臉邮椒旁谝粋€或多個以.css為擴展名的外部樣式表文件中，通過<link/>標(biāo)記將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下:

上述語法中，<link> 標(biāo)記需要放在<head>頭部標(biāo)記中，并且必須指定<link/>標(biāo)記的個屬性，具體介紹如下。

●href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。

●type：定義所鏈接文檔的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為CS樣式表。

●rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。

外鏈?zhǔn)绞鞘褂妙l率最高是最實用的CSS樣式表，因為它將HTML代碼與CSS代碼分離為兩個或多個文件，實現(xiàn)了將結(jié)構(gòu)和樣式完全分離，使得網(wǎng)頁的前期制作和后期維護都十分方便。

推薦了解熱門學(xué)科

java培訓(xùn)	python人工智能	web前端	UI設(shè)計培訓(xùn)	軟件測試培訓(xùn)
PHP+H5	C++	新媒體培訓(xùn)	大數(shù)據(jù)培訓(xùn)	區(qū)塊鏈培訓(xùn)
產(chǎn)品經(jīng)理培訓(xùn)	Linux運維培訓(xùn)	影視制作培訓(xùn)	智能機器人軟件開發(fā)