JavaWeb--了解CSS
一、CSS与HTML的四种结合方式:
/*方法一:使用标签中的style属性*/
<div style="background-color:red;color:green;">
/*方法二:使用style标签*/
<style>标签,写在head里面
<style type="text/css">
css代码;
</style>
<style type="text/css">
div {
background-color:blue;
color: red;
}
</style>
/*方法三:使用@import语句*/
在style标签里面 使用语句(兼容性差)
@import url(css文件的路径);
<style type="text/css">
@import url(div.css);
</style>
/*使用头标签 link,引入外部css文件*/
<link rel="stylesheet" type="text/css" href="css文件的路径" />
优先级:一般情况下,由上到下,由外到内。优先级由低到高。
二、CSS的三种基本选择器
标签选择器:
使用标签名作为选择器的名称
div {
background-color:gray;
color:white;
}
class选择器:
每个html标签都有一个属性 class
<div class="hhh">aaaaaaa</div>
.hhh {
background-color: orange;
}
id选择器:
每个html标签上面有一个属性 id
<div id="hhh">bbbbb</div>
#hhh {
background-color: #333300;
}
优先级:style > id选择器 > class选择器 > 标签选择器
三、CSS的扩展选择器
关联选择器
<div><p>wwwwwwww</p></div>
设置div标签里面p标签的样式,嵌套标签里面的样式
div p {
background-color: green;
}
组合选择器
<div>1111</div>
<p>22222</p>
把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
div,p {
background-color: orange;
}
伪元素(伪类)选择器(兼容性差)
css里面提供了一些定义好的样式,可以拿过来使用
比如超链接
超链接的状态
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
<a href="www.baidu.com" target="_blank">测试伪类元素选择器</a>
<style type="text/css">
a:link{
background-color:#33cc00;
}
a:hover{
background-color:#ff00ff;
}
a:active{
background-color:#0066ff;
}
a:visited{
background-color:#999900;
}
</style>
四、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的布局
css的布局的漂浮
float:
属性值
left : 文本流向对象的右边
right : 文本流向对象的左边
css的布局的定位
position:
属性值
absolute :
*** 将对象从文档流中拖出
*** 可以是top、bottom等属性进行定位
relative :
*** 不会把对象从文档流中拖出
*** 可以使用top、bottom等属性进行定位
更多CSS样式可以参考该博文:css样式大全(整理版)