站長(zhǎng)資訊網(wǎng)CSS樣式有三種類(lèi)型：1、行內(nèi)樣式（內(nèi)嵌樣式），使用style屬性直接把CSS代碼添加到HTML的標(biāo)記中；2、內(nèi)部樣式（內(nèi)聯(lián)樣式），把css樣式寫(xiě)在style標(biāo)簽中；3、外部樣式（外聯(lián)樣式），將css樣式寫(xiě)在一個(gè)單獨(dú)的“.css”文件內(nèi)。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS樣式主要包含以下三種類(lèi)型：
1、行內(nèi)樣式（內(nèi)嵌樣式）：結(jié)構(gòu)的內(nèi)部，即寫(xiě)在標(biāo)簽內(nèi)的樣式；寫(xiě)在標(biāo)簽的開(kāi)始部分內(nèi)部，style屬性當(dāng)中。
例：
<標(biāo)記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"></標(biāo)記>
優(yōu)點(diǎn):
-
沒(méi)有了樣式表文件，在某些時(shí)候可以提升效率;
-
使用 style 屬性的樣式效果會(huì)最強(qiáng)，會(huì)覆蓋掉其他引入方式的相同樣式效果。
缺點(diǎn):
-
多個(gè)元素難以共享樣式，不利于代碼復(fù)用;
-
HTML 和 CSS 代碼混雜，不利于程序員和搜索引擎閱讀。
2、內(nèi)部樣式（內(nèi)聯(lián)樣式）：寫(xiě)在HTML頁(yè)面內(nèi)部，存放于head標(biāo)記當(dāng)中，樣式寫(xiě)在style標(biāo)記內(nèi)。
例：
<style>選擇器 {屬性名：屬性值；屬性名：屬性值；......}</style>
優(yōu)點(diǎn)：跟行間樣式表相同不會(huì)產(chǎn)生額外的請(qǐng)求，且它初步實(shí)現(xiàn)了結(jié)構(gòu)與樣式的分離，比較適合單頁(yè)面網(wǎng)站應(yīng)用。
缺點(diǎn)：由于內(nèi)部樣式表是寫(xiě)在 HTML 文件中的，導(dǎo)致頁(yè)面不純凈、文件體積大、不利于網(wǎng)絡(luò)爬蟲(chóng)獲取信息、不利于維護(hù)、頁(yè)面之間無(wú)法共享樣式
3、外部樣式（外聯(lián)樣式）：寫(xiě)在css文件內(nèi)。
然后在頁(yè)面中通過(guò)<link>鏈接標(biāo)記鏈接到頁(yè)面中，而且該鏈接語(yǔ)句必須放在頁(yè)面的<head>標(biāo)記區(qū)。
例：
<link type="text/css" rel="stylesheet" href="css/main.css" />
優(yōu)點(diǎn)：
-
實(shí)現(xiàn)了結(jié)構(gòu)與表現(xiàn)的代碼完全分離
-
方便復(fù)用及維護(hù)
-
因?yàn)榉蛛x到各自獨(dú)立的文件中，讓 HTML 文件大小大幅減少了，從而讓頁(yè)面結(jié)構(gòu)更容易被程序員和網(wǎng)絡(luò)爬蟲(chóng)讀懂
-
對(duì)搜索引擎友好，讓搜索引擎給頁(yè)面評(píng)分更高，有利于頁(yè)面搜索引擎排名
-
外部樣式表在用戶(hù)首次訪問(wèn)后就被緩存到用戶(hù)電腦上，下次訪問(wèn)無(wú)需加載
缺點(diǎn)：
-
如果樣式很多，CSS 文件會(huì)變的很大查找起來(lái)不方便。此外，多一個(gè) CSS 文件就多一次 HTTP 請(qǐng)求，在訪問(wèn)量大的網(wǎng)站中會(huì)加重服務(wù)器壓力
（學(xué)習(xí)視頻分享：css視頻教程）
