CSS引入方式-行內(nèi)式 通過 style這個標(biāo)簽屬性,將css鍵值對直接寫入標(biāo)簽內(nèi) 1 <p style="width: 100px;height: 100px;background: red;"></p>2 <!--注釋:這段代碼描述的是一個寬高為100px,背景為紅色的容器--> css引入方式-內(nèi)嵌式(嵌入式) 使用style標(biāo)簽將css屬性名和屬性值引入到html頁面中,通常style標(biāo)簽放置在head標(biāo)簽中。為什么css樣式要放置在head標(biāo)簽中呢,因為代碼從上到下執(zhí)行,如果先加載結(jié)構(gòu),那么用戶看到的就將是干巴巴的內(nèi)容,而沒有通過美化,而先加載樣式后加載結(jié)構(gòu),就相當(dāng)于孩子出生就是穿著衣服的! 1 <head>2 <style type="text/css">3 p{4 width: 100px;height: 100px;background: red;5 }6 </style>7 </head> 以上代碼描述的也是一個寬高為100px,背景為紅色的容器,只不過是通過內(nèi)嵌式引入的! css引入方式之外鏈?zhǔn)?/strong> 通過link標(biāo)簽將獨立的css文件引入到html頁面中 1 <link rel="stylesheet" type="text/css" href="./style.css"> rel="stylesheet"描述了當(dāng)前頁面與href所指定的文檔的關(guān)系,即說明的是href鏈接的文檔是一個新式表,type="text/css"是指定MINME類型,也就是css文檔。href="./style.css"規(guī)定被鏈接文檔的位置 css引入方式之導(dǎo)入式 1 <style type="text/css">2 @import url("style.css");3 </style> 通過@import url引入一個獨立的CSS文件,url("style.css")規(guī)定被鏈接文檔的位置 |
|