1.样式复用，方便网站的后期维护；
2.实现页面的精确控制，实现精美复杂页面；
3布局定位；
4外观美化；
1 【三种使用CSS的方式】
1、行内样式表：直接在HTML开始标签中使用style=""的方式引用；
特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。
2、内部样式表： 在<head></head>中，使用<style type="text/css"></style>方式引用；
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式。
3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特点：实现了CSS与HTML的彻底分离，有利于样式复用及后期维护。
【通用选择器】
1、写法： *{}
2、作用： 选中页面中的所有HTML标签
3、优先级：最低！
【标签选择器】
1、写法： HTML标签名{ }
2、作用： 选中所有对应的HTML标签，并修改其样。
【类选择器 class选择器】
1、写法： .选择器名{}
2、调用： 在需要修改样式的HTML标签上，使用class="选择器名"
3、优先级： 当作用于同一层时，class选择器>标签选择器
.list{
color: blue;
}
【ID选择器】
1、写法： #选择器名{}
2、调用： 在需要修改样式的HTML标签上，使用id="选择器名"
3、优先级：同一层时，id选择器>class选择器
4、ID选择器是唯一的！同一页面严禁出现同名ID！！！
#first{
color: green;
}
【后代选择器】
1、写法： 选择器1 选择器2 …… 选择器N {}
2、生效规则： 选择器2必须是选择器1的【后代】……以此类推
【子代选择器】
1、写法： 选择器1>选择器2>……>选择器N{}
2、生效规则： 选择器2必须是选择器1的【直接子代】……
div>ul>li{
}
【交集选择器】
1、写法： 选择器1选择器2……选择N{}
2、生效规则： 必须同时满足所有选择器，才会生效
li.list#first{
}
【 并集选择器】
1、写法： 选择器1,选择器2,……,选择N{}
2、生效规则： 满足任意一个选择器，均可生效
.list,#first{
color: darkslategray;
}
【选择器命名规范】
1、只能有字母、数字、下划线组成；
2、开头不能是数字。
【选择器优先级】
1、就近原则：近者优先。
2、当作用于同一层时：可有权重计算
权重划分： 标签选择器 1
class选择器 10
id选择器 100
行级样式表style="" 1000
#ul .li .li2 li{} 优先级权重121
li .li1 .li2 .lis2 {} 优先级权重31
#ul #li li{} 优先级201
【伪类选择器】
未访问与已访问互斥，必须在前面，激活选定状态，鼠标点击，hover鼠标放上去 写法：选择器的名称：伪类状态；
常见的四种伪类状态；
1，link未访问状态，2visited已访问状态，3hover鼠标指上，4active激活选定状态（鼠标点下去未松开）；5focus 获得焦点时（input常用）
2.超链接多种伪类并存的顺序：link （visited） hover active
[margin属性值]
margin属性值最多有四个
当只写一个时，四个方向均为这个值；
当写两个时，上右{下面默认等于上边，左边默认等于右边}
当写三个时，上右下{左边默认等于右边}
写四个时，上右下左
margin:50px 30px 10px auto;{写三个值+auto：控件居右显示}
*左右两边auto表居中
margin:0 auto （上下为0，左右居中）设置块级元素在父容器中水平居中
[border边框]
三个属性，宽度，样式style，颜色（不写默认为黑色）
【padding 内边距】
[box-shadow 盒子阴影]
* 1、六个属性值，空格分割：
* x轴阴影距离：(必选) 可正可负，正——右移 负——左移
* y轴阴影距离：(必选) 可正可负，正——下移 负——上移
* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小
* 阴影颜色：(可选) 默认为黑色
* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
box-shadow: 0px 0px 10px 0px blue inset;
[border-radius 圆角]
* 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
* 例如：border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
* 3、只写一个数，默认8个值均相等。
使用padding会将整个控件撑大，使用时要注意整个可视区域的实际大小
圆环设计
【圆形】 方法1 .div3{
width: 200px;
height: 200px;
border-radius:100px;
#F2AD0A;
}
.div3 .div4{
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 50px;
border-radius:50px;
position: absolute;
}
方法二 .div5{
width: 100px;
height:100px;
border: 50px solid #F2AD0A;
border-radius:100px；
}
![]()
[border-image 图片边框]
* 1、十个属性：
* ① 图片路径：url()
* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
* 写的时候，不能带px单位
* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
* 写的时候，必须带px单位
* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
* 2、属性值写法：border-image: ① ②/③px ④;
* 第②部分可以只写1个、2个、3个，判断方式同margin
JE_4ETR%24T%60HF8L.png)
