javaWeb学习笔记-----2css
css
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: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）标签选择器
*使用标签名作为选择器的名称
div {
background-color：gray；
color：white；
}
（2）class选择器
*每个html标签都有一个熟悉感 class
-<div class="haha">aaaaa</div>
- .haha {
background-color:orange;
}
(3) id选择器
*每个html标签上面有一个属性id
-<div id="haha">bbbb</div>
- #haha {
background-color:orange;
}
**优先级
style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
（1）关联选择器
*<div><p>wwwwww</p></div>
*设置div标签里面p标签的样式，嵌套标签里面的样式
* div p {
background-color：green;
}
（2）组合选择器
*<div>11111</div>
<p>22222</p>
*把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
* div,p {
background-color：orange;
}
（3）伪元素选择器
*css里面提供了一些定义好的样式，可以拿过来使用
* 比如超链接
**超链接的装填
原始状态 鼠标放上去的状态 点击 点击之后
:link :hover :active :visited
5、css的盒子模型
**在进行布局前需要把数据封装到一块一块的区域内(div)
（1）边框
border : 2px solid red
border::统一设置
上 border-top
中 border-buttom
左 border-left
右 border-right
（2）内边距
padding:20px
使用padding统一设置
也可以分别设置
上下左右四个内边距
（3）外边距
margin：20px；
可以使用margin统一设置
也可以分别设置
上下左右四个外边距
6、css的布局的漂浮
float：
**属性值
left：文本流向对象的右边
right：文本流向对象的左边
7、css的布局的定位
position
**属性值
abolute：将对象从文档中流出，相当于漂浮在页面上面，可以通过top、buttom等属性进行定位
relative：不会把对象从文档流中拖出去，可以使用top、buttom等属性进行定位