CSS 一共有四種引入方式
- 外聯(lián)式
1.link
2.@import url - 嵌入式
style 標(biāo)簽一般放在head部分
<style type="text/css">
p {
color:red;
}
</style> - 行內(nèi)式
<p style="color:red;">Hello,World</p>
外聯(lián)式兩種方式的區(qū)別
- 1.link屬于XHTML標(biāo)簽 @import屬于CSS2.1以后引進(jìn)來的啸澡。
- 2.當(dāng)一個(gè)頁面被加載的時(shí)候(就是被瀏覽者瀏覽的時(shí)候),link引用的CSS會(huì)同時(shí)被加載氮帐,而@import引用的CSS會(huì)等到頁面全部被下載完再被加載嗅虏。
- 3.@import可以在css中再次引入其他樣式表,比如可以創(chuàng)建一個(gè)主樣式表上沐,在主樣式表中再引入其他的樣式表皮服。
文件路徑../main.css、./main.css参咙、main.css有什么區(qū)別
- ../main.css 是指的是main.css上一層文件夾的路徑龄广。
- ./main.css 與 main.css 沒有什么本質(zhì)區(qū)別,都是指的是和該文件同一層的路徑蕴侧。
console.log是做什么用的
- 用于調(diào)試JS的代碼择同,相對(duì)于alert(),可以看見JS中對(duì)象的內(nèi)容。
text-align有幾個(gè)值净宵,分別有什么作用
text-align這個(gè)屬性主要控制文本對(duì)齊方式
text-align 有三個(gè)值:left right center justify inherit
left : 文本向左對(duì)齊
center : 文本居中對(duì)齊
right:文本向右對(duì)齊
justify:文本兩端對(duì)齊
inherit:從父元素哪里繼承對(duì)齊方式
px奠衔、em、rem分別是什么塘娶?有什么區(qū)別?如何使用
px:相對(duì)長度單位痊夭。像素px是相對(duì)于顯示器屏幕分辨率而言的刁岸。
em:相對(duì)長度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸她我。
rem:rem是新增的一個(gè)相對(duì)單位(root em虹曙,根em)迫横,這個(gè)單位引起了廣泛關(guān)注。這個(gè)單位與em有什么區(qū)別呢酝碳?區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)矾踱,仍然是相對(duì)大小,但相對(duì)的只是HTML根元素疏哗。
rem和 em單位是由瀏覽器基于你的設(shè)計(jì)中的字體大小計(jì)算得到的像素值呛讲。
em單位基于使用他們的元素的字體大小。
rem 單位基于 html 元素的字體大小返奉。
em 單位可能受任何繼承的父元素字體大小影響贝搁。
rem 單位可以從瀏覽器字體設(shè)置中繼承字體大小。
使用 em單位應(yīng)根據(jù)組件的字體大小而不是根元素的字體大小芽偏。
在不需要使用em單位雷逆,并且需要根據(jù)瀏覽器的字體大小設(shè)置縮放的情況下使用rem。
使用rem單位污尉,除非你確定你需要 em單位膀哲,包括對(duì)字體大小。
媒體查詢中使用 rem單位
不要在多列布局中使用 em或 rem,改用%被碗。
不要使用 em或 rem某宪,如果縮放會(huì)不可避免地導(dǎo)致要打破布局元素。
參考了 rem em 徹底研究 徹底弄懂css中單位px和em,rem的區(qū)別
Chrome 工具
如下代碼蛮放,設(shè)置 p為幾 rem缩抡,讓h1和p的字體大小相等?
設(shè)置P為6