html中引入css樣式的方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！
一、HTML導(dǎo)入css樣式的方法
HTML主要負(fù)責(zé)網(wǎng)頁(yè)的內(nèi)容展現(xiàn)，而CSS文件負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容的樣式，在HTML中使用css樣式的方法有：行內(nèi)式、內(nèi)嵌式、外聯(lián)式，
而外聯(lián)式又分：鏈接式（link）和導(dǎo)入式（@import）。那么下面就給大家介紹一下：
1. 行內(nèi)式----HTML標(biāo)簽中使用CSS
代碼實(shí)例：
行內(nèi)式 行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式行內(nèi)式
效果圖：
css引用的行內(nèi)式也可稱為內(nèi)聯(lián)式或者行級(jí)式，它直接在標(biāo)簽內(nèi)部引入，顯著的優(yōu)點(diǎn)是十分的便捷、高效；但是同時(shí)也造成了不能夠重用樣式的缺點(diǎn)，如果代碼行數(shù)到達(dá)一定長(zhǎng)度不建議采用。通常內(nèi)聯(lián)CSS作為測(cè)試使用，可以查找代碼中bug。
2.內(nèi)嵌式---將CSS內(nèi)容通過(guò)style標(biāo)簽寫在head標(biāo)簽中
代碼實(shí)例：
內(nèi)嵌式 內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式內(nèi)嵌式
效果圖：
css引用的內(nèi)嵌式也可稱為內(nèi)部式或者頁(yè)級(jí)式，整體是放在head標(biāo)簽里邊的，在style標(biāo)簽里邊定義樣式，作用范圍僅限于本頁(yè)面的元素；如果你寫的代碼超過(guò)了幾百行，想想每次把代碼頁(yè)拉到最上邊都很煩，所以它在可維護(hù)性方面較差。
3. 外聯(lián)式---通過(guò)link標(biāo)簽引入外部樣式表（css樣式文件）
1）鏈接式（link）
語(yǔ)法：
代碼實(shí)例：
HTML代碼：
鏈接式 鏈接式鏈接式鏈接式鏈接式鏈接式鏈接式鏈接式鏈接式鏈接式鏈接式鏈接式鏈接式
css樣式文件--style.css代碼：
重慶分公司
重慶分公司
p{
font-size: 20px;
color: #fff;
background-color: #70DBDB;
}效果圖：
鏈接式會(huì)以網(wǎng)頁(yè)文件主體裝載前裝載CSS文件，因此顯示出來(lái)的網(wǎng)頁(yè)從一開(kāi)始就是帶樣式的效果的，它不會(huì)象導(dǎo)入式那樣先顯示無(wú)樣式的網(wǎng)頁(yè)，然后再顯示有樣式的網(wǎng)頁(yè)，這是鏈接式的優(yōu)點(diǎn)。
2）導(dǎo)入式（@import）
語(yǔ)法：
代碼實(shí)例：
HTML代碼：
導(dǎo)入式 導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式導(dǎo)入式
效果圖：
導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁(yè)裝載完后再裝載CSS文件，因此這就導(dǎo)致了一個(gè)問(wèn)題，如果網(wǎng)頁(yè)比較大則會(huì)兒出現(xiàn)先顯示無(wú)樣式的頁(yè)面，閃爍一下之后，再出現(xiàn)網(wǎng)頁(yè)的樣式。這是導(dǎo)入式固有的一個(gè)缺陷。
二、鏈接式（link）與導(dǎo)入式（@import）的區(qū)別
link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；而@import屬于CSS范疇，只能加載CSS；
link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；而@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。
link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；而@import是在CSS2.1提出的，低版本的瀏覽器不支持。
ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
@import可以在CSS文件中再次引入其他樣式表；而link不支持。
感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)html中引入css樣式的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
