css简介
* css ： 层叠样式表
* 使页面显示效果更好
* css将网页内容和显示样式进行分离，提高了显示功能
css和html的结合方式（四种）
(1) 在每个html标签上面都有一个属性style，把css和html结合在一起
- <div style="backgrcound-color:red;color:green"
(2) 使用html的一个标签实现<style>标签，写在head中
* <style type="text/css">
标签名称{ css代码 }
</style>
(3) 在style标签里面使用语句
- 第一步，创建一个css文件
<style type="test/css">
@import url( .css)
</style>
(4) 使用头标签link,引入外部css文件
- 第一步，创建一个css文件
-<link rel="stylesheet" type="test/css" href="css文件的路径">
*** 第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式
*** 优先级
由上到下，由外到内，优先级由低到高
*** 后加载的优先级高
css的基本选择器(三种)
(1) 标签选择器
* 使用标签名作为选择器的名称
标签名{
}
(2) class选择器
* 每个html标签都有一个属性 class
- <div class=“haha”> aaa </标签名>
- .haha{
}
(3) id选择器
* 每个html标签上面有一个属性 id
- <div id="hehe">bbb</div>
- #hehe{
}
优先级：style> id选择器 > class选择器 > 标签选择器
css的扩展选择器
（1）关联选择器
* <div><p>wwwww<p><div>
* 设置div标签里的p标签的样式，嵌套标签里面的样式
* div p { }
（2）组合选择器
* <div>1111</div>
<p>2222</p>
* 把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
* div,p { }
（3）伪元素选择器
* css里面提供了一些定义好的样式，可以拿过来使用
* 比如超链接
** 超链接的状态
原始状态 鼠标放上去状态 点击 点击之后
：link ：hover :active :visited
css的盒子模型
* 在进行布局前需要把数据封装到一块一块的区域内(div)
（1）边框
border：2px solid bule；
border：统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）内边距
padding:20px;
使用paddin统一设置
也可以分别设置上下左右四个内边距
上 border-top
下 border-bottom
左 border-left
右 border-right
（3）外边距
margin：20px
可以使用margin统一设置
也可以分别设置上下左右四个外边距
上 border-top
下 border-bottom
左 border-left
右 border-right
css布局的漂浮
float:
** 属性
left：文本流向对象的右边
right：文本流向对象的左边
css布局的定位
position：
** 属性
absolute：
将对象从文档流中拖出
可以使top，bottom进行定位
relative
不会把对象从文档流中拖出
可以使top，bottom进行定位
原文：https://www.cnblogs.com/D1212/p/10605029.html