建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)HTML中引入CSS的方式有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)公司長(zhǎng)期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為宜黃企業(yè)提供專業(yè)的網(wǎng)站制作、網(wǎng)站設(shè)計(jì)，宜黃網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
一、認(rèn)識(shí)CSS
CSS：層疊樣式表（Cascading Style Sheets）
樣式表：如果把HTML比作人，那么樣式表就是衣帽服飾，就是用來(lái)打扮HTML外觀的（俗話說(shuō)人靠衣服，網(wǎng)頁(yè)靠CSS，才能變得漂亮）
內(nèi)容與樣式分離：HTML代碼與CSS代碼分離，讓它們各自去做擅長(zhǎng)的事情
HTML控制結(jié)構(gòu)和內(nèi)容；CSS控制樣式
這樣有利于代碼的維護(hù)
舉個(gè)栗子：存在已久的QQ空間的裝扮功能就是內(nèi)容與樣式分離的最好體現(xiàn)
當(dāng)我們點(diǎn)擊切換不同的皮膚時(shí)，空間頁(yè)面會(huì)顯示不同的主題樣式，這就是在給網(wǎng)頁(yè)更換皮膚啊
既然將HTML與CSS分離，那么又如何讓它們精誠(chéng)合作呢？向下看
二、四種CSS的引入方式
1. 內(nèi)聯(lián)樣式（行內(nèi)式）
即：在html標(biāo)簽內(nèi)的style屬性中設(shè)定CSS樣式，例如：
我是段落
注：這種方式不推薦使用，因?yàn)樗荒芨淖儺?dāng)前標(biāo)簽樣式，多處使用會(huì)導(dǎo)致代碼的可維護(hù)性極差
2. 內(nèi)部樣式（嵌入式）
即：在html內(nèi)的head頭部?jī)?nèi)的style標(biāo)簽對(duì)中設(shè)定CSS樣式，例如：
注：這種方式使html內(nèi)容結(jié)構(gòu)和css樣式分開，便于閱讀且代碼比較集中，但CSS樣式只對(duì)當(dāng)前頁(yè)面有效。
當(dāng)多個(gè)頁(yè)面需要引用同一個(gè)CSS樣式時(shí)，修改CSS樣式將十分麻煩，此時(shí)不利于代碼維護(hù)，可維護(hù)性變差。
3. 外部樣式（鏈接式：link）
即：使用html的link標(biāo)簽引入一個(gè)外部獨(dú)立的 .css 文件
link標(biāo)簽放在html文件內(nèi)的head頭部中，例如：
注：這種方式，CSS代碼存儲(chǔ)在一個(gè)外部獨(dú)立的文件中，若要更換網(wǎng)站樣式，只需修改CSS文件即可，不需改動(dòng)html文件，所以采用這種方式使代碼具有良好的可維護(hù)性
4. 外部樣式（導(dǎo)入式：@import）
即：使用CSS的語(yǔ)法規(guī)則引入一個(gè)外部獨(dú)立的 .css 文件
@import放在html文件head頭部里的style標(biāo)簽內(nèi)（@import也可以放在導(dǎo)入樣式表的開頭，去引用其他樣式），例如：
@import url（"style.css"）;
注：這種方式與鏈接式link一樣，將CSS代碼存儲(chǔ)在一個(gè)外部獨(dú)立的文件中，也具有良好的可維護(hù)性，但這種方式也有缺點(diǎn)：白屏和無(wú)樣式內(nèi)容閃爍
嘿，除了以上引用的樣式外，不要忽略 “ 瀏覽器的默認(rèn)樣式 ” 哦
三、 引用外部樣式時(shí)：link 和 @import 的區(qū)別
1. 從屬關(guān)系
link屬于HTML的標(biāo)簽，通過(guò) link 標(biāo)簽的 href 屬性來(lái)引入外部文件；link不僅可以引入CSS樣式表，還可以定義RSS、rel屬性等
@import屬于CSS的語(yǔ)法，@import語(yǔ)法只有一項(xiàng)作用：導(dǎo)入樣式表
2. 加載順序
使用link標(biāo)簽引入的CSS樣式在加載頁(yè)面時(shí)被同時(shí)加載
使用@import導(dǎo)入的CSS樣式將在頁(yè)面加載完畢之后才被加載
3. 兼容性
link 屬于HTML標(biāo)簽，不存在兼容性問(wèn)題
@import 是 CSS2.1 是在CSS2.1提出的，低版本的瀏覽器不支持，只可在 IE5+ 才能被識(shí)別
4. DOM可控區(qū)
link 支持使用Javascript控制DOM去改變樣式（通過(guò) JS 操作 DOM ，插入link標(biāo)簽來(lái)改變樣式）
@import不支持使用Javascript控制DOM去改變樣式（ 由于DOM 方法是基于文檔的，所以無(wú)法使用@import的方式插入樣式）
5. 權(quán)重（若有興趣自行查詢它的原因）
link引入的樣式權(quán)重大于@import引入的樣式
感謝各位的閱讀！關(guān)于“HTML中引入CSS的方式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
文章名稱：HTML中引入CSS的方式有哪些
網(wǎng)頁(yè)地址：http://fisionsoft.com.cn/article/gchooh.html
