本教程版权归凯旋和饥人谷所有，转载须说明来源
一 、样式有几种引入方式 ?
1.外部样式也称外联式（Linking）：将网页链接到外部样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>```
2.内页样式也称嵌入式（Embedding）：在网页上创建嵌入的样式表。
<head>
<style type="text/css">
body {
background-color: green;
}
</style>
</head>
3.行内样式也称内联式（Inline）：应用内嵌样式到各个网页元素。
<p style="color: red; margin-left: 20px">
this is word
</p>
> *1.2* link和@import的区别
link
和@import
都是外部CSS引入样式，区别在于@import
属性用来指定导入的外部样式表及目标设备类型， link
除了调用CSS外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import
就只能 调用CSS。最根本的区别在于link
是html的一个标签，而@import
是一个CSS的一个标签。
但是我们不提倡是用@import
因为使用@import
引用的文件只有在引用它的那个css文件被下载、解析之后，
浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、
构建render tree等一系列操作。 浏览器在页面所有css下载并解析完成后才会开始渲染页面.因此css@import
引起的css解析延迟会加长页面留白期。 所以，要尽量避免使用css @import
而尽量采用link标签的方式引入。
补充性总结：
① link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS，定义 rel 连接属性，等，@import 就只能加载 CSS 了。
② link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
③ link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。
④ link是 XHTML 标签，无兼容问题；@import 是在 CSS2.1提出的，低版本的浏览器不支持。
@import css中应用实例：
@charset "UTF-8";
/**
- @authors Your Name (you@example.org)
- @date 2016-01-17 13:45:56
- @version $Id$
*/
@import url(./index.css);
@import html中应用实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>饥人谷-凯旋</title>
<meta name="description" content="第一次作业">
<meta name="keywords" content="凯旋">
<style type="text/css">
@import url(css/index.css);
</style>
</head>
<body>
<div>
<h1>第一次作业</h1>
<p>
设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333,
</p>
<p>
设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高
</p>
</div>
</body>
</html>```
link使用实例：(导入CSS)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>饥人谷-凯旋</title>
<meta name="description" content="第一次作业">
<meta name="keywords" content="凯旋">
<link href="css/index.css" rel="stylesheet" type="text/css">
<!-- <link>标记必须放到页面的 <head>type="text/css"
表示这个信息的类型是 "text/css" 。换句话说，这是一个 CSS 样式表。在 HTML5 中，
不再需要这个属性（可选）。rel="stylesheet" 此属性指定了
HTML 文件与所链接的文件之间的关系。
我们要链接到一个样式表，这里使用值 "stylesheet"。href="index.css" 是文件所在的位置。
区内。-->
</head>
<body>
<div>
<h1>第一次作业</h1>
<p>
设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333,
</p>
<p>
设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高
</p>
</div>
</body>
</html>
二 、 文件路径../main.css、./main.css、main.css有什么区别
…/main.CSS
表示父目录的main.ccs文件
./main.css
表示当前目录
/main.css
表示根目录
三 、console.log是做什么用的
主要是方便调式javascript用的。可以看到在页面中输出的内容。
相比alert的优点是：
console.log能看到结构话的东西，如果是alert，
淡出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，
但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到：
Console {memory: MemoryInfo, debug:
function, error: function, info: function, log: function…}
四 、text-align有几个值，分别有什么作用
①left 把文本排列到左边。
②right 把文本排列到右边。
③center 把文本排列到中间。
④justify 实现两端对齐效果,在一行文字较多时，使用此效果，
可以使文字较为均匀的分布于行内，由于字数较多，字间距较小，视觉效果可以忽略。
五、 px、em、rem分别是什么？有什么区别？如何使用？
px：px是相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em：em是指相对于父元素的大小, 例如 ·font-size
中设置一个<div>
字体为16px,那在此div 后代继承字体大小均为16px ，
如果设置其中某子元素 字体大小为0.5em，那此元素字体大小为8px，2em则为32px
rem：rem是指相对于html根元素的字体大小。
六、chrome 审查元素功能简单的截图介绍
浏览器默认字体大小是16px，h1的字体大小是60px，则16×0.625×?=60px。解出来为6，所以是6rem。
