CSS
1、css概述
* Cascading Style Sheets：层叠样式表
** 层叠：一层一层（优先级，最终以哪个样式为准）
** 样式表：很多的属性和属性值
*** 增强页面的显示效果
*** CSS将网页内容和显示样式进行分离，提高了显示功能
* 要想使用css，必须要和html在一起使用
2、css和html的结合方式
（1）每个html标签都有一个属性 style，在style里面设置样式
* <div style="background-color:red;color:green;">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
* 格式 style="属性名1:属性值1;属性名2:属性值2"
（2）使用html的一个标签 <style type="text/css"> css代码 </style>
* 一般style标签写在头标签里面
* div {
background-color:black;
color:white;
}
* 应用场景：只是在一个页面设置这个样式，其他页面设置其他的样式
（3）在style标签里面使用语句
* 首先创建一个css文件
* <style type="text/css"> @import url(css文件路径); </style>
* <style type="text/css">
@import url(div.css);
</style>
* 注意：在某些浏览器下不支持
（4）引入外部的css文件
* 使用头标签 link
* <link rel="stylesheet" type="text/css" href="css_3.css" />
* 应用场景：比如现在有一万个页面，一万个页面需要相同的样式
** css优先级
* html代码加载顺序：从上到下加载
* 一般情况下，后加载的优先级高
** 格式：属性名:属性值 ; 属性名:属性值;
3、css的基本选择器
* 在哪个标签上设置样式
（1）标签选择器
* 使用标签名作为选择器
* p {
background-color:green;
}
（2）class选择器
* 每个html标签都有一个属性class
* .haha {
background-color:red;
color:green;
}
（3）id选择器
* 每个html标签都有一个属性id
* #hehe {
background-color:#990099;
color:#ccff99;
}
* id建议不要相同，后面js获取值
** 优先级
style > id > class > 标签选择器
4、css的扩展选择器
（1）关联选择器(设置嵌套标签里面的样式)
* <div><p>aaaaa</p></div>
* <p>bbbbb</p>
** 设置div里面的p标签里面的内容
* div p {
background-color:blue;
}
（2）组合选择器（设置不同的标签具有相同的样式）
* <div>qqqqqq</div>
* <p>wwwwww</p>
** 设置div和p具有相同的样式
* div,p {
background-color:orange;
}
（3）伪类元素选择器(了解)
* 实现一些简单的动态效果
* 不是一个真正的选择器，css里面提供的一些选择器，可以直接使用
** 超链接的状态
* 原始状态 鼠标放上去（悬停） 点击（瞬间） 点击之后
:link :hover :active :visited
* 如何记忆：
lv ha
5、CSS的盒子模型
* 要进行布局，首先要把数据封装到一块区域里面去（div）
* 边框 border : border-width || border-style || border-color
** 上下左右 border-top border-bottom border-left border-right
* 内边距：padding：length
** 有上下左右四个内边距
* 外边距 ：margin：length
** 有上下左右四个外边距
6、css的布局（漂浮）
* float属性:left right
7、案例：实现图文混排效果
8、css布局（定位）
* position：absolute relative
** absolute：将对象从文档流中拖出，使用 left ， right ， top ， bottom 进行定位
** relative: 不会把对象从文档流中拖出，使用 left ， right ， top ， bottom 进行定位