這篇文章主要講解了“css樣式的類型有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css樣式的類型有哪些”吧！

成都創(chuàng)新互聯(lián)公司10多年成都定制網(wǎng)站服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都定制網(wǎng)站及推廣,對(duì)成都VR全景等多個(gè)方面擁有豐富的網(wǎng)站制作經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

CSS樣式有三種類型：1、行內(nèi)樣式（內(nèi)嵌樣式），使用style屬性直接把CSS代碼添加到HTML的標(biāo)記中；2、內(nèi)部樣式（內(nèi)聯(lián)樣式），把css樣式寫在style標(biāo)簽中；3、外部樣式（外聯(lián)樣式），將css樣式寫在一個(gè)單獨(dú)的“.css”文件內(nèi)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS樣式主要包含以下三種類型：

1、行內(nèi)樣式（內(nèi)嵌樣式）：結(jié)構(gòu)的內(nèi)部，即寫在標(biāo)簽內(nèi)的樣式；寫在標(biāo)簽的開始部分內(nèi)部，style屬性當(dāng)中。

例：

<標(biāo)記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......">

優(yōu)點(diǎn):

• 沒有了樣式表文件，在某些時(shí)候可以提升效率;

• 使用 style 屬性的樣式效果會(huì)最強(qiáng)，會(huì)覆蓋掉其他引入方式的相同樣式效果。

缺點(diǎn):

• 多個(gè)元素難以共享樣式，不利于代碼復(fù)用;

• HTML 和 CSS 代碼混雜，不利于程序員和搜索引擎閱讀。

2、內(nèi)部樣式（內(nèi)聯(lián)樣式）：寫在HTML頁面內(nèi)部，存放于head標(biāo)記當(dāng)中，樣式寫在style標(biāo)記內(nèi)。

例：

優(yōu)點(diǎn)：跟行間樣式表相同不會(huì)產(chǎn)生額外的請(qǐng)求，且它初步實(shí)現(xiàn)了結(jié)構(gòu)與樣式的分離，比較適合單頁面網(wǎng)站應(yīng)用。

缺點(diǎn)：由于內(nèi)部樣式表是寫在 HTML 文件中的，導(dǎo)致頁面不純凈、文件體積大、不利于網(wǎng)絡(luò)爬蟲獲取信息、不利于維護(hù)、頁面之間無法共享樣式

3、外部樣式（外聯(lián)樣式）：寫在css文件內(nèi)。

然后在頁面中通過鏈接標(biāo)記鏈接到頁面中，而且該鏈接語句必須放在頁面的標(biāo)記區(qū)。

例：

優(yōu)點(diǎn)：

• 實(shí)現(xiàn)了結(jié)構(gòu)與表現(xiàn)的代碼完全分離

• 方便復(fù)用及維護(hù)

• 因?yàn)榉蛛x到各自獨(dú)立的文件中，讓 HTML 文件大小大幅減少了，從而讓頁面結(jié)構(gòu)更容易被程序員和網(wǎng)絡(luò)爬蟲讀懂

• 對(duì)搜索引擎友好，讓搜索引擎給頁面評(píng)分更高，有利于頁面搜索引擎排名

• 外部樣式表在用戶首次訪問后就被緩存到用戶電腦上，下次訪問無需加載

缺點(diǎn)：

• 如果樣式很多，CSS 文件會(huì)變的很大查找起來不方便。此外，多一個(gè) CSS 文件就多一次 HTTP 請(qǐng)求，在訪問量大的網(wǎng)站中會(huì)加重服務(wù)器壓力

感謝各位的閱讀，以上就是“css樣式的類型有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)css樣式的類型有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！