1.css的简介
**css层叠样式表
****层叠：一层一层的
****样式表：
很多的属性和属性值
**是页面的效果更好
**CSS将网页内容和页面样式进行分离，提高了显示功能。
2.CSS和HTML的结合方式（四种结合方式）
（1）在每个html标签上面都有一个属性style，把CSS和HTML集合到一起
<div style="background-color:red;color:green">
（2）使用html的一个标签<style>标签，写在head里面
*<style type="text/css">
CSS代码
</style>
<style type="text/css">
div{
background-color:red;
color:yellow;
}
</style>
(3) 在style标签里面使用语句（在一些老版本的浏览器中不起作用）
@import url（css的文件路径）
---第一步：创建css文件
（4）使用头标签link，引入外部文件
----第一步创建css文件
----<link rel="stylesheet" type="text/css" href="css文件的路径"/>
*******第三种结合方式，缺点：在某些浏览器下不起作用，一般不用，一般使用第四种方式
*******优先级（一般情况）
由上到下，由外到内，优先级由低到高
后加载的优先级高
*******格式 选择器的格式{属性名：属性值；属性名：属性值}
3.CSS的基本选择器（三种）
*****对哪个标签里面的数据进行操作
（1）标签选择器
*使用标签名作为选择器的名称
div{
background-color:black;
color:white;
}
（2）class选择器
**每个html标签都有一个属性class
--<div class="haha">aaaaa</div>
(3) id选择器
*每一个html标签上面都有一个属性id
---<div id="hehe">bbbbb</div>
4.CSS的扩展选择器
（1）关联选择器
*<div><p>wwwwwwwww</p></div>
* 设置div标签中的p标签的设置，嵌套标签里面的样式
<style type="text/css">
div p{
background-color:red;
}
</style>
（2）组合选择器
*<div>111111</div>
<p>2222222</p>
*把div和p标签设置成同一样式，把不同的标签设置成相同的样式
<style type="text/css">
div,p{
background-color:red;
}
</style>
（3）伪元素选择器
**在CSS里面提供了定义好的样式，可以直接拿过来使用
**比如使用超链接
****超链接的状态
原始状态（：link），鼠标放上去的状态（：hover），点击（：active），点击之后（：visited）
****记忆方法：lv ha
/*原始状态*/
a:link{
background-color:red;
}
/*悬停状态*/
a:hover{
background-color:green;
}
/*点击状态*/
a:active{
background-color:blue;
}
/*点击之后的状态*/
a:viisted{
background-color:gray;
}
5.CSS的盒子模型
*****在进行布局前需要把数据封装到一块一块的区域内（div）
(1)边框
border：2px(粗细) solid(样式) blue(颜色)统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）内边距
padding：20px
使用padding进行统一设置，也可以进行分别设置，上下左右四个内边距
（3）外边距
margin：length
可以统一设置，也可以上下左右设置
6.CSS的布局漂浮（了解）
float：
*****属性值
left：文本流向对象的右边
right：文本流向对象的左边
7.CSS的布局的定位
position：
***属性值：
-absolute：
*****将对象从文件流中拖出
******可以是top，bottom等属性对属性进行绝对定位
--relative：
********不会把对象从文件流中拖出去
*******可以使用top，bottom等属性进行定位
8.案例 图片和文字在一起显示
利用div标签把内容包裹起来，然后用CSS修饰样式位置