Cascading Style Sheets 層疊樣式表
- 內(nèi)聯(lián)樣式
<h1 style="color: red; font-size: 20px;"></h1>
- 內(nèi)部樣式
<style type="text/css">
h1 { color: red; font-size: 20px; }
</style>
<h1>大標(biāo)題</h1>
- 外部樣式
1:<link rel="stylesheet" type="text/css" href="index.css">//
2:<style>
@import url("hello.css");
@import "world.css";
</style>
link與@import的區(qū)別
本質(zhì)上,這兩種方式都是為了加載CSS文件予借,但還是存在著細(xì)微的差別
- link屬于XHTML標(biāo)簽,而@import完全是CSS提供的一種方式。link標(biāo)簽除了可以加載CSS外,還可以做很多其它的事情檐束,比如定義RSS,定義rel連接屬性等束倍,@import就只能加載CSS了。
- 2.加載順序的差別盟戏。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候绪妹,link引用的CSS會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載柿究。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)性能較差
- 3.兼容性的差別邮旷。由于@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識(shí)別蝇摸,而link標(biāo)簽無(wú)此問(wèn)題
- 4.使用dom控制樣式時(shí)的差別婶肩。當(dāng)使用javascript控制dom去改變樣式的時(shí)候办陷,只能使用link標(biāo)簽,因?yàn)锧import不是dom可以控制的
以下這幾種文件路徑分別用在什么地方律歼,代表什么意思?
- .相對(duì)路徑css/a.css 當(dāng)前目錄下的css文件夾中的a.css./css/a.css 當(dāng)前目錄中css文件夾中的a.css文件b.css 當(dāng)前目錄下的b.css文件../imgs/a.png 上級(jí)目錄中的imgs 文件夾中的a圖片
- 絕對(duì)路徑(本地文件的絕對(duì)地址)/User/hunger/project/css/a.css 本地絕對(duì)路徑中的a.css文件
- 網(wǎng)站路徑/static/css/a.css 網(wǎng)站中也可以使用相對(duì)路徑http://cdn.jirengu.com/kejian1/8-1.png25 網(wǎng)絡(luò)中的路徑
如果我想在js.jirengu.com上展示一個(gè)圖片民镜,需要怎么操作?
- 穩(wěn)定的做法:上傳到服務(wù)器內(nèi)部并用相對(duì)路徑讀取。減小服務(wù)器壓力的做法:直接盜用其他網(wǎng)站上的圖片鏈接或上傳到圖床使用圖床的絕對(duì)鏈接险毁。
列出5條以上html和 css 的書(shū)寫(xiě)規(guī)范
- 1.語(yǔ)法統(tǒng)一使用小寫(xiě)
- 2.不使用內(nèi)聯(lián)樣式的style元素定義樣式制圈,建議采用外部css
- 3.id和class使用有區(qū)分度的單詞
- 4.塊內(nèi)容縮進(jìn)
- 5.屬性名:后面加一個(gè)space
chrome 開(kāi)發(fā)者工具的功能區(qū)
圖片
9/5/2017