CSS样式表详解-优快云博客

1.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:blue;
  color:red;
}
</style>
(3)在style 标签里面使用语句
@import url(css文件的路径)
— 第一步创建css文件
<style type="text/css">
@import url(div.css)
</style>

（4）使用头标签link ，引入外部css文件
— 第一步创建css文件
_ <link rel="stylesheet" type="text/css " href="css文件路径"/>
**优先级：由上到下，由内到外，优先级由低到高。
  **后加载的优先级高。
***格式：选择器名称{属性：属性值；}

3.css的基本选择器
**要对哪个标签里面的数据进行操作
（1）标签选择器
*使用标签名作为选择器的名称。
（2）class选择器
*每个html标签都有一个属性class
-<div class="haha">哈哈</div>
.haha{
background-color:yellow;
}

(4)id选择器
-<div class="hehe">呵呵</div>
#hehe{
background-color:yellow;
}
**优先级
style>id选择器>class选择器>标签选择器

4.css的扩展选择器
（1）关联选择器
*<div><p>呵呵</p></div>
*设置div标签里面p标签的样式，嵌套标签里面的样式
* div p{background-color:red;}
(2)组合选择器
*<div>111</div>
<p>222</p>
*把不同的标签设置成相同的样式。
* div,p{background-color:red;}
（3）伪元素选择器
*css里面提供了一些定义好的样式，直接拿过来使用
*如超链接
** 超链接的状态：
原始状态（：link）
悬停状态（：hover）
点击（：active）
点击后（：visited）

5.css的盒子模型
**在进行布局前需要把数据封装到一块一块的区域内
(1)边框
border: 2px solid blue
border: 统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）内边距
padding:20px
使用padding统一设置，也可以分别设置
上下左右四个边距
（3）外边距
margin:20px
使用margin统一设置，也可以分别设置
上下左右四个边距
6.css的布局的漂浮
float：属性值