问答
1. 样式有几种引入方式? link 和 @import有什么区别？
- 四种引入方式：
- 使用style属性引入样式，方便灵活，但缺乏规划性、统一性，不利于维护。
<p style="color:red; margin-left:16px">
写给自己的：这是一段文字，心态失调啦，急躁啊，迷茫啊。。。。。。，这个要克服，忍一忍，认真对待每一个问题，不要偷懒、“发现——解决——掌握”，沉浸其中，淡定，淡定
</p>```
- 将样式代码写在页面`<style type="text/css">...</style>`标签之中：
<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>```
- 将样式单独写入一个文件，使用link标签，引入外部css文件
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="路径/名称.css">
</head>
rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”路径/名称.css”是文件所在的位置。media="all"是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等
- 使用@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区别：
1. 来源与作用：link属于XHTML标签，除了可以加载CSS外，还可以定义RSS，定义rel链接属性等其他作用；而@import则是CSS提供的一种方式，只能加载CSS；
2. 加载顺序不同：link引用的CSS会在页面被加载的时候同时被加载；而@import引用的CSS要等到页面全部被下载完再被加载，这样出现的问题是，浏览网页时开始没有样式，之后页面闪烁一下出现样式，网速慢的时候更明显。
3. @import可以在CSS中再次引入其他样式表。创建一个主样式表，在主样式表中引入其他的样式表（代码如上）。这样的好处是便于修改和扩展。将CSS拆分成文件，虽然对于开发和维护来说比较方便和清晰，但是会对服务器产生较多的HTTP请求，所以@import不适用于大型网站。像一些大型访问量大的网站的首页，会把CSS或js 直接写在html 中。
4. 兼容性的差别：@import是CSS2.1提出的，不支持IE5以下浏览器 ，这点可以不考虑。
###2. 文件路径../main.css 、./main.css、main.css有什么区别？
* main.css：代表这个css文件；
* ./main.css：main.css文件所在当前目录；
* ../main.css：上一级目录。
###3. console.log是做什么用的？
用于调试，把信息展示在控制台。
###4. text-align有几个值，分别有什么作用？
* 定义：该属性规定元素中的文本的水平对齐方式。
<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">
很长的一段文字很长很长的，没了!（图片格式被换了）
<p><a href="#" class="inline">这样挺好</a>我继承了父元素</p>
<p class="son"><a href="#" class="inline">我要做自己</a>我自己设置了对齐方式，不再继承</p>
</div>
</body>
效果图：
###5. px、em、rem分别是什么？有什么区别？如何使用？[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是相对于显示器屏幕分辨率而言的
* em：相对于相对于其父元素来计算；
* rem：它相对于根结点`<html>`（不是body的字体大小）来计算。
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">
我是参照物（父元素），我为自己设字体大小24px.
<p class="son1">我是子元素，1em时，我也是24px；</p>
<p class="son2">我是子元素，2em时，我是48px.</p>
</div>
我是参照物（总的）：我是12px
<p class="p1">我相对根节点（12px），1rem时，我也是12px；</p>
<p class="p2">我相对根节点（12px），2rem时，我是它的2倍（24px）</p>
</body>
</html>
效果图：
###6.对chrome 审查元素的功能做个简单的截图介绍？
###7. 如下代码，设置 `p` 为几 `rems`，让`h1`和`p`的字体大小相等?
答案是：`6rem`.浏览器（google和IE）默认根节点`html`大小为`16px`，现设大小为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>
浏览器显示：
##动手
[代码](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)
**本文著作权归作者所有；如需转载请联系饥人谷，并注明原文出处。**