1.1什么是CSS？
Cascading Style Sheet 层叠级联样式表
CSS：表现层(美化网页)
字体，颜色，边距，高度宽度，背景图片，网页定位，网页浮动
2.快速入门
2.1 CSS的优势：
1.内容和表现分离
2.网页结构表现统一，由于css是靠link调用，可以像java中的自定义工具类一样实现复用
3.样式十分的丰富
4，建议使用独立于html的css文件
5.利用SEO，容易被搜索引擎收录
2.2 CSS的三种导入方式：
行内样式：
我是标题
内部样式：
外部样式：
链接式
<link rel="stylesheet" href="CSS/SA.css">
导入式，CSS2.1中使用的
<style>
@import url("CSS/SA.css");
</style>3.选择器：
作用：选择页面上的某一个或者某一类元素
2.1：基本选择器
标签选择器：
*类选择器 class ：
/*类选择器的格式 .class的名称{}
好处 相同的标签可以使用不同的类选择器设置参数
不同的标签也可以选用相同的类选择器
*/
<style>
.xige{
color: #3cbda6;
}
.你大爷{
color: blue;
}
</style>
*id选择器： <style>
/* id选择器格式：
#id名称{}
但是id必须保证全局唯一
优先级方面： id选择器不遵循就近原则，是固定的
id选择器>class选择器>标签选择器
*/
#xige{
color: blue;
}
.aaa{
color: blueviolet;
}
</style>高级选择器：
层次选择器：
1.后代选择器：在某个元素后面所有的后代，包括后代的后代
/后代选择器：
此处的后代选择器是选定了body中所有的p标签，优先级更高
body p{
background: #3cbda6;
}
2.子选择器：顾名思义，代表只选定下一代的，后代的后代不会选定
/
body>p{
background: blue;
}
3.相邻(兄弟)选择器 ：相邻兄弟选择器(选择向下一个兄弟)代表类元素同代相邻向下“一个”的标签，
.aaa + P{
background: crimson;
}
4.通用(兄弟)选择器 ：通用兄弟选择器，当前选中元素的向下的所有同代兄弟元素，不包含自己
.aaa~p{
background: crimson;
}结构伪类选择器：
/选中目标(ul)的第一个子元素/
ul li:first-child{
background: chartreuse;
}
/选中目标(ul)的最后一个子元素/
ul li:last-child{
background: crimson;
}
/定位到父元素，并选中当前的第一个元素
只选中p1:
思路：选中当前p元素的父级元素，再选中父级元素的第一个，但是必须是当前元素（p）才会生效
如下的意思差不多为：p的父元素的第2个子元素
下面的括号中代表第几个子元素 此选择器是按照顺序选择，如果顺序对了，但是类型不对依然选择不了
/
p:nth-child(2){
background: aqua;
}
/选中p的父元素的第二个'p类'子元素
此选择器是按照类型加顺序来选择的，精确性比上一个要高
/
p:nth-of-type(2){
background: blueviolet;
}
属性选择器(重点常用)：
= 代表绝对等于
*= 代表包含这个元素
^= 代表以这个元素开头
$= 带表以这个元素结尾
属性选择器的格式：
a[]{}中括号内填写属性元素
例如：选中存在id的元素
a[id]{
background: blue;
}
选中id是first的元素
a[id=first]{
background: crimson;
}
/*选中class中含有links的元素*/
a[class*="links"]{
background: blueviolet;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: cadetblue;
}
/*选中href中以doc结尾的*/
a[href$=doc]{
background: aquamarine;
}