第6章 学习CSS，为网页添加样式
认识CSS样式、了解CSS样式的优势、最后讲解CSS代码语法和CSS注释代码。
6-1 概念
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
6-2 重要性
我们想把标签中spanb“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就可以通过设置样式span{color:red;}来设置，而且只需要编写一条css样式语句。
6-3 语法
css 样式由选择符和声明组成，而声明又由属性和值组成。
6-4 注释 /* 注释内容 */
第7章 CSS样式基本知识
CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种
7-1 内联式css样式，直接写在现有的HTML标签中
<span style="color:blue;font-size:12px">超酷的互联网</span>
7-2 嵌入式css样式，写在当前的文件中
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
<style type="text/css"> span{ color:blue; } </style>
7-3 外部式css样式，写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，
<head> <title>嵌入式css样式</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head>
7-4 三种方法的优先级
内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
第8章 CSS选择器
选择器{ 样式; }
标签选择器： 标签选择器{ }
类选择器： .类选择器{ }
ID选择器: #ID选择器{ }
8-5 类选择器和ID选择器
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
8-6 子选择器
大于符号(>),用于选择指定标签元素的第一代子元素。
.food>li{border:1px solid red;} food类别下面的li标签
8-7 包含(后代)选择器：
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。
.first span{color:red;}
子选择器和包含选择器的区别：
子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。
子选择器是通过“>”进行选择，后代选择器通过空格来进行选择。
.first span{color:red;}
8-8 通用选择器
功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
8-9 伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。
8-10 分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
第9章 CSS的继承、层叠和特殊性
9-1 继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
eg、颜色可以继承；边框不能继承。
9-2 特殊性：多个css，使用权值最大的css
我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?
按照权值决定：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。（注意：继承权值最低，只有0.1）
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
9-3 层叠：权值相同时，使用最后的css样式
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
其解释了css优先级：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
9-4 重要性
特殊的情况需要为某些样式设置具有最高权值
p{color:red!important;}
第10章 CSS格式化排版
文字：字体、颜色、字号、粗体
body{
font-family:"Microsoft Yahei";
font-size:12px;
color:#666;
font-weight:bold;
font-style:italic;}
下划线、删除线
span{
text-decoration:underline;
text-decoration:line-through;}
缩进、行间距、中文/英文字间距
p{
text-indent:2em;
line-height:2em;
letter-spacing:50px;
word-spacing:50px;
}
居中、左、右
div{text-align:center;}
第11章 CSS盒模型
11-1 元素分类
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
11-2 块级元素
display:block就是将内联元素显示为块级元素。
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
11-3 内联元素
display:inline将块级元素设置为内联元素
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
11-4 内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。
display:inline-block将元素设置为内联块状元素。(css2.1新增)
<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。