页面中所有CSS代码，需要写入到<style></style>标签中。
style标签的type属性应该选择text/css,但是type属性可以省略。
1、CSS常用选择器
CSS修改页面中的所有标签，必须借助选择器选中。
选择器中可以写多对CSS属性,用{}包裹：每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔
选择器｛
属性1:属性值1;
属性2:属性值2;
｝
1-1、标签选择器
写法：HTML标签名{}
作用：可以选中页面中，所有与选择器同名的HTML标签。
li{
color: red;
font-size: 24px;
}
1-2、类选择器(class选择器)
写法：.class名{}
调用：在需要调用选择器样式的标签上，使用class="class名"调用选择器
优先级：class选择器>标签选择器，两个起冲突时，优先级高的生效
注意：如果需要两个类名，用空格分隔
.first{
color: blue;
}
1-3、id选择器
写法：#id名{}
调用：需要调用样式的标签，起一个id="id名"
优先级：id选择器>class选择器
注意：一个页面中，不能出现同名id
#one{
background-color: yellow;
}
【class选择器与id选择器的区别】
1、写法不同：class选择器用.声明，id选择器用#声明
2、优先级不同：id选择器>class选择器
3、作用范围不同：class选择器可以多次调用，id选择器只能使用一次。
选择器的命名规范
1、只能有字母、数字、下划线、减号组成；
2、开头不能是数字，也不能是只有一个减号
一般起名要求有语义，使用英文单词与数字的组合。
1-4、通用选择器
写法：*{}
作用：可以选中页面中所有的HTML标签
优先级：最低！！！
*{
color: orange;
}
1-5、并集选择器
写法：选择器1,选择器2,选择器3,……,选择器n{}
生效规则：多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。
li,.first{
color: red;
}
1-6、交集选择器
写法：选择器1选择器2……选择器n{} 所有选择器挨着，没有分隔
生效规则：多个选择器取交集，则必须满足所有选择器的要求，才能生效
li .first{
}
1-7、后代选择器
写法:选择器1 选择器2 …… 选择器n{} 选择器之间空格分割
生效规则：只要满足，后一选择器是前一个选择器的后代，即可生效。
（后代包括子代、孙代、重孙代。。。）
通俗地讲：只要后一个选择器，在前一个选择器里面即可。
div span{
}
1-8、子代选择器
写法:选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
生效规则：必须满足，后一个选择器是前一个选择器的直接子代，才能生效。（中间不能隔任何标签）
div>span{
}
[伪类选择器]
写法：伪类选择器, 在选择器后面用:分隔，紧接伪类状态；
eg: .a:link .a:visited .a:hover .a:active
2、超链接的伪类状态：
：link--未访问状态 ：visited--已访问状态
：hover--鼠标指上状态 ：active--激活选定状态(鼠标点下未松)
注意：当超链接多种伪类状态同时存在时，必须按照link--visited--hover--active的顺序，
否则会导致部分选择器不生效。
3、input的伪类状态：
：hover ：focus--获得焦点状态 ：active
注意：input的多种状态同时存在，必须按照上面的顺序。
4、其他标签，基本只用：hover状态。
2、CSS的导入方式及优先级权重
2-1、优先级的权重
1、CSS生效的第一原则是：近者优先！ 即，哪个选择器作用于最里层标签，则这个选择器生效；
2、当选择器作用于同一层时，可以根据优先级权重进行累加计算：
id选择器*100>class选择器*10>标签选择器*1
注意：并集选择器，相当于多个选择器拆开写，所以，并集选择器的优先级不能累加
3、当选择器作用于同一层，且优先级权重相等时，写在最后的选择器 生效
2-2、引入CSS的三种方式
1、行内样式表：直接在HTML标签中，使用style=""的方式引用；
<div style="height: 100px; "></div>
优点：使用灵活，优先级权重最高；
缺点：不符合w3c关于“内容与表现”分离的要求；不利于样式复用；
2、内部样式表：在<head></head>标签中，使用<style>标签包裹CSS代码；
特点：一定程度上实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面共用样式。
3、外部样式表：将CSS单独写入CSS文件中，并于HTML文件关联。
优点：彻底实现HTML与CSS的分离，符合W3C规范，有利于多页面复用统一样式。
2-2-1、导入CSS文件的两种方式
1、在<head></head>标签中，使用link链接：
引入外部CSS样式表：
rel：选择stylesheet
type：选择text/css，可以省略
href：表示链接的CSS文件路径
<link rel="stylesheet" type="text/css" href="CSS/02-CSS.css" />
2、在style标签中使用@import导入
@import url("CSS/02-CSS.css");
[两种导入方式的区别]
①link属于标准的HTML标签，而@import不是标准标签；
②link可以兼容所有低版本浏览器，而@import只在CSS2之后能用；
③link是将两个文件链接起来，起桥梁作用，而@import相当于将CSS文件复制到HTML文件中；
④link会在HTML文件边加载的过程中，边链接CSS文件；
而@import会在HTML文件全部加载完以后，再导入CSS文件
3、CSS常用文本属性
^CSS中的颜色表示方式^
①直接使用颜色的单词表示：red green blue
②使用颜色的十六进制丨表示：#ffffff
六位数，两两分组，分别表示红、绿、蓝的配比；
③使用rgb(0~255,0~255,0~255)三位数，分别表示红、绿、蓝的配比；
④rgba():第四位数表示透明度。
width: 200px;
height: 200px;
background-color: rgb(255,255,255);
3-1、CSS常用文本属性
1、字体字号类：
①font-weight： 字体粗细， bold-加粗、normal-正常、lighter-细体
也可以使用100~900数值，400表示normal，700表示bold
②font-style： 字体样式。 italic-倾斜、normal-正常
③font-size：可以写像素单位px，也可以写%
200%表示浏览器默认大小(16px)的两倍=32px
④font-family： 字体系列(字体族)。
>>>可以直接写字体名，也可以直接写字体系列名。
>>>常用字体：serif-衬线体 sans-serif-非衬线体
font-family可以接收多个值，用逗号分隔。表示优先使用第一个，
>>>如果没有这个字体，依次向后使用。通常，最后一个值放字体系列名：
eg:fongt-family: "微软雅黑","宋体",sans-serif;
⑤font缩写形式：
>>>顺序必须是font-weight font-style font-size/line-height font-family
>>>不同属性之间用空格分隔；
>>>font-size/line-height必须一组，用/分隔
>>>font-family多个字体之间，用逗号分隔
eg: font: bold丁italic 32px/50px "微软雅黑",serif;
2、字体颜色
①color：字体颜色 可以是单词、十六进制、RGB等
②opacity：透明度，可选值0-1
[rgba和opacity的区别]
>>>RGBA本身可以设置颜色，而opacity必须配合其他颜色属性使用
>>>rgba仅仅是让当前元素设置的颜色透明；
而opacity，会让当前元素里面的所有文字、背景、子元素都透明。
3、行距、对齐、其他类
①line-height：行高。 可以写像素单位、可以直接写数字(表示默认行距的几倍)
可以写%(表示默认行距的百分比
>>>行高重要作用：让单行文字在div中垂直居中
设置行高等于div的高度，及可让单行文字垂直居中。(非常 常用)
②text-algin：设置区域内的行级元素水平对齐方式；left、center、right
③letter-spacing: 字符间距，字与字之间的距离
④text-decoration: 文本修饰；
underline-下划线、overline-上划线、line-through-删除线、none
⑤overflow：设置超出区域文字的显示方式。
>>>overflow: hidden; 超出区域的文字吟唱不显示；
>>>overflow: scroll:无论文字多少，都会显示水平垂直滚动条；
>>>overflow: auto：自动，默认效果。文字多显示滚动条，文字少不显示滚动条
>>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条。
overflow-x: scroll;overflow-y: hidden;
⑥text-overflow：设置行末多余文字的显示方式；
>>>clip：多余文字裁剪掉 ellipsis： 多余文字显示省略号
>>>显示省略号需要配合white-space：nowrap；使用
>>>【重点】设置行末显示省略号(三行代码，缺一不可)
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
⑦white-space：nowrap；设置中文行末，不断行显示
⑧text-indent：首行缩进。
⑨-webkit-text-stroke: 文字描边。
-webkit-表示挚友webkit内核的浏览器生效，常见的有chrome、safari
⑩text-shadow： 文字阴影，有四个属性值，空格分隔
>>>水平阴影距离，正数：表示阴影右移，负数：表示阴影左移；(左负右正)
>>>垂直阴影距离，正数：表示阴影下移，负数：表示阴影上移；(上负下正)
>>>阴影模糊距离，0表示阴影一点不模糊；
>>>阴影颜色；
缩写形式：text-shadow: 2px 2px 2px blue;
#div{
font-weight: bold;
font-style:italic;
font-size: ;
font-family: serif;
font: bold italic 16px/50px "微软雅黑",serif;
background-color: red;
opacity: 0.5;
line-height: 20px;
text-align: center;
letter-spacing: 5px;
text-decoration: underline;
overflow: auto;
white-space: nowrap;
text-overflow: ellipsis;
text-indent: 20px;
-webkit-text-stroke:0.5px blue;
text-shadow: 2px 2px 2px blue;
}
3-2、CSS常用背景属性
1、background-color：背景色
2、background-image: 背景图。 使用url("")选择背景图片。
背景图和背景色同时存在时，背景图覆盖背景色。
3、background-repeat: 背景图的重复方式，
no-repeat：不平铺，repeat：平铺，repeat-x：沿x轴平铺，repeat-y：沿y轴平铺
4、background-size:背景图的大小
[指定宽度 高度的写法]
>>>宽度高度的指定，可以写px，也可以写%(父容器宽高的百分比)
>>>当写两个属性时，分别表示宽度、高度
>>>当写一个属性时，表示宽度，高度将会 等比缩放
[其他属性]
>>>contain：图片等比缩放，直到宽或高中较大的一边所放到100%为止。
(可能导致较短的一边<100%，图片无法覆盖全部区域)
>>>cover：图片等比缩放，直到宽或高中较小的一边缩放到100%为止。
(可能导致较大的一边>100%，图片超出区域显示不全)
5、background-position: 背景图偏移量
>>>指定位置:left/center/right top/center/bottom
当只写一个值时，另一个默认居中。
>>>指定坐标:两个属性分别表示 水平位移 垂直位移
①坐标的值，可以是px单位，也可以是百分数
②当写像素单位时：
水平方向：正数右移 负数左移；垂直方向：正数下移 负数上移；
(左负右正 上负下正)
③当写%百分数时：一般只能是正数。
表示的是，父容器去掉图片的宽高，剩余空白区域的分布比例。
eg：background-position:30%； 水平方向去掉图片宽度，剩余区域3：7分
#div2{
width: 25px;
height: 25px;
/*background-color: yellow;*/
background-image: url("img/icon.gif");
white-space: nowrap;
text-indent: 30px;
line-height: 25px;
background-position: -133px 0px;
}
#div3{
width: 24px;
height: 28px;
background-image: url("img/icon.gif");
white-space: nowrap;
text-indent: 30px;
background-position: 0px -170px;
}
#div4{
width: 42px;
height: 19px;
background-image: url("img/icon.gif");
text-indent: 9px;
font-size: 14px;
white-space: nowrap;
line-height: 16px;
background-position: 0px -30px;
}
※这里还有个小知识点
list-style: 修改小黑点的样式；
none 去点小黑点
url() 可以使用url导入一个小图片，作为列表的标识符号
float: 浮动 可以实现让块级元素，在一行中显示
