一、CSS
1、CSS全称层叠样式表，通常有称为风格样式表。Cascading Style Sheet 也叫级联样式表。
2.CSS第一版发布时间1996年12月，2010发布CSS3.0版本，也就是现在用的CSS3.。
3.CSS使用的优势（作用）：
- 内容与表现分离
- 表现统一，容易修改
- 有很多丰富的样式，使页面布局更加灵活。
- 减少网页的代码，提高浏览网速，节省网络宽带，提高代码的重用。
- 运用独立的css,有利于网页被搜索引擎收录。
4.CSS3的基本语法：
h1{
font-size:15px;
color:red;
}
注释：color,font-size是属性，red是值，合起来就是样式的声明。h1是选择器。
5.样式标签：<style>样式标签，位于<head>标签中。
6.CSS样式有三种：行内样式，内部样式，外部样式表。
行内样式：
<p style="color:red;">
这是一段文字
</p>
注释：行内样式，就是直接写在HTML标签里面。内部样式：
<style>
p{
font-size:30px;
}
</style>
注释：内部样式写在head标签中，只能适用于原网页。外部样式：
<link rel="stylesheet" href="css/style.css">
注释：外部样式，首先要创建文件件CSS，再去创建文件.css文件。最后在head标签里面导入上面的代码即可！
其他写法一样。
rel是在本页面使用外部样式表，type这文件样式文本，href是写的css文件的路径。
p{
color:blue;
}
这里写的是链接式外部样式，一般常用！
样式优先级：
扫描二维码关注公众号，回复：
4353316 查看本文章
行内样式 > 内部样式 > 外部样式
还有这个优先级遵守 就近原则, 也就是李标签越近的样式优先级别越高。
二、CSS3的选择器（常用的选择器）
1.基本选择器:标签选择器，类选择器，ID选择器
标签选择器：如h1~h6,写在标签里面。
<h1 style="font-size:15px;">标签选择器</h1>
类选择器:
.class{
font-size:15px;
color:red;
}
//注释：其中.class是类名称。font-size是属性，后面的是值。
id选择器：
#id{
font-size:20px;
}
//注释:id选择器的声明,以#号键开头，在同一个页面里面，ID属性只能设置一次。注意:基本选择器有分优先级，ID选择器 > class类选择器 > 标签选择器 ，它们是不遵循就近原则的！
2.CSS3高级选择器：层次选择器
《1》后代选择器：
body p{
background-color:yellow;
}
//注释：后代选择器，选择的是所有的P标签，在body和p之间要用空格隔开！
《2》子代选择器：
body>p{
color:red;
}
//注释：body为父元素，p为子元素。选择的是body下面的子元素P.
《3》相邻兄弟选择器：
.active+p{
color:yellow;
}
//注释：.active和p是同辈元素，选择的是紧邻p下面的一个元素，而且只能是往后面找！
《4》通用兄弟选择器：
.active~p{
color:blue;
}
//注释：这两个都是同辈元素，选择的是所有的p元素，也即是和p同级，可以是一个，也可以是多个
3.结构伪类选择器：
body p:first-child{
}
//注释：这是指父元素下面的第一个子元素p
body p:last-child{
}
//父元素下面的最后一个子元素
body p:nth-child(n){
}
//选择父元素下面的第n个子元素p
body p:last-of-type{
}
//父元素下面的指定类型的最后一个元素
body p:first-of-type{
}
//父元素下面的指定类型的第一个元素
body p:nth-of-type(n){
}
//父元素下面的指定类型的第n个元素
注意：body p:nth-child(n)在父级元素里面从第一个元素找，部分类型，也就是只有是p元素都会找到！
body p:nth-of-type(n)在父级元素里面先看类型，在看位置，不符合类型的元素直接排除！
4.属性选择器：
p[id]{
}
//匹配属性id的p元素
p[id=val]{
}
//匹配属性id=val的p元素
p[id*=val]{
}
//匹配属性中含有class属性并且属性值中包含val的p元素
p[id^=val]{
}
//选择所有含有id属性以val开头的所有p元素
p[id$=val]{
}
//选择所有含有id属性的并且以val结尾的所有p元素