本帖最后由 shjava 于 2017-9-20 00:44 编辑
【同步教程】- CSS
第二章 CSS
作者：上海校区JavaEE教研部 V1.0 u 掌握CSS样式的书写规则 u 掌握CSS样式的引入方式 u 掌握CSS基本选择器的用法 u 了解CSS拓展选择器的用法 u 了解盒模型
本章主要对CSS层叠样式的用法做详细讲解。 1.1 CSS（层叠样式表）概述
层叠样式表(英文全称：CascadingStyle Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1.2 CSS样式书写规则
CSS语言是用来修饰HTML和XML文件的，在修饰这些文件之前首先得选中这些文件中的元素。然后再对选中的元素进行修饰，如【文件2-1】所示： 【文件2-1】CSS样式书写规则 [HTML] 纯文本查看 复制代码 h1{
color:red;
font-size: 25px;
}如【文件2-1】所示，h1就是选择器，这里选中的是所有的h1标签。h1后面“{}”中的内容就是对选 中的h1标签进行具体的修饰。所以，CSS样式书写规则可表示为：选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}如图2-1所示： 图2-1 CSS书写规则 说明： 选择器：选中HTML或XML中的元素的代码。 属性：需要更改的样式，例：颜色、大小、宽度等。 值：更改的参数。 注意： 属性和值之间用冒号隔开，每个属性后面都要以分号结束。
1.3 CSS的引入方式
CSS在对HTML文件中的元素进行修饰的时候有三种引入方式：行内式，内嵌式和外链式。这三种书写方式各有优缺点，以下是对着三种书写方式的详细讲解。 1.3.1 行内式 行内式是将CSS样式的属性直接书写在要修饰的HTML标签上。如【文件2-2】所示对HTML中的h1标签的修饰： 【文件2-2】行内式 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<!—使用行内式引入CSS样式-->
<h1 style="color:red;font-size: 25px">传智播客.黑马程序员上海中心</h1>
</body>
</html>注意： 行内式在实际开发中不提倡使用，在测试时经常使用。行内式有以下缺点： 1. 直接书写在标签上，样式过多时难以维护； 2.冗余代码过多；
内嵌式是将CSS样式代码写在HTML中。理论上，可以写在html文件的任意位置，但是一般来说我们都是写在head标签里面。首先书写一对style的标签，在这对标签内部书写css样式。如【文件2-3】所示： 【文件2-3】内嵌式CSS样式 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
/*CSS的内嵌式写法*/
h1{
color: red;
font-size: 25px;
}
</style>
</head>
<body>
<h1 >传智播客.黑马程序员上海中心</h1>
</body>
</html>内嵌式比较常用，但是内嵌式的CSS样式只能作用于当前页面。
外部引用指HTML文档本身不含有CSS样式，而是动态引用外部的CSS文件定义文档的表现形式。HTML中比较常用的外链式是使用link标签，将外部的CSS样式文件引入到当前页面，对当前页面进行修饰。如【文件2-4】所示： 【文件2-4】外链式demo.html [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<link href="demo.css"rel="stylesheet">
</head>
<body>
<h1 >传智播客.黑马程序员上海中心</h1>
</body>
</html>【文件2-5】demo.css [HTML] 纯文本查看 复制代码 h1{
color: red;
font-size: 25px;
}注意： 一个页面可以多次使用LINK标签引入多个外部css文件，注意这些CSS代码的相互影响，通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。这种引入CSS的方式是目前最为流行的，可以在站个网站范围内进行CSS代码的规划，方便复用和维护，但这样将代码高度集中，代码量可能过大，维护不当的话又容易出现混乱。
1.4 案例一
请根据1.4.2提供的素材完成如图2-2所示的排版与样式。
图2-2 案例一 1.4.2 素材 本案例所需的素材如【文件2-5】所示： 【文件2-5】案例一素材 [HTML] 纯文本查看 复制代码 忆江南
江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。
作者介绍
白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。
注释
据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。
品评
此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。
三、四两句对江南之“好”进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。
1.4.3 需求分析根据图2-2所示的要求可知，需要对素材进行如下操作： a. “忆江南”，需要使用标题标签完成<hn>。 b. “作者介绍”、“注释”和“品评”，还是使用标题标签完成<hn>。 c. 剩下的文字内容都是段落，使用段落标签完成<p>。 d. 利用合适的标签结构化页面之后，添加对应的CSS样式美化页面。
参考代码如【文件2-6】： 【文件2-6】参考代码 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<metacharset
="UTF-8">
<title></title>
<style>
body {
background: url(img/bg2.jpg);
}
h1 {
color: green;
font-size: 16px;
text-align: center;
}
p {
font-size: 14px;
color: skyblue;
text-indent: 2em;
line-height: 22px;
}
h2 {
color: red;
font-size: 14px;
font-weight: normal;
}
</style>
</head>
<body>
<p>江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。</p>
<h2>作者介绍</h2>
<p>白居易(772－846)
，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p>
<h2>注释</h2>
<p>(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。</p>
<h2>品评</h2>
<p>
此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。</p>
<p>三、四两句对江南之“好”进
行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。</p>
</body>
</html>
1.5 div与span
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。它默认独占一行，可以把页面划分为多个区块，通常用来排版与布局。（取代了<table>布局）。 span标签是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。通常可以用来定义一小段文字的样式。（取代了<font>的地位）。
1.6 显示模式
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。HTML中有很多的标签，为了方便管理，根据他们的特点分为三种显示模式。 1.6.1 块级元素 常见的块级元素有：div，p，h1-h6，ul，li。块级元素有以下特点： 1.有宽度和高度（支持宽高设置）； 2.如果没有设置宽度，默认是占整行； 3.一行上只能放一个块级元素； 如【文件2-7】所示： 【文件2-7】常见块级元素 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
div {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
p {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
h1 {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
ul {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
ol {
height: 100px;
width: 250px;
background-color: #0e90d2;
}
</style>
</head>
<body>
<div>
我是div标签
</div>
<p>我是p标签</p>
<h1>我是h1标签</h1>
<ul>
<li>ul-li</li>
</ul>
<ol>
<li>ol-li</li>
</ol>
</body>
</html>【文件2-7】所示的块级元素在浏览器上运行的结果如图2-3所示：
图2-3 常见块级元素
1.6.2 行内元素常见的行内元素有：span，font，a，strong，em。行内元素的特点是： 1. 不支持宽高设置。 2.一行可以放多个行内元素 3.宽度是由里面的内容的多少决定的 如【文件2-8】所示： 【文件2-8】常见行内元素 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>常见行内元素</title>
</head>
<body>
<!--常见的行内标签-->
<span>我是span标签</span>
<a>我是a标签</a>
<font>我是font标签</font>
<strong>我是strong标签</strong>
<em>我是em标签</em>
</body>
</html>【文件2-8】所示行内元素在浏览器上运行效果如图2-4所示：
图2-4 行内元素 1.6.3 行内块除了上述的块级元素和行级元素，还有一类是行内块元素。常见的行内块元素有：input，img，textarea。 块元素的特点是： 1.一行可以放置多个行内块元素； 2.支持宽，高设置； 常见的行内块元素如文件【2-9】所示： 【文件2-9】常见行内块元素 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>常见行内块元素</title>
</head>
<body>
<!--常见的行内块元素-->
<input value="我是input">
<img src="../images/lyf1.jpg" height="91" width="60"/>
<textarea rows="5" cols="20">我是textarea</textarea>
</body>
</html>【文件2-9】所示行内快元素在浏览器上运行的效果如图2-5所示：
图2-5 常见行内块元素 1.6.4 显示模式之间的转换很多时候，我们在实现网页效果的过程中，仅仅依靠元素自身的属性可能不足以满足我们的需求，这个时候就需要根据实际情况来改变一下他们的状态从而达到布局的目的。显示模式之间的转换是用过添加display属性来实现的。常见的转换模式添加入【表格2-1】所示： 【表格2-1】显示模式之间的转换 | 转换模式 | | | display:block; block还可以作为隐藏的反义词显示来用 display:none可以隐藏一个盒子 | | | | |
注意： 1.转换了之后，特点也随之改变了； 2.通常我们都是把行内元素转换成块级或者行内块使用；
1.7 基本选择器
CSS的作用是用来修饰HTML或XML中的元素的，修饰之前必须先选中HTML或XML中的元素。选中这些文件中的元素就需要用到选择器。基本的选择器有：id选择器，标签名选择器，class选择器。以下将对这些选择器进行详细的讲解。 1.7.1 id选择器 id选择器是根据标签中的id属性值来选中这个标签的。具体用法是：1.在标签上添加一个id属性如：id=“_span”;2.在css中通过“#_span”即可选中这个标签。如【文件2-10】所示： 【文件2-10】id选择器的用法 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
#_span {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<span id="_span">传智播客.黑马程序员上海中心</span>
</body>
</html>
注意： 1.id具有唯一性，同一个id名在当前页面有且仅能存在一个; 2.每个标签只能拥有一个id名; 3.通常都是配合js使用; 1.7.2 标签名选择器 标签名选择器就是通过标签名来选中标签，来指定这一类的标签的CSS样式。用法如【文件2-11】所 示： 【文件2-11】标签名选择器 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<!--标签名选择器-->
<p>传智播客</p>
<div>上海市.浦东新区</div>
<p>黑马程序员</p>
</body>
</html>【文件2-11】所示的代码在浏览器中运行效果如图2-6所示：两个p标签中的内容被修饰了。
图2-6 标签名选择器 1.7.3 class选择器class选择器是根据HTML或XML文件中标签的class属性来选中这一类标签的，具体用法：1.首先 在HTML或XML标签中添加class属性如class=“span”；2.在CSS中通过“.span”来选中这一类标签； 如【文件2-12】所示： 【文件2-12】class选择器 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
.span {
font-size: 25px;
color: red;
}
.mySpan {
color: #0e90d2;
}
</style>
</head>
<body>
<!--class选择器-->
<span class="span">传智播客</span>
<span class="mySpan span">黑马程序员</span>
<span class="span">上海市</span>
</body>
</html>
注意： 1.可以重复利用，可以重名； 2.一个标签可以起多个类名，中间用空格隔开；
1.7.4 案例二根据上面的知识编写代码完成如图2-7所示的效果。
图2-7 案例二 1.7.5 知识点分析通过选择器来实现google的文字效果，首先在标签的选择上，因为是文字的样式，所以可以选择前面提过的<span>标签来定义一小段文字的样式。 接着由于大小是一样的，可以通过标签选择器来定义文字大小，但是颜色只有部分相同，这里就选择类选择器来定义字体颜色。 1.7.6 参考代码参考代码如【文件2-13】所示： 【文件2-13】参考代码 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span {
font-size: 180px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.yellow {
color: yellow;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="yellow">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>使用不同的选择器给同一个标签定义相同的样式，这个时候只会生效一个选择器的效果，就涉及到了优先级的说法，也就是说谁的权重比较高。 如果id选择器，class选择器和标签名选择器同时作用于一个标签上， 三个选择器的优先级从高到低 依次是：id选择器>class选择器>标签名选择器。如【文件2-14】所示： 【文件2-14】优先级 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
div {
color: #000;
}
#red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div id="red" class="blue">
人家有的是背景，而我有的只是背影。
</div>
</body>
</html>标签名选择器，id选择器和class选择器同时作用于div标签，浏览器运行这段代码后div中的字体颜 色显示的是id选择器中修饰的颜色。如图2-8所示：
图2-8 优先级
1.8 选择器扩展
除了上述的基本选择器，常用的选择器还有后代选择器，并集选择器和属性选择器。以下是这三种选择器的具体使用方法。 1.8.1 后代选择器（包含选择器） 后代选择器是用来选择元素或元素组的后代，所以标签关系首先必须是嵌套关系，其写法就是把父级选择器写在前面，子级选择器写在后面，中间用空格分隔。用法如【文件2-15】所示： 【文件2-15】后代选择器 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8">
<title>Title</title>
<style>
ul li {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<!--后代选择器-->
<ul>
<li>传智播客</li>
<li>黑马程序员</li>
</ul>
<ol>
<li>java</li>
<li>UI</li>
</ol>
</body>
</html>
1.8.2 并集选择器并集选择器是把各个选择器通过逗号连接起来，用来定义相同的样式，减少代码的冗余，最后一个选择器后面不需要加逗号。并集选择器的使用方法如【文件2-16】所示： 【文件2-16】并集选择器 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, .test, #addr {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<!--并集选择器-->
<div>
传智播客
</div>
<h5 class="test">黑马程序员</h5>
<span id="addr">上海市.浦东新区</span>
</body>
</html>
在浏览器中运行【文件2-16】中的代码发现这三个标签都被选中了，如图2-9所示：
图2-9 并集选择器 1.8.3 属性选择器属性选择器是根据标签中的属性和属性值来选中这个标签，从而对这个标签进行修饰。属性选择器的 用法如【文件2-17】所示： 【文件2-17】属性选择器 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<metacharset
="UTF-8">
<title>Title</title>
<style>
/*选中input标签中type属性的值为text的标签*/
input[type='text'] {
background-color: cadetblue;
}
/*选中input标签中type属性的值为password的标签*/
input[type='password'] {
background-color: rebeccapurple;
}
</style>
</head>
<body>
<!--属性选择器-->
用户名：<input type="text" name="username">
手机号码：<input type="text" name="phonenum">
密码：
<inputtype
="password" name="password">
</body>
</html>在浏览器中运行【文件2-17】中的代码，结果如图2-10所示，type为text和password的标签分别被 选中了。
图2-10 属性选择器
1.9 盒模型
CSS盒子模型是网页设计中使用到的一种思维模型。就是把把每一个标签都看成是一个盒子，每个盒子都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。如图2-11所示： 图2-11 CSS盒子模型 以下是对盒模型的各部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 1.9.1 外边距（Margin） 在CSS盒模型中外边距用margin属性指定，具体用法如【文件2-18】所示： 【文件2-18】外边距margin [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div_a {
width: 250px;
height: 250px;
font-size: 25px;
background-color: #0e90d2;
margin: 50px;
}
</style>
</head>
<body>
<div id="div_a">
我是传智人A
</div>
</body>
</html>【文件2-18】中的代码在浏览器上执行的结果如图2-12所示：
图2-12 外边距margin 如【文件2-18】中所示，margin属性后面直接跟长度单位即可定位div的外边距。margin属性值的写法及表示的定位方式有以下四种。 【表格2-2】margin的写法及意义 | margin的写法 | | | | | | | | margin:10px 20px 30px 40px; | |
在浏览器的开发者工具（按F12打开）中可以查看任意一个标签的盒模型，如图2-13所示，查看margin属性值为：margin:10px 20px 30px 40px;的div的盒模型。
图2-13 查看div的盒模型
如图2-13所示，当定义margin:10px 20px 30px 40px;时，margin-top，margin-right，margin-bottom，margin-left分别表示的含义如图2-14所示：
图2-14 外边距margin 注意： 当margin的属性值为“0 auto;”时，它表示的是让这个固定大小的元素水平居中。 1.9.2 边框（border） border指的是围绕在内边距和内容外的边框。用法如“border:1pxsolid #000;”表示生成1像素实线的黑色边框。border的常用属性如图2-15所示：
图2-15 border的常用属性 1.9.3 内边距（padding） padding指的是内容与边框之间的距离。内边距的用法与外边距的用法一样，如【表格2-3】所示： 【表格2-3】padding的写法及意义 | padding的写法 | | | | | | | | padding:10px 20px 30px 40px; | |
注意： 如果一个盒子有固定大小，加了padding会变大。
1.10 背景
背景指的是背景颜色和背景图片的设置。 1.10.1 背景颜色 背景颜色使用background-color属性来指定，如【文件2-19】所示： 【文件2-19】背景颜色 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div_a {
width: 250px;
height: 250px;
font-size: 25px;
margin: 0 auto;
/*设置背景颜色*/
background-color: #0e90d2;
}
</style>
</head>
<body>
<div id="div_a">
我是传智人A
</div>
</body>
</html>背景图片使用background-image属性指定。用法：background-image:url(图片的路径地址);如【文件2-20】所示： 【文件2-20】背景图片 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置背景图片*/
body {
background-image: url("../images/lyf1.jpg");
}
</style>
</head>
<body>
</body>
</html>【文件2-20】中的代码在浏览器中执行的结果如图2-16所示：
图2-16 背景图片 如图2-16所示，背景图片默认铺满整个页面。可以通过添加background-repeat属性来指定图片的平铺方式。background-repeat的取值有三种：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺。这三种平铺方式如图2-17所示：
图2-17 平铺方式
1.11 常用样式作为一个Java后台开发人员掌握以上内容，在开发中已经够用了。先将开发中常用的样式总结如【表 格2-4】所示： 【表格2-4】常用样式 | color | | red红 green绿 blue蓝 #fff白 #000黑 rgb(0,0,0) 取值0-255 | | | | | | left左 center中 right右 效果等同于标签属性align | | | | | | | | | 不加粗：400或者normal 加粗：700或者bold | | | | | | | | | |
1.12 案例三根据上面介绍的知识知识完成如图2-18所示的注册页面：
图2-18 注册页面
1.12.1 需求分析为了结构更好的显示表单，本案例我们需要使用table表格布局。根据“验证码”我们需要提供3列来显示数据，其他需要将中和右合并。最终需要创建3*10表格。 具体实现如【文件2-21】所示： 【文件2-21】创建3*10表格 [HTML] 纯文本查看 复制代码 <table>
<tr>
<td colspan="3">
<span class="s1">会员注册</span>
<span class="s2">USER REGISTER</span>
</td>
</tr>
<tr>
<td>用户名</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td>密码</td>
<td colspan="2"><input type="password"/></td>
</tr>
<tr>
<td>确认密码</td>
<td colspan="2"><input type="password"/></td>
</tr>
<tr>
<td>Email</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td>姓名</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td>性别</td>
<td colspan="2">
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" class="checkcode"/></td>
<td>
<imgsrc
="img/checkcode.jpg"/>
</td>
<td></td>
<td colspan="2"><input type="image" src="img/btn.jpg"/></td>
</table>实现的效果如图2-19所示：
图2-19 注册页面 1.12.2 添加CSS样式进行美化把基本的html结构都写完了之后，就加上对应的CSS进行美化处理。具体实现如【文件2-22】所示： 【文件2-22】美化注册页面 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: url(img/bg.jpg);
}
.bigBox {
width: 800px;
margin: 50px auto;
border: 10px solid #999;
background: #fff;
padding: 40px 60px;
}
.s1 {
font-size: 24px;
color: green;
}
.s2 {
color: #ccc;
}
input[type='text'],
input[type='password'] {
width: 100%;
height: 30px;
border: 1px solid #ccc;
}
.text {
text-align: right;
}
</style>
</head>
<body>
<div class="bigBox">
<form action="#">
<table>
<tr>
<td colspan="3">
<span class="s1">会员注册</span>
<span class="s2">USER REGISTER</span>
</td>
</tr>
<tr>
<td class="text">用户名</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td class="text">密码</td>
<td colspan="2"><input type="password"/></td>
</tr>
<tr>
<td class="text">确认密码</td>
<td colspan="2"><input type="password"/></td>
</tr>
<tr>
<td class="text">Email</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td class="text">姓名</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td class="text">性别</td>
<td colspan="2">
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td class="text">出生日期</td>
<td colspan="2"><input type="text"/></td>
</tr>
<tr>
<td class="text">验证码</td>
<td><input type="text" class="checkcode"/></td>
<td><img src="img/checkcode.jpg"/></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="image" src="img/btn.jpg"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
1.13 本章小结
本章主要对CSS的基本应用进行了详细阐述，通过对本章的学习，我们应该能够对一个普通的注册表单进行CSS样式修饰。
PS：关于伪元素和伪类，请参考博客园播客：http://www.cnblogs.com/keyi/p/5943178.html
| 
收藏
淘帖
踩
