这是我参与「第四届青训营 」笔记创作活动的的第2天
一、CSS简介
CSS叫做层叠样式表，是用来负责表现的。
CSS可以用来为网页创建样式表，通过样式表可以对网页进行装饰
二、CSS的三种写法
1、 可以将CSS样式编写到标签的style属性中。
例：<p style=“color:red; font-size:20px”></p>
将样式表直接编写到style属性中，这种样式我们称为内联样式，内联样式只对当前的元素中的内容起作用。(只对一个进行修改)
2、 也可以将CSS样式编写到head中的style标签里。
<style type=”text/css”>
…
</style>
3、 还可以将样式表编写到外部的CSS文件中，然后通过link标签，来将外部的css文件引入到当前页面中，这样外部文件中的css样式将会应用到当前页面。
例：
<link rel=”stylesheet”href=”css文件名称” />
注意：直接写名称必须将html文件和css文件放在一起。
将css样式统一编写到外部的样式表中，完全使表现和结构分离，可以使样式表在不同的页面中使用，通过link标签引入，可提高用户体验。
推荐第三种方法，但还是要根据实际情况而定
三、css语法
注意：style标签或css文件里写的必须全为css代码，不可出现html代码。
1、 注释
Css中的注释是 /*内容*/
2、语法
选择器：就是通过选择器可以选择页面中指定的元素，并将声明块中的样式应用到所选择的元素上。
声明块：声明块紧跟在选择器后面，使用一对花括号括起来，用一组名值对的结构组成，一个名值对称为一个声明，多个声明之间用分号隔开。
例：
p{
color:red;
font-size:80px;
}
拓展：div标签
1、 div是一个纯粹的块元素。div标签主要用来对页面进行布局
2、 例：
块元素
**** - 块元素在页面中独占一行
- 默认宽度是父元素的全部
- 默认高度是被内容撑开
- 常见的块元素：div ，p ，ul , li ,h1-h6…
内联元素（行内元素）
- 行内元素不会独占页面的一行，只占自身大小
- 行内元素在页面中从左向右排列，一行放不下会自动到第二行继续从左向右排列
- 行内元素的默认宽度和高度都是被内容撑开的，无法设置宽高
- 常见的有：a,span,img…
须知：
1、块元素主要是用来做页面的布局，内联元素主要用来选中文字设置样式，一般情况下只用块元素去包含内联元素。
2、a元素可以包含任意元素除了它本身
3、p元素中不可以放块元素
四、常用的选择器
1、 元素（标签）选择器
语法： 标签名{
}
例：p{
}
2、 id 选择器
语法 #id名{
}
3、 类选择器（ 通过元素的class属性选中一组元素）
语法 .class属性值 {
}
例：
<div class=”xiaohong”></div>
.xiaohong{
width:20px;
height:10px;
backgroundcolor:red;
}
class属性介绍：
class属性类似于id，同样是给元素起名字，只不过不同元素的名字可以重复，不唯一，id是独一无二的，自己起了别人就不能起了。
注意：选择器写在css中，id class这些属性写在html标签中
可以同时为一个元素设置多个class属性值，多个值之间用空格隔开
4 、选择器分组
作用：同时选中多个选择器对应的元素
（并集选择器）
语法：选择器一，选择器二，选择器三…{
}
例子：
p,a,span{
font-size:40px;
}
5 、复合选择器
作用：可以选中同时满足多个选择器的元素
（交集选择器）
语法：
选择一选择器二选择器三…{
}
6 、后代选择器
作用:选中指定元素的后代元素
语法:
祖先元素 后代元素{
}
7 、伪类选择器
伪类的定义：专门用来表示元素的一种特殊状态，为处于特殊状态的元素设置样式。
1、 a：link{
}
表示普通链接，即未访问过的
2、 a:visited{
}
表示访问过的链接，只能设置它的颜色
注意：浏览器通过历史记录判断是否访问过
3、 a:hover{
} 表示鼠标移入时的状态
4、 a:active{
} 表示超链接被持续点击的状态
注意：hover和active两大伪类同时可以适用于其他标签
8 、通配选择器
作用：用来选中页面中所有的元素
语法：*{
}
五、选择器的优先级
1、 当使用不同的选择器，选中同一元素设置样式时会发生冲突，由选择器的优先级决定.
2、 内联样式，优先级1000
Id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配*，优先级0
继承样式，优先级没用
（在样式的最后面加一个！important,可获得最高优先级）
六、列表
1.无序列表：
使用ul标签来创建一个无序列表，使用li标签在ul中创建一个个列表项，一个li就是一个列表项，通常带有圆点在前面
2.有序列表：
与无序列表类似，只是用ol代替ul，显示时圆点变成1.2.3数字
七、浮动 水平排列
文档流：
网页是一个多层的结构，一层摞着一层，通过css来为每一层来设置样式。
作为用户只能看见最上边的一层
最底下一层成为文档流，我们所创建的元素默认都是在文档流中进行排列
浮动：块元素在文档流中默认垂直排列。使用float使元素浮动，从而脱离文档流。
可选值：
none 默认
left 元素脱离文档流，向页面左侧浮动
right 元素脱离文档流，向页面右侧浮动
注意：元素设置浮动后，会完全从文档流中脱离出来，不再占用文档流的位置。所以元素下边的还在文档流中的元素会自动向上移动
脱离文档流后的特点：
1. 块元素不再独占页面一行
2. 行内元素脱离文档流后会变成块元素，特点和块元素一样
浮动特点：
1. 浮动元素会完全脱离文档流，不会占用文档流中的位置
2. 设置浮动后元素会向父元素的左侧或右侧移动
3. 浮动元素默认不会从父元素中移出
4. 浮动元素向左或向右移动时，不会超出它前面的其他浮动元素
5. 如果浮动元素的上面是一个没有浮动的块元素，则浮动无法上移
简单总结：浮动的主要作用是让页面中的元素可以水平排列
