問答:
1、樣式有幾種引入方式阵难? link和@import有什么區(qū)別呜叫?
- 外部樣式表 寫一個(gè).CSS文件 然后用
<link href=“index.css” type=“text/css” rel=“stylesheet”>
進(jìn)行引用。 - 內(nèi)部樣式表(位于標(biāo)簽內(nèi)部)
<style type=“text/css”>p{color: red;}</style>
- 內(nèi)聯(lián)樣式(在html元素內(nèi)部)
<p style=“color:red; font-size:14px;”>hello</p>
link和@import有什么區(qū)別:外部引用CSS兩種方式link和@import的方式分別是:
XML/HTML代碼
<link rel=“stylesheet” rev=“stylesheet” href=“CSS文件” type=“text/css” media=“all” />
XML/HTML代碼
<style type=“text/css” media=“screen”>
@import url(“CSS文件”);
</style>
兩者都是外部引用CSS的方式盛泡,但是存在一定的區(qū)別:
- link是XHTML標(biāo)簽娱颊,除了加載CSS外,還可以定義RSS等其他事務(wù)掰吕;@import屬于CSS范疇颅痊,只能加載CSS。
- link引用CSS時(shí)菱属,在頁面載入時(shí)同時(shí)加載舰罚;@import需要頁面網(wǎng)頁完全載入以后加載。
- link是XHTML標(biāo)簽赏陵,無兼容問題;@import是在CSS2.1提出的缕溉,低版本的瀏覽器不支持吃型。
- link支持使用Javascript控制DOM去改變樣式;而@import不支持枉层。
2赐写、文件路徑…/main.css 血淌、./main.css财剖、main.css、/main.css有什么區(qū)別沦补?
…/main.css
表示在當(dāng)前目錄的上一層目錄尋找main.css文件咪橙;
.main.css
和main.css
表示在當(dāng)前目錄尋找main.css文件;
/main.css
表示在根目錄中尋找main.css文件产舞。
3菠剩、console.log是做什么用的?
用于調(diào)試的時(shí)候准颓,在控制臺看到輸出內(nèi)容棺妓。
簡單來說就是用于在chrome中進(jìn)行javascript調(diào)試,通過console控制臺輸出js結(jié)果样勃,查看js命令的輸出情況
例如:
代碼:console.log(1)
:
效果如下:
4彤灶、text-align有幾個(gè)值,分別有什么作用诵姜?為什么text-align:justify沒有效果搏熄?寫截圖說明區(qū)別?
left 左對齊(默認(rèn)left)
right 右對齊
center 居中對齊
justify 兩端對齊
inherit 繼承父元素對齊方式代碼如下:
- 為什么text-align:justify沒有效果宵凌?
如下:
兩個(gè) 你好瞎惫!
沒有顯示出justify的功能译株,因?yàn)槲淖珠L度太短,而大段的文字(紅框處)
就顯示出了justify的效果乘寒,使文字兩端對齊匪补,大段的文字得以美觀
5夯缺、px、em竿滨、rem分別是什么润文?有什么區(qū)別?如何使用曙砂?
px
像素骏掀。瀏覽器默認(rèn)字體最小像素為12px
柱告;
em
相對單位笑陈。相對于父級元素的像素大小而決定大小;
rem
相對單位涵妥。相對于根節(jié)點(diǎn)html設(shè)置的像素大小而決定大小。
一般窒所,都使用px
決定像素大蟹妗;
em
一般用于首行縮進(jìn)或是設(shè)置行高锯厢;
rem
較多用于移動端頁面設(shè)置字體大小实辑。
6、對chrome 審查元素的功能做個(gè)簡單的截圖介紹讯沈?
代碼:
展示如下:我是代碼