CSS笔记
1、css的简介
* css（Cascading Style Sheets）：层叠样式表
** 层叠：一层一层的
** 样式表：很多的属性和属性值
* 使页面显示效果更好，解决html代码对样式定义的重复，提高了样式代码的可维护性
* 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:grey;
}
</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）标签选择器
*使用标签名作为选择器的名称
div{
background-color:black;
color:white;
}
（2）class选择器
* 每个html标签都有一个属性 class
- i.first{
background-color:blue;
}
- <i class="first">aaaaaaaaaa</i>
- .first{
background-color:gray;
}
（3）id选择器
* 每个html标签上面有一个属性 id
- <div id="second">bbbb</div>
- div#second{
background-color:purple;
}
- #second{
background-color:purple;
}
*** 优先级
style > id选择器 > class选择器 > 标签选择器
4、css扩展选择器
（1）关联选择器
* <div><p>wwwwwwww</p></div>
* 设置div标签里面p的样式，嵌套标签里面的样式
- div p{
background-color:green;
}
（2）组合选择器
* <div>11111</div>
<p>22222222</p>
* 把div和p标签设置为相同的样式
- div,p{
background-color:orange;
}
（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-top...
（3）外边距（边框与外面的距离）
margin：统一设置(20px)
上下左右：margin-top...
6、css的布局的漂浮
* float：（兼容性差）
none：默认值。对象不漂浮
left：文本流向对象的右边、
right：文本流向对象的左边
7、css布局的定位
position：
** 属性值
- absolute：
*** 将对象将文档流中拖出
*** 可以使用top、bottom等属性进行定位
- relative：
*** 不会把对象从文档流中拖出
*** 可以使用top、buttom等属性进行定位
8、图文混排
** 图片和文字在一起显示
9、案例 图像签名
** 在图片上显示文字