web之css（个人学习笔记）

css在jsp中加载方式。

<link href="<%= request.getContextPath()%>/css/login.css" type="text/css" rel="stylesheet"> 

css的简介

css：层叠样式表
层叠：一层一层的优先级
样式表：很多的属性和属性值
使页面显示效果更加美观
css将网页内容和显示样式进行分离，提高了显示功能
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文件，文件内容如下，名称为1.css
div{
background-color:blue;
color:red;
}
然后<style type="text/css">
@import url(1.css);
</style>
（4）使用头标签link，引入外部css文件（最常用）
第一步，创建一个css文件，文件内容如下，名称为1.css
div{
background-color:blue;
color:red;
}
将文件路径添加其中
<link rel="stylesheet" type="text/css" href="1.css">
css优先级（一般情况）
由上到下，由外到内，优先级由低到高，后加载的优先级高
优先级排序：style>id选择器>class选择器>标签选择器

css的基本选择器（三种）
要对哪个标签里面的数据进行操作
（1）标签选择器
使用标签名作为选择器的名称
div{
background-color:blue;
color:red;
}
（2）class选择器
每个html标签都有一个属性class
<div class="haha">adasd</div>
<p class="haha">asdf</p>
.haha{
background-color:orange;
}
（3）id选择器
每个html标签上面都有一个属性id
<div id="a">654</div>
<p id="a">21</p>
#a{
background-color:orange;
}
css的扩展选择器
（1）关联选择器
<div><p>saffsdfds</p></div>
设置div标签里面p标签的样式，嵌套标签里面的样式
div p{
background-color:green;
}
（2）组合选择器
<div>321</div>
<p>32154</p>
把div和p标签设置成相同的样式，吧不同的标签设置成相同的样式
div,p{
bancground-color:red;
}
（3）伪元素选择器
css里面提供了一些定义好的样式，可以拿过来使用
以超链接为例
超链接的状态
原始状态 鼠标放上去的状态点击点击之后
:link :hover:active:visited
css的盒子模型
在进行布局前需要把数据封装到一块一块的区域内(div)
（1）边框
border:2px solid blue; 粗细、样式、颜色
border:上面是进行统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）内边距
padding：20px;
使用padding统一设置
也可以分别设置
上下左右四个外边距与上面类似
（3）外边距
margin:20px;
可以使用margin统一设置
也可以分别设置
上下左右四个外边距与上面类似
css的布局的漂浮（了解）（div）
float：
属性值
left：文本流向对象的右边
right：文本流向对象的左边
css的布局的定位（div）
position：
属性值
absolute：
将对象从文档流中拖出
可以使用top、bottom、left、right等属性进行定位（一般适用于网页上的浮动广告）
relative：
不会把对象从文档流中拖出
可以使用top、bottom、left、right等属性进行定位
图文混排的案例
将图片与文字分别封装进div标签，再将两个div标签放进一个大的div标签，分别设置属性即可
图像签名
在图片上显示文字
将图片封装进div，设置position属性即可