一、CSS的定义
1、什么是css
Cascading Style Sheet
层叠样式表
级联样式表
样式表
2、作用：
实现了内容和表现的分离
提高了代码的可重用性和可维护性
二、css样式表的使用方式
使用方式共分三种，使用任何一种都可以更改页面的样式。
1、内联方式
内联样式： 将css样式定义在HTML的标签中
特点：不通用，只能定义某一标签的单独样式。
2、内部样式表
将一系列样式定义在HTML的<head>中
特点：当前网页任何一个标签都可以使用，体现出可重用性。
3、外部样式表
将样式定义在外部的css文件中，可以由任何一个页面进行样式表的引用。
特点：真正意义的实现了样式表的可重用性
三、内联方式的css
定义在HTML标签中的style属性里
<h2 style="样式规则"></h2>
css的语法：
样式规则：属性名称：属性值
color:red
多个规则之间用;进行区分
background-color:blue;color:red;
四、内部样式表
样式内容出现在<head>中的<style>中
<head>
<title></title>
<style>
</style>
</head>
样式组成：选择器和样式声明
选择器：决定哪些元素能够使用定义好的规则
样式声明：由一对大括号包围着的样式规则
选择器
{
/*样式规则*/
属性名称：属性值;
属性名称：属性值;
}
五、外部样式表
step1：创建一个文件以css为后缀
step2:在文件中写与代码相关的选择器
step3:在页面中对css文件进行引用
<head> <link rel="stylesheet" type="text/css" href="引入样式表的地址"/> <style> @import "css/style.css"; /*其他样式定义*/ </style> </head>
六、css样式表特征
1、继承性
大部分的样式属性是可以被继承的
<body>
<p></p>
</body>
2、层叠性
可以为一个标签定义多个样式表
3、优先级
样式定义冲突时，会根据样式规则的优先级进行应用样式
级别最高：内联样式
其次：内部样式表和外部样式表，就近原则
4、调整优先级
!important
语法：
选择器{属性：属性值 !important;}
七、选择器
规定了哪些元素能够使用定义好的样式
1、通用选择器
表示：*
可以与任何一个元素匹配
多数用在设置网页整体的默认样式
*{
font-size:12px;
font-family:"Microsoft Yahei;"
}
2、元素选择器
由HTML元素名称作为选择器
作用：用于修改当前选择器所对应的元素的默认样式
表示：元素名称
p { font-size:12px; } div { color:red; }
3、类选择器
语法：.className
注意：类的名字不能以数字开始
使用：能够附带class属性的元素都能使用类选择器，将元素的class属性设置为类名即可
一个标签也可以同时引入多个类
<p class="important solid"></p>
类选择器和元素选择器结合使用：
能够实现对某种元素中不同样式的细分控制。又称为“分类选择器”
语法：元素选择器.类选择器{}
p.important{}
4、id选择器
特点：作用于指定id属性值得元素上
语法：#idname{}
#<head>{...}
<div id="head"></div>
id属性：
1、标识元素的唯一的值
2、引用样式表中的id样式
5、群组选择器
选择器的声明是以逗号隔开的选择器列表
作用：将相同的规则用于多个元素中
语法：选择器1，选择器2...{}
6、后代选择器
<div>
<span>
<span><span>
</span>
</div>
作用：根据元素的位置关系，找到元素，然后改掉样式
7、子代选择器
子代：只描述父子关系的，标签嵌套也局限于父子关系的嵌套
<fieldset>
<span class="s1"><span>
<div>
<span class="s2"></span>
</div>
</fieldset>
span.s1是fieldset的子代元素
span.s2是div的子代元素
span.s2是fieldset的后代元素
语法：
选择器1>选择器2{}
fieldset>span{}
fieldset>.s1{}
8、伪类选择器
作用：为一些选择器添加特殊的效果，多数表示的是一个元素（选择器）的不同状态
语法：
通过 ：作用结合符
选择器：伪类选择器
伪类的分类：
链接伪类
动态伪类
目标伪类
元素状态伪类
结构伪类
否定伪类
链接伪类：
：link尚未访问过的链接
：visited:访问过的连接状态
a:link{}
a:visited{]
动态伪类：
：hover 鼠标悬停在元素上的状态
：active 元素被激活时的状态
：focus 元素在获取焦点时的状态
需要掌握：
:link
:visited
:hover
:active
9、选择器的优先级
<div id="d1" class="red"></div>
div{color:blue;}
#d1{color:red;}
.red{color:yellow;}
内联>ID>类（伪类）>元素
10、尺寸
在HTML中哪些元素适合使用尺寸属性
1、所有的块级元素
div h1 p oi ul
2、大部分行内元素不适合使用尺寸属性span
3、存在width与height属性的元素img，table...
11、border:边框
方向：left,right,top,bottom
大小：width
样式：style
颜色：color
12、边框阴影
box-shadow:向方框添加阴影
box-shadow:h-shadow v-shadow blur spread color inset
【 h-shadow:必选，水平阴影偏移距离
v-shadow:必选，垂直阴影偏移距离
blur:可选，模糊程度
spread:可选，阴影尺寸
color：可选阴影颜色
inset：可选，将外部阴影改成内部阴影】
13、图片边框
由图片作为元素的边框的显示效果
border-image:src width repeat
repeat:
repeat:平铺
round:铺满
stretch:拉伸
border-image-source:图片的路径
border-image-source:url(img/aa.jpg);
border-image-width:图片边框宽度
border-image-repeat:边框平铺 repeat，round，stretch
14、轮廓
轮廓（outline）是绘制于元素周围的一条线，在边框的外围
语法：
outline：color style width;
outline-color:
outline-style:
outline-width: