1.CSS全稱是什么
- 層疊樣式表( Cascading Style Sheets)
2.CSS有幾種引入方式? link 和@import 有什么區(qū)別?
引入方式
CSS有三種引入方式美旧,分別是內(nèi)聯(lián)樣式,內(nèi)部樣式和外部樣式
- 內(nèi)聯(lián)樣式:
直接在HTML標(biāo)簽的style屬性中設(shè)定CSS樣式
<h1 style="color: red; font-size: 20px;"></h1>
2.內(nèi)部樣式:
在<style>標(biāo)簽內(nèi)書寫 CSS 代碼(<style>標(biāo)簽一般位于HTML頭部)
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>饑人谷</h1>
3.外部樣式:
- 鏈接式
通過HTML頭部的<link>標(biāo)簽從外部引入CSS文件
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
- 導(dǎo)入式
使用 CSS 規(guī)則剑辫,通過@import導(dǎo)入外部CSS文件
<style>
@import url(../css/style.css);
@import "world.css";
</style>
link和@import的區(qū)別
- 本質(zhì)不同
- link是HTML標(biāo)簽横朋,可以放在HTML文件的任何位置
- @import是CSS語法抬探,應(yīng)該位于樣式文件或者< style>標(biāo)簽里
- 加載順序不同
- link標(biāo)簽內(nèi)的樣式會(huì)隨著頁面內(nèi)容加載同步加載
- @import引用的文件則會(huì)等頁面全部下載完畢再被加載,對于有的瀏覽器來說,在一些情況下倍谜,如果網(wǎng)頁文件的體積比較大,則會(huì)出現(xiàn)先顯示無樣式的頁面叉抡,閃爍一下之后再出現(xiàn)設(shè)置樣式后的效果尔崔,從瀏覽者的感受來說,這是導(dǎo)入式的一個(gè)缺陷
- 兼容性的差別
- @import是CSS2.1提出的褥民,所以老的瀏覽器不支持季春,@import只在IE5以上的才能識(shí)別,而link標(biāo)簽無此問題消返。
- 使用DOM控制樣式差別
- 當(dāng)使用javascript控制dom去改變樣式的時(shí)候载弄,只能使用link標(biāo)簽,因?yàn)锧import不是dom可以控制的
3.列出5條以上html和 css 的書寫規(guī)范
- HTML
- id class建議單詞全字母小寫撵颊,單詞間以 -分隔宇攻。同項(xiàng)目必須保持風(fēng)格一致。
- HTML 標(biāo)簽的使用應(yīng)該遵循標(biāo)簽的語義倡勇。
- 禁止 img的 src取值為空尺碰。延遲加載的圖片也要增加默認(rèn)的 src
- 使用 button元素時(shí)必須指明 type 屬性值。
- 在 CSS 可以實(shí)現(xiàn)相同需求的情況下不得使用表格進(jìn)行布局
- CSS
- 語法不區(qū)分大小寫译隘,但建議統(tǒng)一使用小寫
- 不使用內(nèi)聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞亲桥,分隔符建議使用-(中橫線)
- 有可能就是用縮寫
- 屬性值是0的省略單位
- 塊內(nèi)容縮進(jìn)
- 屬性名冒號后面添加一個(gè)空格