将前端结构化，html是文档结构、css是设置样式（美化页面）、js是逻辑结构
重点是选择器和盒子模型
发展史
CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、(动画…浏览器兼容性~)
快速入门
1.位置
1.行内关联：就是在标签内部设置样式，在标签内写styledivid=envstyle=color:red;/div
2.内部关联和html在一个文件中，即写入head里面html
3.head
4.style样式内容/style
5./head
6.body/body
7./html
8.外部关联就是将css专门写成一个单独的文件linkrel=stylesheethref=css/style.css/
2.导入方式
主要是外部关联的方式，如何导入
使用link关键字，在href加入地址
使用improt
importurl(css/style.css);3.优先级
就近原则，谁离的近谁的样式就生效---行内样式离的最近
基本选择器
1.标签选择器--标签名
style
body{
//具体的样式
}
div{
//具体的样式
}
/style
2.类选择器--.类名
style
.classname{
//具体的样式
}
/style
3.Id选择器--“#id名”
style
#env{
//具体的样式
}
/style
4.优先级关系
id选择器类选择器标签选择器
高级选择器
1.层次选择器
可以依据html文档数的层次来进行样式的选择设置
后代选择器
style
divp{
//div标签下的p标签样式
}
/style
子代选择器
style
divp{
//div标签下的第一个p标签样式
}
/style
通用选择器
style
.classname-p{
//classsname后所有的标签
}
/style
2.伪类结构选择器
概述：什么是伪类，就是有逻辑的，并没有直接指明是那里变化，就是依据逻辑位置来判断
使用：标签、类、id后使用：
style
ulli:first-child{/*ul的第一个子元素*/
background:aqua;
}
ulli:last-child{/*ul的最后一个子元素*/
background:blue;
}
/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，
注意：并且是当前元素才生效！*/
p:nth-child(1){
background:orange;
}
p:nth-of-type(2){/*选中父元素下的，第2个p元素*/
background:red;
}
a:hover{
color:green;
}
/style
3.属性选择器--常用
属性名=属性值（正则）
=表示绝对等于
*=表示包含
^=表示以...开头
=表示以...结尾
存在id属性的元素a[]{}
style
a[id]{
background:yellow;
}
a[id=first]{/*id=first的元素*/
background:green;
}
a[class*=links]{/*class中有links的元素*/
background:bisque;
}
a[href^=