問(wèn)答
1. 樣式有幾種引入方式? link 和 @import有什么區(qū)別？
- 四種引入方式：
- 使用style屬性引入樣式，方便靈活，但缺乏規(guī)劃性、統(tǒng)一性，不利于維護(hù)。
<p style="color:red; margin-left:16px">
寫(xiě)給自己的：這是一段文字，心態(tài)失調(diào)啦，急躁啊，迷茫啊。。。。。。，這個(gè)要克服，忍一忍，認(rèn)真對(duì)待每一個(gè)問(wèn)題，不要偷懶、“發(fā)現(xiàn)——解決——掌握”，沉浸其中，淡定，淡定
</p>```
- 將樣式代碼寫(xiě)在頁(yè)面`<style type="text/css">...</style>`標(biāo)簽之中：
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
color: red;
margin-left: 26px;
}
</style>
</head>
<body>
<p>
這是一段文字
</p>
</body>
</html>```
- 將樣式單獨(dú)寫(xiě)入一個(gè)文件，使用link標(biāo)簽，引入外部css文件
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="路徑/名稱(chēng).css">
</head>
rel=”stylesheet”是指在頁(yè)面中使用這個(gè)外部的樣式表。type=”text/css”是指文件的類(lèi)型是樣式表文本。href=”路徑/名稱(chēng).css”是文件所在的位置。media="all"是選擇媒體類(lèi)型，這些媒體包括：屏幕，紙張，語(yǔ)音合成設(shè)備，盲文閱讀設(shè)備等
- 使用@import引入css文件，有兩種方式。1
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@import "./css/myfile.css";
</style>
</head>
@charset "utf-8";
/*CSS Document*/
@import url(one.css);
@import url(two.css);
@import url(three.css);```
* link和@import區(qū)別：
1. 來(lái)源與作用：link屬于XHTML標(biāo)簽，除了可以加載CSS外，還可以定義RSS，定義rel鏈接屬性等其他作用；而@import則是CSS提供的一種方式，只能加載CSS；
2. 加載順序不同：link引用的CSS會(huì)在頁(yè)面被加載的時(shí)候同時(shí)被加載；而@import引用的CSS要等到頁(yè)面全部被下載完再被加載，這樣出現(xiàn)的問(wèn)題是，瀏覽網(wǎng)頁(yè)時(shí)開(kāi)始沒(méi)有樣式，之后頁(yè)面閃爍一下出現(xiàn)樣式，網(wǎng)速慢的時(shí)候更明顯。
3. @import可以在CSS中再次引入其他樣式表。創(chuàng)建一個(gè)主樣式表，在主樣式表中引入其他的樣式表（代碼如上）。這樣的好處是便于修改和擴(kuò)展。將CSS拆分成文件，雖然對(duì)于開(kāi)發(fā)和維護(hù)來(lái)說(shuō)比較方便和清晰，但是會(huì)對(duì)服務(wù)器產(chǎn)生較多的HTTP請(qǐng)求，所以@import不適用于大型網(wǎng)站。像一些大型訪問(wèn)量大的網(wǎng)站的首頁(yè)，會(huì)把CSS或js 直接寫(xiě)在html 中。
4. 兼容性的差別：@import是CSS2.1提出的，不支持IE5以下瀏覽器 ，這點(diǎn)可以不考慮。
###2. 文件路徑../main.css 、./main.css、main.css有什么區(qū)別？
* main.css：代表這個(gè)css文件；
* ./main.css：main.css文件所在當(dāng)前目錄；
* ../main.css：上一級(jí)目錄。
###3. console.log是做什么用的？
用于調(diào)試，把信息展示在控制臺(tái)。
###4. text-align有幾個(gè)值，分別有什么作用？
* 定義：該屬性規(guī)定元素中的文本的水平對(duì)齊方式。
<style type="text/css">
.father{
border: 1px solid red;
width: 500px;
height: 300px;
text-align: right;
margin: 0 auto;
}
.son {
text-align: center;
}
</style>
</head>
<body>
<div class="father">
很長(zhǎng)的一段文字很長(zhǎng)很長(zhǎng)的，沒(méi)了!（圖片格式被換了）
<p><a href="#" class="inline">這樣挺好</a>我繼承了父元素</p>
<p class="son"><a href="#" class="inline">我要做自己</a>我自己設(shè)置了對(duì)齊方式，不再繼承</p>
</div>
</body>
效果圖：
###5. px、em、rem分別是什么？有什么區(qū)別？如何使用？[3](http://www.cnblogs.com/leejersey/p/3662612.html)[4](http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984)
* px：像素px是相對(duì)于顯示器屏幕分辨率而言的
* em：相對(duì)于相對(duì)于其父元素來(lái)計(jì)算；
* rem：它相對(duì)于根結(jié)點(diǎn)`<html>`（不是body的字體大小）來(lái)計(jì)算。
demo
<!doctype html>
<html lang="en">
<head>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html{
font-size: 12px;
}
.father{
font-size: 24px;
color: red;
}
.son1{
font-size: 1em;
color: red;
}
.son2{
font-size: 2em;
color: red;
}
.p1{
font-size: 1rem;
}
.p2{
font-size: 2rem;
}
</style>
</head>
<body>
我是參照物（總的）：我是12px。
<div class="father">
我是參照物（父元素），我為自己設(shè)字體大小24px.
<p class="son1">我是子元素，1em時(shí)，我也是24px；</p>
<p class="son2">我是子元素，2em時(shí)，我是48px.</p>
</div>
我是參照物（總的）：我是12px
<p class="p1">我相對(duì)根節(jié)點(diǎn)（12px），1rem時(shí)，我也是12px；</p>
<p class="p2">我相對(duì)根節(jié)點(diǎn)（12px），2rem時(shí)，我是它的2倍（24px）</p>
</body>
</html>
效果圖：
###6.對(duì)chrome 審查元素的功能做個(gè)簡(jiǎn)單的截圖介紹？
###7. 如下代碼，設(shè)置 `p` 為幾 `rems`，讓`h1`和`p`的字體大小相等?
答案是：`6rem`.瀏覽器（google和IE）默認(rèn)根節(jié)點(diǎn)`html`大小為`16px`，現(xiàn)設(shè)大小為62.5%，即`10px`
<style type="text/css">
html{
font-size: 62.5%;
}
p{
font-size: 6rem;
}
h1{
font-size: 60px;
}
</style>
</head>
<body>
<h1>饑人谷</h1>
<p>饑人谷</p>
</body>
瀏覽器顯示：
##動(dòng)手
[代碼](https://github.com/jirengu-inc/jrg-renwu6/tree/master/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A15)
**本文著作權(quán)歸作者所有；如需轉(zhuǎn)載請(qǐng)聯(lián)系饑人谷，并注明原文出處。**