css在HTML中的作用，只是美化我们的网页的，
通过标签来修改样式的缺点：
1。需要记忆那些标签有哪些属性，如果这个标签没有这个属性那么我们的这个设置就没有效果了，
2。当需求改变的时候我们要修改大量的代码才能满足需求，这样就增加了工作量
3.HTML就只有一个作用是用来添加语义的，、也就是说HTML标签的作用就是往浏览器中堆一些我们想要东西，这些东西在 网页中怎么表现出来，他不管，
那么我们怎么把这些东西既要放在网页中，又要让网页看起来很美观，这就是css的作用了
css的好处
1，我们不用记忆那些属性属于哪个标签；
2，当需求改变的时候，修改少量的代码就能达到满意的效果
3，他只是用来美化网页；
文本样式的属性
1；对齐方式 text-align：center
2；文本粗细 font-weight:bold;
3；文本样式属性 font-style: italic;
4；字体大小属性 font-size: 18px;
5；文字颜色属性 color：red;
6；显示的字体 font-family: 宋体;
选择器
标签选择器：选中了标签中的所有元素都会改变样式
id选择器：id选择器中的id是唯一的，不可以有相同的名称；
类选择器：名称可以重复，
后代选择器：用空格分开
子元素选择器：>
交集选择器： 选择器1选择器2 中间没有任何连接符号
并集选择器：， 选择器1，选择器2 用逗号来连接
兄弟选择器： 他只能选择同级关系
相邻兄弟选择： + 选择器1+选择器2 他只能选中所指选择器和他平级的并且是他后面紧紧相邻的
通用兄弟选择器：~ 选择器1~选择器2
序列选择器：
同级别的第几个：p:first-child:red; 表示取同级别的第一个标签，如果我们同级别的第一个标签不是指定的标签，那么对 他没有作用；p:last-child：red 取最后一个；p:nth-child(n)：表示同级别中的第n个
同类型的第几个：p:first-of-type:red;表示同级别的同类型的第一个标签；
p:last-of-type:red;表示同级别的同类型的最后一个标签；
p:nth-last-of-type(n):red;
p:only-child: 父元素中只有唯一一个子元素
p:only-of-type:父元素下面只有唯一这个类元素
p:nth-child(odd)；同级别的奇数
p:nth-child(even)：同级别的偶数
p:nth-last-of-type(odd):red;
p:nth-last-of-type(even):red;
p:nth-child(xn+y)；这里的x和y是用户定义的，而n是一个计数器，他是从0开始替增的
属性选择器：[]表示
p[id]
attribute^=value a[src^="https"]选择其 src 属性值以 "https" 开头的每个 元素。
attribute$=value a[src$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 元素。
attribute*=value a[src*="abc"]选择其 src 属性中包含 "abc" 子串的每个 元素。
css有三大属性
第一：继承性
第二；层叠性
第三；优先级 id>class>标签>通配符>继承>浏览器默认
！important;他能提示选择器权限，他只能提升是直接选中的；
注意 important前面的！不能少，只能提升被他标注的属性，】
div和span
div是用来给网页进行布局的；他单独占一行的；他是容器级别；
span是用来修改网页中局部的；他在一行；他是文本级别的；
容器集的标签和文本集的标签的区别
文本集标签这里放文本，超链接，图片；
容器集标签中可以嵌套其他标签；
css中的元素分为块级元素 ；行内元素；行内块级元素
所有文本级别的HTML标签除了p标签外都是行内元素
容器集标签都是块级元素
1；块级元素；特点是：独占一行，可以设置宽度高度
2；行内元素；不能设置宽度和高度；在一行显示；
3；行内块级元素；特点是不独占一行，但能设置他的宽高；如
css中的显示模式都可以相互转换的
display：block （块级）
inline（行内）
inline-block（行内块级）
css中的背景设置
1；background-color:#fff;背景颜色
2；background-image:url();背景图片；这个背景图片中有一个背景图片的打开方式的属性；
3；background-repeat；背景的平铺方式； repeat；rpeat-x; repeat-y; no-repeat;这4个值；
4；background-position:0 0; 背景图片的定位；水平方向；有left center right 垂直方向；top center bottom；
5；background-attachment:fixed;背景图片的关联方式；这个是如果背景图片小于浏览器窗口，指示背景图片是否随窗口滚 动
背景图片和插入图片的区别
1；背景图片不占div容器的位置；插入图片是容器中的一个元素；
2；背景图片有定位属性，很容易控制图片在容器中显示的位置；而插入图片就不容易控制图片的显示方式；
3；插入图片的语义比背景图片的强；如果你想你的图片被搜索引擎容易搜索到，就就建议用插入图片
精灵图片
要掌握
边框属性
border:1px solid #000;
border-left
border-top
border-right
border-bottom:宽 线条样式 线条颜色；
边框属性连写
border-width：上 右 下 左 这个是设置边框线条的宽度
border-style：上 右 下 左 这个是设置边框线条的样式如实线还是虚线
border-color：上 右 下 左 这个是设置边框线条的颜色