更新時(shí)間:2019-07-18 來(lái)源:黑馬程序員 瀏覽量:
CSS用于修飾網(wǎng)頁(yè)樣式,但是,如果希望CSS修飾的樣式起作用,就必須在html檔中引入CSS樣式表。引入樣式表的常用方式有三種,即行內(nèi)式、內(nèi)嵌式、外鏈?zhǔn)?,具體介紹如下。
1.行內(nèi)式
行內(nèi)式也稱內(nèi)聯(lián)樣式,是通過(guò)標(biāo)記的 Istyle屬性來(lái)設(shè)置標(biāo)記的樣式,其基本語(yǔ)法格式如下:
<標(biāo)記名 style= ”屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">內(nèi)容</標(biāo)記名>
上述語(yǔ)法中,style是標(biāo)記的屬性,實(shí)際上任何HTML標(biāo)記都擁有 style屬性,用來(lái)設(shè)置行內(nèi)式。屬性和屬性值的書(shū)寫(xiě)規(guī)范與Cs樣式規(guī)則一樣,行內(nèi)式只對(duì)其所在的標(biāo)記及嵌套在其中的子標(biāo)記起作用。
通常CSS的書(shū)寫(xiě)位置是在<head>頭部標(biāo)記中,行內(nèi)式卻是寫(xiě)在<htm>根標(biāo)記中,例如下面的示例代碼,即為行內(nèi)式CS樣式的寫(xiě)法。
<h1 style="font-size:20px; color:b1ue;">使用CSS行內(nèi)式修飾一級(jí)標(biāo)題的字體大小和顏色</h1>
在上述代碼中,使用<h1>標(biāo)記的style屬性設(shè)置行內(nèi)式CSS樣式,用來(lái)修飾一級(jí)標(biāo)題的字體大小和顏色。效果如下圖所示。
需要注意的是,行內(nèi)式是通過(guò)標(biāo)記的屬性來(lái)控制樣式的,這樣并沒(méi)有做到結(jié)構(gòu)與樣式分離,所以一般很少使用。
2. 內(nèi)嵌式
內(nèi)嵌式是將CSS代碼集中寫(xiě)在HTML文檔的<head>頭部標(biāo)記中,并且用< style>標(biāo)記定義,其基本語(yǔ)法格式如下:
<head> <style type="text/css"> 選擇器 {屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;} /style> </head>
上述語(yǔ)法中,<style>標(biāo)記一般位于<head>標(biāo)記中title標(biāo)記之后,也可以把它放在HTML文檔的任何地方。但是由于瀏覽器是從上到下解析代碼的,把CSS代碼放在頭部有利于提前下載和解析,從而可以避免網(wǎng)頁(yè)內(nèi)容下載后沒(méi)有樣式修飾帶來(lái)的尷尬。除此之外,必須設(shè)置type的屬性值為“text/css”,這樣瀏覽器才知道< style>標(biāo)記包含的是CSS代碼,因?yàn)?lt; style>標(biāo)記還可以包含其他代碼,如 JavaScript代碼。
3.外鏈?zhǔn)?/strong>
外鏈?zhǔn)绞菍⑺械臉邮椒旁谝粋€(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中,通過(guò)<link/>標(biāo)記將外部樣式表文件鏈接到HTML文檔中,其基本語(yǔ)法格式如下:
<head><1ink href="css文件的路徑" type="text/css" re1="stylesheet" /></head>
上述語(yǔ)法中,<link> 標(biāo)記需要放在<head>頭部標(biāo)記中,并且必須指定<link/>標(biāo)記的個(gè)屬性,具體介紹如下。
●href:定義所鏈接外部樣式表文件的URL,可以是相對(duì)路徑,也可以是絕對(duì)路徑。
●type:定義所鏈接文檔的類型,在這里需要指定為“text/css”,表示鏈接的外部文件為CS樣式表。
●rel:定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系,在這里需要指定為“stylesheet”,表示被鏈接的文檔是一個(gè)樣式表文件。
外鏈?zhǔn)绞鞘褂妙l率最高是最實(shí)用的CSS樣式表,因?yàn)樗鼘TML代碼與CSS代碼分離為兩個(gè)或多個(gè)文件,實(shí)現(xiàn)了將結(jié)構(gòu)和樣式完全分離,使得網(wǎng)頁(yè)的前期制作和后期維護(hù)都十分方便。
猜你喜歡:
CSS是什么?
CSS滑動(dòng)門技術(shù)應(yīng)用
常用css樣式大全[2020最新整理版]
黑馬程序員web前端課程