您好,登錄后才能下訂單哦!
這篇文章主要講解了“css樣式的類型有哪些”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“css樣式的類型有哪些”吧!
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;......"></標(biāo)記>
優(yōu)點(diǎn):
沒有了樣式表文件,在某些時(shí)候可以提升效率;
使用 style 屬性的樣式效果會(huì)最強(qiáng),會(huì)覆蓋掉其他引入方式的相同樣式效果。
缺點(diǎn):
多個(gè)元素難以共享樣式,不利于代碼復(fù)用;
HTML 和 CSS 代碼混雜,不利于程序員和搜索引擎閱讀。
2、內(nèi)部樣式(內(nèi)聯(lián)樣式):寫在HTML頁(yè)面內(nèi)部,存放于head標(biāo)記當(dāng)中,樣式寫在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)部樣式表是寫在 HTML 文件中的,導(dǎo)致頁(yè)面不純凈、文件體積大、不利于網(wǎng)絡(luò)爬蟲獲取信息、不利于維護(hù)、頁(yè)面之間無法共享樣式
3、外部樣式(外聯(lián)樣式):寫在css文件內(nèi)。
然后在頁(yè)面中通過<link>鏈接標(biāo)記鏈接到頁(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ò)爬蟲讀懂
對(duì)搜索引擎友好,讓搜索引擎給頁(yè)面評(píng)分更高,有利于頁(yè)面搜索引擎排名
外部樣式表在用戶首次訪問后就被緩存到用戶電腦上,下次訪問無需加載
缺點(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)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。