1.樣式有幾種引入方式? link和 @import有什么區(qū)別?
在HTML中惠窄,引入CSS的方法主要有行內(nèi)式谅辣、內(nèi)嵌式、導(dǎo)入式和鏈接式三種前翎。
- 行內(nèi)式:即在標(biāo)記的style屬性中設(shè)定CSS樣式稚配,這種方式本質(zhì)上沒有體現(xiàn)出CSS的優(yōu)勢,因此不推薦使用例:
- 嵌入式:嵌入式則將對頁面中各種元素的設(shè)置集中寫在<head>和</head>之間鱼填,對于單一的網(wǎng)頁药有,這種方法很方便。但是對于一個包含很多頁面的網(wǎng)站苹丸,如果每個頁面都以內(nèi)嵌方式設(shè)置各自的樣式愤惰,就失去了CSS帶來的巨大優(yōu)點,因此一個網(wǎng)站通常都是編寫一個獨立的CSS樣式表文件赘理,使用以下兩種方式中的一種宦言,引入HTML文檔中。
-
導(dǎo)入式與鏈接式:導(dǎo)入式和鏈接式的目的都是將一個獨立的CSS文件引入HTML文件商模,二者有相應(yīng)的區(qū)別奠旺。事實上,二者最大的區(qū)別在于鏈接式使用HTML的標(biāo)記引入外部CSS文件施流,而使用導(dǎo)入式則是使用CSS的規(guī)則引入外部CSS文件响疚。因此它們的語法也不同。如果使用鏈接式瞪醋,需要使用如下語句引入外部CSS文件忿晕。
如果使用鏈接式,需要使用如下語句引入外部CSS文件:
<link href="mystyle.css" rel="stylesheet" type="text/css" />
如果使用導(dǎo)入式银受,則需要使用如下語句践盼。
<style type="text/css">@import"mystyle.css";</style>
特別注意鸦采!
采用這兩種方式后的顯示效果也略有區(qū)別。使用鏈接方式時咕幻,會在裝置頁面主體部分之前裝載CSS文件渔伯,這樣顯示出來的網(wǎng)頁從一開始就是帶有樣式的效果,而使用導(dǎo)入式時肄程,會在整個頁面裝載完成后再裝載CSS文件锣吼,對于有的瀏覽器來說,在一些情況下绷耍,如果網(wǎng)頁文件的體積比較大吐限,則會出現(xiàn)先顯示無樣式的頁面,閃爍一下之后再出現(xiàn)樣式設(shè)置后的效果褂始。從瀏覽者的感受來說诸典,這是使用導(dǎo)入式的一個缺陷。
2.文件路徑
../main.css 崎苗、 ./main.css 狐粱、main.css 、/main.css
有什么區(qū)別胆数?
../main.css 要尋找的main.css文件在上級目錄中肌蜻。
./main.css 要尋找的main.css文件與本文件在同一級目錄
/main.css要尋找的main.css文件在根目錄中
main.css 這個
不會
3.console.log是做什么用的?
它是一個彪悍的日志記錄功能必尼,您可以從您自己的web頁面上調(diào)用蒋搜,然后以最快的方式轉(zhuǎn)儲盡可能多的信息到控制臺上,從而能更醒目地讓你意識到你的javascript下一步需要做什么判莉。
- console 控制臺
- log 日志
意思是在控制臺輸出日志信息豆挽。
4.text-align有幾個值,分別有什么作用券盅?寫截圖說明區(qū)別
值 | 描述 |
---|---|
left | 把文本排列到左邊帮哈。默認(rèn)值:由瀏覽器決定。 |
right | 把文本排列到右邊锰镀。 |
center | 把文本排列到中間娘侍。 |
justify | 實現(xiàn)兩端對齊文本效果。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值泳炉。 |
text-align.png
5.px憾筏、em、rem分別是什么花鹅?有什么區(qū)別氧腰?如何使用?
- px像素(Pixel)。相對長度單位容贝。像素px是相對于顯示器屏幕分辨率而言的。
- em是相對長度單位之景。相對于當(dāng)前對象內(nèi)文本的字體尺寸斤富。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置,則相對于瀏覽器的默認(rèn)字體尺寸锻狗。
- rem是CSS3新增的一個相對單位rem為元素設(shè)定字體大小時满力,仍然是相對大小,但相對的只是HTML根元素轻纪。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身油额,通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)刻帚。
一般在body中聲明Font-size=62.5%潦嘶,這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em , 也就是說只需要將你的原來的px數(shù)值除以10,然后換上em作為單位就行了崇众。
10px=1em=1rem
5.2.png
6.對chrome 審查元素的功能做個簡單的截圖介紹
chrome.gif