css


1、css的简介
* css： 层叠样式表
** 层叠：一层一层的

** 样式表：很多的属性和属性值

* 使页面显示效果更加好
* css讲网页内容和显示样式进行分离，提高了显示功能

2、css和html的结合方式（四种结合方式）
（1）在每个html标签上面都有一个属性 style，把css和html结合在一起
- <div style="css代码;">
（2）使用html的一个标签实现<style>标签，写在head里面
- <style type="text/css">
css代码;
 </style>
* css代码要表明对谁赋值，如div｛css代码；｝
（3）在style标签里面 使用语句（在某些浏览器下无效）
@import url（css文件的路径）;

- 第一步，创建一个css文件
- 第二步，在html的head标签中声明
<style type="text/css">
@import url（css文件的路径）;
</style>
（4）使用头标签link，引入外部css文件
- 第一步，创建一个css文件
- 第二步，在html的head标签中声明
<link rel="stylesheet" type="text/css" href="css文件的路径" />

*** 第三种结合方式，缺点：在某些浏览器下无效，一般使用第四种方式

*** 优先级
由上到下，由外到内，优先级由低到高。
*** 后加载的优先级高

*** 格式  选择器名称（属性名：属性值;属性值：属性名...）

3、css的基本选择器
** 要对那个标签里面的数据进行操作
（1）标签选择器
* 使用标签名作为选择器名称
（2）class选择器（类选择器）
* 每个html标签都有一个属性 class
.class名称｛ 属性 ｝
（3）id选择器
* 每个html标签上都有一个属性 id
#id名称｛属性｝

*** 优先级
style > id选择器 > class选择器 > 标签选择器

4、css的扩展选择器
（1）关联选择器
* <div><p>显示内容</p></div>
* 设置div标签里面p标签的样式，嵌套标签里面的样式。
div p ｛css样式｝ div与p之间加空格
（2）组合选择器
* <div>显示内容</div>
 <p>显示内容</p>
* 把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
div,p ｛css样式｝ div与p之间加逗号
（3）伪元素选择器
* css里面提供了一些定义好的样式，可以直接拿来使用
* 比如超链接
** 超连接的状态
原始状态  :link  
鼠标悬停状态 :hover
点击  :active
点击之后  :visited

5、css的盒子模型
** 在进行布局前需要把数据封装到一块一块的区域内（div）
（1）边框
border
统一设置：border
上：border-top
下：border-bottom
左：border-left
右：border-right
（2）内边距
padding
统一设置：padding
上：padding-top
下：padding-bottom
左：padding-left
右：padding-right
（3）外边距
margin
统一设置：margin
上：margin-top
下：margin-bottom
左：margin-left
右：margin-right

6、css的布局漂浮
float
** 属性值
left：文本流向对象的右边
right：文本流向对象的左边

7、css的布局定位
position：
** 属性值
- absolute：
*** 将对象从文档流中拖出（使它”漂浮在空中“）
*** 可以使用top、bottom等属性进行绝对定位
-relative：
*** 不会把对象从文档流中拖出
*** 可以使用top、bottom等属性进行定位