25.Java与JavaWeb（二）【Java学习笔记Hatter】Java开发工程师
css
层叠样式表
1.css与html的结合方式
（1）在每个html标签上面都有一个属性 style，把css和html结合在一起
例：
<body>
<div style="background-color:red;color:green">你好，再见，走了。</div>
</body>
（2）使用html的一个标签实现<style>标签，写在head里面
<style type="text/css">
css代码
</style>
例：
<head>
<title>html实例</title>
<style type="text/css">
div{
background-color:red;
color:blue;
}
</style>
</head>
<body>
<div>你好，再见，走了。</div>
</body>
（3）在style标签里面，使用语句(在某些浏览器下不起作用，一般不用)
@import url（css文件的路径）;
例：
首先要先创建一个css文件
div{
background-color:#FF3399;
color:#FF9966;
}
再创建html文件
<head>
<title>第三种方式</title>
<style type="text/css">
@import url(结合方式3.css);
</style>
</head>
<body>
<div>你好，再见，走了。</div>
</body>
（４）使用头标签link ，引入外部css文件（常用）
<link rel="stylesheet" type="text/css" href="css文件的路径"/>
<head>
<title>第4种方式</title>
<link rel="stylesheet" type="text/css" href="结合方式4.css"/>
</head>
<body>
<div>你好，再见，走了。</div>
</body>
2.css的优先级
一般情况下，由上到下，从外到内，优先级是由低变高，后加载的优先级高
3.css的基本选择器
选择器名称{属性名:属性值;属性名:属性值;.......}
①标签选择器：使用标签名作为选择器的名称
div{
background-color:#FF3399;
color:#FF9966;
}
②class选择器
每个html标签都有一个属性class
例：
<html>
<head>
<title>html</title>
<style type="text/css">
.c1{
background-color:red;
}
</style>
</head>
<body>
<div class="c1">你好，再见，走了。</div>
<p class="c1">asadasd.</p>
</body>
</html>
③id选择器
每个标签上面都有一个属性id
例：
<html>
<head>
<title>html</title>
<style type="text/css">
#i1{
background-color:red;
}
</style>
</head>
<body>
<div id="i1">你好，再见，走了。</div>
<p id="i1">asadasd.</p>
</body>
</html>
基本选择器的优先级
style>id选择器>class选择器>标签选择器
4.css的扩展选择器
分为三种
（1）关联选择器
设置div标签里面p标签的样式，嵌套标签里面的样式
例：
<html>
<head>
<title>html</title>
<style type="text/css">
div p{
background-color:red;
}
</style>
</head>
<body>
<div><p>你好，再见，走了。</p></div>
<p>asadasd.</p>
</body>
</html>
(2)组合选择器
把div与p标签设置成相同的样式，把不同的标签设置成相同的样式
<html>
<head>
<title>html</title>
<style type="text/css">
div,p{
background-color:red;
}
</style>
</head>
<body>
<div>qasdadq</div>
<p>adad</p>
</body>
</html>
（3）伪元素选择器
css里面定义好了一些样式，可以直接拿过来使用。
超链接的状态
:link原始状态，:hover鼠标悬停在超链接的状态，:active点击状态，:visited点击之后状态
例：
<html>
<head>
<title>html</title>
<style type="text/css">
/*原始状态*/
a:link{
background-color:red;
}
/*悬停状态*/
a:hover{
background-color:green;
}
/*点击状态*/
a:active{
background-color:blue;
}
/*点击之后状态*/
a:visited{
background-color:gray;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">超链接——</a>
</body>
</html>
5.css的盒子模型
在进行布局前需要把数据封装到一块一块的区域内（div）
（1）边框：border-top上，border-bottom下，border-left左，border-right右
border-width，border-color，border-style
例：
<html>
<head>
<title>CSS盒子模型1</title>
<style type="text/css">
div{
width:200px;
height:100px;
border:2px solid red;
}
#div02{
border-right:2px solid blue;
}
</style>
</head>
<body>
<div id="div01">1</div>
<div id="div02">2</div>
<div id="div03">3</div>
</body>
</html>
（2）内边距：
padding：统一设置
padding-top上，padding-bottom下，padding-left左，padding-right右
length距离
例：
<html>
<head>
<title>css盒子模型2</title>
<style type="text/css">
div{
width:200px;
height:100px;
border:2px solid red;
}
#div02{
padding:20px;
}
#div03{<br />
padding-left:50px;
}
</style>
</head>
<body>
<div id="div01">1</div>
<div id="div02">213</div>
<div id="div03">33333333</div>
</body>
</html>
（3）外边距：
margin统一设置
margin-top上，margin-bottom下，margin-left左，margin-right右
length:距离
例：
<html>
<head>
<title>css盒子模型3</title>
<style type="text/css">
div{
width:200px;
height:100px;
border:2px solid red;
}
#div02{
margin:50px;
}
#div03{
margin-left:50px;
}
</style>
</head>
<body>
<div id="div01">1</div>
<div id="div02">2</div>
<div id="div03">3</div>
</body>
</html>
6.css的布局的漂浮
float ：
（1）none默认值，对象不漂浮
（2）left：文本流对象左边
（3）right：文本流对象右边
7.css布局的定位
position：
（1）static ：默认值。无特殊定位，对象遵循HTML定位规则
（2）absolute：将对象从文档流拖出，可以使用left，right，top，bottom对它进行绝对定位
（3）relative：对象不可层叠，但将依据left，right，top，bottom对它进行绝对定位
例：
<html>
<head>
<style type="text/css">
div{
width:200px;
height:100px;
border:2px solid red;
}
#div01{
background-color:blue;
position:relative;
left:80px;
}
#div02{
background-color:red;
position:absolute;
bottom:37px;
}
#div03{
background-color:yellow;
}
</style>
</head>
<body>
<div id="div01">1</div>
<div id="div02">2</div>
<div id="div03">3</div>
</body>
</html>
案例1：图文混排
<html>
<head>
<title>图文混排</title>
<style type="text/css">
#imgtext1{
width:350px;
height::350px;
border:2px solid red;
}
#imag1{
float:right;
}
#text1{
color:red;
}
</style>
</head>
<body>
<div id="imgtext1">
<div id="imag1"><img src="file:///E|/AppServ/www/test/Java与数据库（三）.png" width="300" height="300"/></div>
<div id="text1">天之道损有余而补不足天之道损有余而补不足天之道损有余而补不足天之道损有余而补不足
天之道损有余而补不足天之道损有余而补不足天之道损有余而补不足天之道损有余而补不足天之道损有余而补不足
</div>
</div>
</body>
</html>
1914篇文章
