web-02-css
1、css作用
1）用来修饰html
2）告诉浏览器以什么样的方式显示html元素
3）实现内容与表现层分离，提高代码的重用性和维护性
注：（标签=标记=节点=元素=css）
2、如何使用css
1）行内式 ---> 只对当前元素有作用（不推荐）
不推荐原因：修改和阅读麻烦，行内优先级最大
<标签名 style="样式名:值"></标签名>
style="属性:值;属性:值...."
style的值可以有多个（属性:值），多个样式用“;”隔开
2）内部式 --> 对当前页面内的节点起作用
-1. 在<head>中添加style标签
-2. 在style标签中写css语法
css语法规范：
选择器{
//css声明
属性:值;
属性:值;
}
3）外部式
好处：一次编写多次使用
-1. 编写外部css文件
建议在顶行加上 @charset "utf-8"; 定义编码格式
-2.在html页面中引入css文件
<link href="css文件路径" rel="stylesheet" type="text/css">
3、CSS选择器（重点：找节点）
1）元素选择器（标签选择器）
2）类选择器（class是用在css中）
写法： .类名
通常用作将页面不同节点设置同一个样式
3）id选择器（id是给js用的）
写法：#id值
id值需要唯一（通常id是用在js中）
注：通过 .class/#id值 作为选择器
4、选择器类型升级版
1）交集选择器（以上面三张选择器作为基础）
选择器1选择器2（之间不用任何符号）
如：li.c_red //查找页面上class为c_red的li节点
注：多个选择器之间没有任何符号，用空格隔开
class="c_red big"
.c_red.big{}
2）并集选择器
选择器1,选择器2（之间用都号隔开）
如：h1,h2 //查找页面上的h1和h2节点
3）后代选择器
选择器1 选择器2（之间用空格隔开）
如：div li //查找页面上在div中的所有li节点
4）儿子选择器（只找下一代）
选择器1>选择器2
如：body>ul //查找页面上body的儿子节点ul
5）下一个弟弟选择器
选择器1+选择器2
如：h1+h2 //用于查找紧跟在h1节点后面的同级h2节点
注：a链接
:link-->未被访问过的超链接
:hover-->当鼠标悬停时显示的样式（如：li:hover）
:active-->未被激活的元素
:visited-->已经访问过得超链接
:focus-->获取焦点
写选择器遵循“爱恨原则”：（LoVe HAte）
5、CSS特性
1）继承性
父元素的css声明可以被子元素继承（如字体颜色等）
2）层叠性
同一个元素若存在多个css规则，对于不冲突的样式，可以叠加。若冲突则考虑下一个特性
3）权重（优先级）---不推荐使用
-1. 从引用方式来看：
行内式优先级>内部式>外部式
-2. 根据选择器来看（优先级）
id>class>标签选择器
注意：继承的权重等于零
权重的比较公式：id个数/class个数/标签的个数
-3. 样式冲突时比较规则：
* 先看是否选中项
若一个选中一个没有选中，听选中的
* 若都选中
比权重（id个数/class个数/标签的个数）听权重大的，后来居上
* 若都没有选中
-比远近 -->听距离近的
-若远近一样 -->比权重
-若权重一样-->后来居上
注意：!important 关键字作用提高权重，使其无限大
