最近花了一段时间学习了HTML5相关知识，不得不说，HTML的标签及属性等等实在是太多了，如果不经常练习的话，很难做到信手拈来。我们知道HTML负责显示内容，而CSS则负责样式的定义，上篇博文介绍了HTML的一些基本标签及属性，所以今天主要介绍的是HTML5的另一个非常重要的知识点，也就是今天的主角CSS
1、CSS概述及作用
为html元素去定义样式，能够实现内容 与 表现相分离，提高程序的可重用性和可维护性。
2、CSS样式表的使用方式
（1）内联样式（行内样式）
特点
将样式定义在HTML元素中，只能控制某一个元素的显示效果
语法
<标记 style="样式属性1:值1;样式属性2:值2"></标记> 常用属性
color：文本颜色
background-color：背景颜色
font-size：字体大小，取值 以px为单位，单位必须要写上
例如：style=”font-size:20px”
（2）内部样式表
将所有的样式内容，放在<head></head>中的<style></style>元素内。
<style></style>中添加若干"样式规则"样式规则语法
选择器{
样式属性:值;
样式属性:值;
.....
}选择器
通过标记的名称来表示选择器
这样说估计有些童鞋不太明白，我们就以一个小案例解释下，我们接下来要实现的需求是这样的：我们给div或者p标签设置一些样式，我们就可以这样写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
div{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<div>这是一个div</div>
<p>这是一个段落标签</p>
</body>
</html>据说无图无真相。。那就来张效果图
特点
1、能够实现 内容与表现相分离
2、提升了样式的可重用性和可维护性
3、只能在一个页面中做通用样式定义
（3）外部样式表
将样式规则 保存在独立的样式文件中，最后再由页面对样式文件进行引用
特点
1、实现 内容与表现相分离
2、将可重用性 和 可维护性 体现的最完美（所有的页面都能用）
3、可以在整个网站乃至于互联网中做通用的样式定义
操作步骤
1、创建一个 样式表文件，纯文本文件，以 .css 结尾
该文件中，只能包含样式规则
样式规则语法：
选择器{
样式属性:值;
样式属性:值;
.....
}
2、在页面中，对样式表文件进行引用
在 <head></head>中增加以下代码
<link rel="stylesheet" type="text/css" href="链接的css文件地址" />下面我们就来个案例demo来具体解释下外部样式表的使用。
首先我们创建个index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div>这是一个div标签</div>
<p>这是一个p标签</p>
</body>
</html>接下来我们新建一个css.css文件，并在此外部样式表中设置div标签中的内容颜色为红色，p标签中的内容颜色为蓝色。下面给出 .css中的代码
div{
color: red;
}
p{
color: #00f;
}我们的index.html中通过 link 引用了外部样式表，代码看起来是不是清爽多了，哪天如果你想改变所有div标签中的文本颜色，再也不用一个个的修改了。只需要在外部样式表中更改就行了。最终效果如下图
3、CSS语法规范
（1）基本语法
样式声明： 属性:值
样式规则： 选择器 和 样式声明
（2）CSS样式表特征
① 继承性
大部分的CSS样式属性，是可以被继承的
子级不用单独定义样式，可以直接继承父级的东西
② 层叠性
为一个元素定义多个样式的时候
样式不冲突时，多个样式表中的样式可以层叠（合并）成一个样式表
③ 优先级
样式冲突时，按照不同样式规则的优先级来应用样式。
优先级：
1、浏览器默认设置（User Agent Style），级别最低
2、内部样式表 或 外部样式表 他们的级别处于中间位置。
注意：就近原则（谁后定义的就用谁，离谁近就用谁）
3、内联样式（行内样式）。 级别最高
④ !important规则
可以通过 !important 显示调整样式优先级，!important优先级最高
语法规范：
样式属性:属性值 !important;
注意：IE低版本中是不支持!important属性的。所以需谨慎使用
注意
调试中样式上画横线表示的含义：1、该样式被覆盖了 2、属性名称或者值写错导致的
Unknown property name：样式属性名称写错了
Invalid property value：样式属性值写错了
4、CSS基础选择器
（1）选择器的作用
规范了页面中的哪些元素能够使用定义好的样式。
例如：
div{
color:red;
}
（2）选择器（这块是重点）
① 通用选择器
作用：匹配页面中所有的元素
语法：*
例如：
*{
color:red;
}
* 表示匹配，在页面上会匹配多次（为每一个元素都要匹配）
与body{}标签的区别
body{
color:red;
}
body{} 在页面上只匹配一次，其余都是继承，效率更高。所以能不使用 * 号，就尽量不使用 * 号
② 元素选择器
又叫标签选择器、标签样式
作用：定义 / 修改特定 标记 的默认样式
语法：标记名称作为选择器
例如：
div{
…
}
p{
…
}
③ 类选择器
作用：定义公共样式，可以由其他标记 灵活 引用
语法： .类的名字
使用：通过标签的class属性对 类的名字 进行引用（只是对类的名字进行引用，跟 . 无关，点只是个标识）
注意：
1、类的名字 不能以数字开头（例如：不能以 .123{} ）
2、如果一个标记想同时引用多个类的话，中间用 空格 来区分
关于类选择器，我们举个例子加以说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
.d1{
color: red;
}
.p1{
font-size: 30px;
}
</style>
</head>
<body>
<div class="d1">这是一个div标签</div>
<p class="p1">这是一个p标签</p>
<!-- 一个标记想同时引用多个类的话，中间用 空格 来区分 -->
<p class="d1 p1">一个标记想同时引用多个类的话，中间用 空格 来区分</p>
</body>
</html>无图无真相，那就来张效果图
④ 类选择器 - 分类选择器
作用：将类选择器 和 元素选择器 结合到一起，从而实现对某一种元素中不同样式的细分控制，其目的就是缩小范围
语法： 元素选择器.类选择器{}
div.d1{
…
}
⑤ id选择器
作用：匹配页面中指定id值的元素的样式
语法：
#id的值{
...
}
例子：
#mea{
color:red;
}
<div id="mea">
....
</div>⑥ 群组选择器
以 , 逗号隔开的选择器列表
作用：定义一组选择器的公共样式
语法：
选择器1,选择器2,选择器3,.....{
......
}
例子：
div,p,span,#mea,.hehe{
color:red;
}⑦ 后代选择器
通过标签的父子级关系，来声明定义样式
语法：
选择器1(即：父级) 选择器2{}
例子：
/*所有 div 元素里，所有的p元素*/
div p{
}
/*id为mea的元素里所有的p元素*/
#mea p{
}
注意：不强调层级关系⑧ 子代选择器
要求选择器之间只能存在 父子关系
语法：
选择器1>选择器2
注意：子代选择器，只向下找一级，多了不管
例子：
/*匹配id为mea元素的 下一级的 所有div元素*/
#mea>div{
....
}
/*匹配 id为mea的元素中 下一级 class为hehe的元素中 下一级的 div元素*/
#mea>.hehe>div{
....
}⑨ 伪类选择器
1、作用：匹配元素不同的状态
2、伪类选择器 分类
1、链接伪类
:link 匹配尚未访问的超链接（类似默认状态）
:visited 匹配访问过的超链接（类似按下松开后的效果）
2、动态伪类
:hover 匹配鼠标悬停在html元素上的状态
:active 匹配元素被点击时的状态
:focus 匹配元素在获取焦点时的状态（在text、password中使用居多）
3、语法：
:伪类选择器{
....
}
4、例子：
#div a:hover{
.....
}
注意：
对于超链接的伪类设置，一般情况下只设置两种选择器即可
1、该标记的默认样式
2、鼠标移入到该标记的样式 对于伪类选择器，我们就以一个简单的例子解释下，需求是这样的，有个超链接，当鼠标放上去时，改变超链接的文本颜色以及文本大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
.d1{
color: red;
}
.p1{
font-size: 30px;
}
#div a:hover{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="d1">这是一个div标签</div>
<p class="p1">这是一个p标签</p>
<!-- 一个标记想同时引用多个类的话，中间用 空格 来区分 -->
<p class="d1 p1">一个标记想同时引用多个类的话，中间用 空格 来区分</p>
<div id="div">
<a href="#">这是一个超链接标签</a>
</div>
</body>
</html>效果图，需要两种图对比说明，一张是默认，另一张是当鼠标放上去时（小手形状的鼠标截图时截不了）
选择器优先级
选择器类型 权值
——————————————————————————————————————————————————————————————————————
元素选择器 0,0,0,1 可以看作 1
类选择器 0,0,1,0 可以看做 10
伪类选择器 0,0,1,0 可以看做 10
ID选择器 0,1,0,0 可以看做 100
内联样式 1,0,0,0 可以看做 1000
值越大的则优先级越高，当权值相同时，则离得最近的优先级高。这里可以看出，内联样式的优先级最高
如果选择器冲突的时候，最终以 权值相加 大的为主
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
