引用CSS樣式的3種方法

發(fā)布時(shí)間：2020-05-25 15:02:41 來(lái)源：億速云閱讀：310 作者：鴿子欄目：web開(kāi)發(fā)

(1)鏈接式:(外部引入.css文件)

（用得比較多 ) <link>在html加載前就被引用

在網(wǎng)頁(yè)的<head></head>標(biāo)簽對(duì)中用<link>引入外部樣式表，使用html規(guī)則引入外部css :

　　　<link href="./css/style.css" rel="stylesheet" type="text/css"/>

導(dǎo)入式:(外部引入.css文件)　　　　

( 不使用 ) @import在html加載完成后才引用,并且無(wú)法在JS DOM模型中插入樣式

引入外部CSS文件，<style>標(biāo)記也是寫(xiě)在<head>標(biāo)記中，使用的語(yǔ)法如下：

　　　　　<style type="text/css">
　　　　　　　　@import "./css/style.css"
　　　　　　　　　　/*@import url(./css/style.css)*/
　　　　　　</style>

(2)嵌入式　　

直接寫(xiě)在<html>標(biāo)簽下,常在<head></head>中，

優(yōu)點(diǎn)：速度快，所有的CSS控制都是針對(duì)本頁(yè)面標(biāo)簽的，直接在HTML文檔中讀取樣式；

缺點(diǎn):　單個(gè)頁(yè) 面顯得臃腫,不能被其他HTML引用造成代碼量相對(duì)較多,維護(hù)麻煩

<style type="text/css">
　　　　　　div{border:1px #ff0 solid}
　　　　</style>

(3)內(nèi)聯(lián)式　　

( 不推薦 ) 其可以用在不經(jīng)常改動(dòng)的位置

<div style="border:1px #ff0 solid;">內(nèi)容</div>

以上就是3種CSS使用方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡