CSS 自学笔记（上）
传送门：
1. 简介
CSS 是层叠样式表(Cascading Style Sheets)，用于定义 HTML 内容的样式。通过一次定义多次调用的方式可以减少代码复用。
p {
font-size:12px;
color:red;
font-weight:bold;
}
如上代码即为一个 CSS 样式，定义了字体大小为 12 px 、红色、粗体。
定义
CSS 样式由选择器和声明组成：
-
选择器：在 HTML 代码中使用的标签名，如上例中的p。 -
声明：大括号里的内容。
声明样式，按照 k:v 格式，以分号隔开。
注释
/*我是注释*/
2. 三种插入方式
内联式：把样式写在首标签里
<p style="color:red;font-size:12px">这里文字是红色。</p>
- 写在头标签里，不能写在尾标签中
- 所有属性都要写在 style="" 的双引号中
- 属性之间用分号隔开
嵌入式：写在 style 标签中
<style type="text/css">
span {
color:red;
}
</style>
外部式：写在外部文件中
第一步：建立文件
建立一个以 .css 为扩展名的文件，然后如下定义样式：
span {
color:red;
font-size:20px;
}
第二步：链接到 CSS 文件
在 HTML 文件中的 head 标签中添加 <link> 标签：
<link href="base.css" rel="stylesheet" type="text/css">
-
href="base.css"指定 CSS 文件 -
rel="stylesheet" type="text/css"是固定写法，rel 指的是 relationship，stylesheet 代表连接关系是样式表。
优先级
这三种插入方式是有优先级关系的，也就是说，如果我们同时使用三种功能不同的方式以相同的选择器名定义了三种样式，那么将会按照就近原则来判断具体采取哪种样式。
下面是个简单的证明：
首先定义一个外部样式：
外部样式
然后再 HTML 代码中使用一个蓝色的外部式、一个红色嵌入式、一个绿色内联式样式：
应用三种样式
结果是这样：
结果1
如果调换外部式与嵌入式的顺序:
调换后
那么结果就变成：
结果2
总结
- 就近原则，样式的声明与所作用的内容之间的行数越近，优先级越高。
- 通常，我们会把嵌入式写在外部式的后边，以保证嵌入式的优先级大于外部式。
- 外部式多用于式样的全局定义，减少代码复用。
- 嵌入式确保当前页面的样式统一。
- 内联式用来实现局部特殊化。
3. 选择器
标签选择器
** 声明：**
span {
color: red;
}
调用：
<span>内容</span>
类选择器
类选择器通常用与复杂、重叠的元素样式。
** 声明：**
.green {
color: green;
}
调用：
<span class="green">内容</span>
声明有 "
." ，调用没 "." 。
id选择器
id 选择器与类选择器基本相同，只是：
"
." 换 "#"，"class" 换成 "id"
** 声明：**
#blue {
color: blue;
}
调用：
<span id="blue">内容</span>
同一个 id 选择器在一个 HTML 文件中只能被使用一次。
id 选择器再调用时不能使用词列表的方式，即：
<span id="blue green yellow">内容</span>
但类选择器可以。
子选择器
子选择器作用于（使用类选择器的）标签的第一代子标签。
声明：
.food>span {
color: red;
}
调用：
<p class="food"><span>内容</span></p>
注意：子选择器在声明的时候，"
>" 左边是类选择器，右边是标签选择器！
后代选择器
后代选择器作用于（使用类选择器的）标签的所有后代标签。后代选择器的声明就是把子选择器的 ">" 换成 ""（）空格。
声明：
.food span {
color: red;
}
调用：
<p class="food"><a>嘿<b>啊<span>内容</span></b></a></p>
后代选择器会作用于所有后代标签。比如上例中的a、b、span 标签。
通用选择器
通用选择器用通配符 "*" 来表示，可以匹配当前页面所有的标签。
伪类选择器
先来个例子，主场跟客场踢球，无论哪个队赢，总会有观众在体育馆欢呼。尽管我们无法确定什么时候哪个队伍会赢，但是我们能预测总会有观众欢呼。伪类选择器其实就是在定义还没有发生但是肯定会发生的样式。
声明：
a: hover {
color: red;
}
调用：
<a href="www.google.com"></p>
hover 可以让鼠标悬停的元素触发效果，如上即是变成红色。伪类选择器就是对这种将会发生的事情进行样式声明。
伪选择器
常用的伪类选择器有 active、focus、hover、link、visited。
分组选择器
分组选择器旨在简化选择器的声明。
h1, span {
color: red;
}
上边的代码等价于：
h1 {
color: red;
}
span {
color: red;
}
