标签：java css
CSS
CSS是层叠样式表（Cascading Style Sheets），用来定义网页的实现效果，可以解决html代码
对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。
简单说：css将网页内容和显示样式进行了分离，提高了显示功能。
那么，css和html是如何在网页代码中结合的呢？主要有四种方式：
1.每个html标签中都有一个style样式属性。该属性的值就是css代码。
比如下面这行代码，前面是背景色，后面是文字颜色，多个属性之间用分号隔开。
<div style="background-color:#06F;color:#F00">这是个div区域</div>
2.使用style标签的方式。这种样式标签一般都要提前加载好，所以都写在head标签内，而不是body标签内。
<style type="text/css">
div{
background-color:#06F;
color:#F00
}
</style>
3.把样式代码封装成.css文件导入到html代码中的方式。
直接把div,span,或者p的样式写在.css文件中，再创建一个名为1.css文件，
里面直接导入前面的三个.css文件。
@import url(div.css);
@import url(span.css);
@import url(p.css);
最后，再在html代码中关联这个文件即可。直接把html文件的style标签的代码写成
@import url(1.css);
即可。这样修改样式时就不用修改html代码了，直接改.css文件就行。很方便，而且复用性高。
4.和方式三类似，直接用link标签导入1.css文件
<link rel="stylesheet" href="1.css" type="text.css" />
不过方式三是用css代码导入的，这个是用html代码导入的。
样式的优先级：从上到下，从外到内，优先级由低到高。
css代码的格式：
选择器名称{属性名：属性值；属性名：属性值；......}
选择器？
就是指定css要作用的标签，那个标签的名称就是选择器。意为选择哪个容器
选择器有三种：
a)html标签名选择器，使用的就是html的标签名。
b)class选择器，使用的是标签中的class属性。
c)id选择器，使用的是标签中的id属性。
比如要定义第二行div的样式，就先给他定义一个类，
<div>这是一个区域</div>
<div class="haha">这是另一个区域</div>
然后在style标签中直接用class选择器就行了。
<style type="text/css">
div.haha{
background-color:#06F;
color:#F00；
}
</style>
上面的选择器名称div.haha也可以写成.haha。这样就会把所有类名为haha的无论是div还是span都变成定义的样式。
ID选择器和class选择器在用法上是相同的，只不过id选择器名称要写成div#qq而不是div.qq
但是通常id的取值在页面中是唯一的，因为该属性除了给css使用，还可以被javascript使用。
id通常都是为了去标识页面中一些特定的区域而使用的。
优先级：标签选择器<类选择器<id选择器<style属性。
扩展选择器：
a)关联选择器 （选择器中的选择器）
span b img{属性名：属性值；属性名：属性值；......}
b)组合选择器（对多种选择器进行相同样式的定义）
div,span{属性名：属性值；属性名：属性值；......}
c）伪元素选择器（伪元素：超链接的状态）
未访问： a:link{属性名：属性值；属性名：属性值；......}
访问后效果： a:visited{属性名：属性值；属性名：属性值；......}
鼠标悬停： a:hover{属性名：属性值；属性名：属性值；......}
点击效果： a:active{属性名：属性值；属性名：属性值；......}
练习：
<html>
<head>
<title>这是一个网页的标题。</title>
<style type="txt/css">
ul{
list-style-image:url(1.bmp)
}
table{
border-bottom:#0c0 double 3px;
border-left:#f00 solid 3px;
border-right:#ff0 dashed 3px;
border-top:#0c0 grove 3px;
width:500px
}
table td{
border:#06f dotted 2px;
padding:20px;
}
</style>
</head>
<body>
<ul>
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
</ul>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
盒子模型
边框：border-top
border-bottom
border-left
border-right
内边距：padding-top 。。。。
外边距：margin
漂浮：float：left
float：right
定位：position：absolute
position：relative
练习：图文混排
<html>
<head>
<title>这是一个网页的标题。</title>
<style type="text/css">
#imgtext{
border:#06f dashed 2px;
width:250px;
}
#img{
float:right;
}
#text{
color:#f60;
font-family:"华文隶书";
}
</style>
</head>
<body>
<div id="imgtext">
<div id="img">
<img src="E:\英雄联盟\英雄联盟\Air\assets\storeImages\layout\g-rp.jpg" />
</div>
<div id="text">
这是一个图片。哈哈哈哈哈哈！
这是一个图片。哈哈哈哈哈哈！
这是一个图片。哈哈哈哈哈哈！
这是一个图片。哈哈哈哈哈哈！
这是一个图片。哈哈哈哈哈哈！
这是一个图片。哈哈哈哈哈哈！
</div>
</div>
</body>
</html>
练习：图片定位
<html>
<head>
<title>这是一个网页的标题。</title>
<style type="text/css">
#text{
color:f60;
font-size:30px;
position:absolute;
top:200;
left:100;
}
#imgtext{
border:#f60 dotted 2px;
width:1500px;
position:absolute;
top:100;
left:400;
<!--
给整个图文区域加一个绝对定位，这样文字的位置就是相对于图片的了，
就不会出现图片移动了，文字没动的情况，说白了，这样就把文字和图片粘一块了。
-->
}
</style>
</head>
<body>
<div id="imgtext">
<div id="img">
<img src="E:\英雄联盟\英雄联盟\Air\assets\storeImages\layout\not_found.jpg" height="700" width="1200"/>
</div>
<div id="text">
是时候展现真正的技术了！
</div>
</div>
</body>
</html>
本文出自 “12946849” 博客，请务必保留此出处http://12956849.blog.51cto.com/12946849/1956706
标签：java css
原文地址：http://12956849.blog.51cto.com/12946849/1956706
