WEB入门四CSS样式表深入

来源：互联网发布：天猫淘宝双十一晚会编辑：程序博客网时间：2024/05/17 22:19

学习内容

Ø CSS选择器深入学习

Ø CSS继承

Ø CSS文本效果

Ø CSS图片效果

能力目标

Ø 掌握CSS选择器的组合声明和嵌套

Ø 理解CSS的继承

Ø 熟练掌握CSS文本效果

Ø 掌握CSS图片效果

本章简介

上一章学习了CSS的语法基础及文字效果，学习了3种选择器，选择器是CSS中非常重要的概念，本章将深入学习选择器的知识，主要包括选择器的集体声明和嵌套。面向对象编程语言中有为了实现代码的重用有继承的特性，而CSS中也有可以使用继承的特性实现代码的重用。

网页中只包含文字是单调的，加入图片后才能实现图文并茂的网页。本章将学习使用CSS实现丰富的文本和图片效果。

核心技能部分

1.1 组合选择器

在利用CSS选择器控制HTML标签时，除了每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个，并且任何形式的选择器（包括标签选择器、class选择器、ID选择器）都是合法的。

1. 组合选择器

在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者是部分相同，这时便可以使用组合声明的方法同时声明多个选择器。

语法：

选择器1,选择器2,选择器3…{

属性:值; 属性:值;

}

示例4.1

<html>

h1, h2, h3, h4, h5, p{ /* 一组标签的声明 */

color:purple; /* 文字颜色 */

font-size:15px; /* 字体大小 */

}

h2.special, .special, #one{ /* 组和声明 */

text-decoration:underline; /* 下划线 */

}

</style></head>

<body>

<h1>组合声明h1</h1>

<h2 class="special">组合声明h2</h2>

<h3>组合声明h3</h3>

<h4>组合声明h4</h4>

<h5>组合声明h5</h5>

<p>组合声明p1</p>

<p class="special">组合声明p2</p>

<p id="one">组合声明p3</p>

</body>

</html>

示例4.1的运行效果如图4.1.1所示，可以看到所有行的颜色都是紫色，而且字体大小都是15px。组合声明的效果和单独声明的效果完全相同，这样避免了为每个标签都进行CSS声明，从而达到代码的高度重用。h2.special、.special和#one声明并不影响前一个组合声明，第2行和最后一行在紫色和大小15px的基础上使用了下划线进行突出。

图4.1.1 选择器组合声明

2. 全局声明

如果希望对页面中所有标签都用同一种CSS样式，但又不想逐个加入组合声明列表。这时可以使用 “*”进行全局声明。如示例4.2

示例4.2

<html>

*{ /* 全局声明 */

color: purple; /* 文字颜色 */

font-size:15px; /* 字体大小 */

}

h2.special, .special, #one{ /* 组合声明 */

text-decoration:underline; /* 下划线 */

}

</style></head>

<body>

<h1>全局声明h1</h1>

<h2 class="special">全局声明h2</h2>

<h3>全局声明h3</h3>

<h4>全局声明h4</h4>

<h5>全局声明h5</h5>

<p>全局声明p1</p>

<p class="special">全局声明p2</p>

<p id="one">全局声明p3</p>

</body>

</html>

示例4.2的运行效果如图4.1.2所示，可以看到效果和示例4.1完全相同，代码却大大缩减了。

1.1.2 选择器全局声明

1.2 包含选择器

在CSS选择器中还可以通过嵌套的方式，对特殊HTML标签进行声明，例如当<p>和</p>标签之间包含<b></b>标签时，就可以使用选择器嵌套对其进行控制，如示例4.3

示例4.3

<html>

<head><title>CSS选择器的嵌套声明</title>

p b{ /* 嵌套声明 */

color:red; /* 颜色 */

text-decoration:underline; /* 下划线 */

}

</style></head>

<body>

<p>嵌套使用<b>CSS</b>标签的方法</p>

嵌套之外的<b>标签</b>不生效

</body>

</html>

示例4.3运行效果如图4.1.3所示，可以看到通过将b选择器嵌套在p选择器中进行声明，显示效果只对<p>和</p>标签之间包含<b>标签有效(加上了下划线，颜色红色)，而其外的<b>标签并不会产生效果。

图4.1.3 CSS选择器嵌套

嵌套选择器的使用非常广泛，不只是嵌套标签本身，类别选择器和ID选择器都可以进行嵌套，下面是一些典型的嵌套语句。

.special i { color: red; } /*类别为special的标签里包含的i标签*/

#one li { font-size: 15px;}/*ID为one的标签里包含的<li>标签*/

td.top .top1 strong { font-size: 18px } /*多层嵌套*/

1.3 CSS文本样式

文本样式用于定义文本的外观，包括文木颜色、行高、对齐方式、字符间距等，常用的文本属性如表4-1-1所示。

表4-1-1 CSS文本样式常用属性

属性名

含义

示例

应用场景

text-align

设置水平对齐方式，常用取值为left、right、center

text-align:center;

各种元素水平对齐

vertical-align

设置垂直对齐方式，常用取值为top、bottom、middle

vertical-align:middle;

各种元素垂直对齐

line-height

设置行间距

line-heigh:25px;

加大缩少行高

letter-spacing

设置字间距

letter-spacing:5px;

加大缩小字符间距

white-space

设置如何处理空白，例如设置是否换行等，常取值为nowrap(不换行)

white-space:nowrap;

文本超出屏幕时是否换行

1.3.1 文本垂直对齐

在CSS中文本的垂直对齐方式是通过vertical-align属性进行设置的。对于文字本身而言，该属性对于块元素并不起作用，例如<p>和<table>标签等。但对于表格而言，这个属性显得非常重要，如示例4.4所示：

示例4.4

<html>

<style>

.top{ vertical-align:top; } /* 顶端对齐 */

.bottom{ vertical-align:bottom; } /* 底端对齐 */

.middle{ vertical-align:middle; } /* 中间对齐 */

</style></head>

<body>

<tr>

<td class="top">垂直对齐方式，top</td>

</tr>

<tr>

<td class="bottom">垂直对齐方式，bottom</td>

</tr>

<tr>

<td class="middle">垂直对齐方式，middle</td>

</tr>

</table>

</body>

</html>

在示例4.4中建立一个3行2列的表格，其中第1列都是一张图片，第2列都是文字，分别采用了顶端对齐、底端对齐和中间对齐的方式，对应的CSS值为top、bottom和middle，在浏览器中运行的效果如图4.1.4所示：

图4.1.4 垂直对齐方式

如果vertical-align属性设置具体的数值，对于文字本身则可以在垂直方向山发生位移，如示例4.5所示：

示例4.5

<html>

<style>

.zs{ vertical-align:10px; }

.fs{ vertical-align:-10px; }

</style></head>

<body>

<p>给对齐属性设置具体<span class="zs">数值</span>，正数</p>

<p>给对齐属性设置具体<span class="fs">数值</span>，负数</p>

</body>

</html>

示例4.5的运行效果如图4.1.5所示，当值是正数时文字向上移动相应的数值，当值是负数时则向下移动。

图4.1.5 垂直对齐，设置数值

另外，vertical-align属性还有很多其它的值，不过主要适用于图片，将在下一节中学习。

1.3.2 行间距和字间距

在使用Word编辑文档时，可以轻松地设置行间距，在CSS中通过line-height属性同样可以轻松实现行间距的设置。

1. 行间距line-height

在CSS中line-height的值表示是两行文字之间基线的距离。如果给文字加上上下划线，那么下划线就是文字的基线。

示例4.6

<html>

<style>

p.one{

font-size:10pt;

line-height:8pt; /* 行间距，绝对数值，行间距小于字体大小 */

}

p.second{ font-size:18px; }

p.third{ font-size:12px; }

p.second, p.third{

line-height: 1.5em; /* 行间距，相对数值 */

}

</style></head>

<body>

<p class="one">秋分，我国古籍《春秋繁露、阴阳出入上下篇》中说：“秋分者，阴阳相半也，故昼夜均而寒暑平。”“秋分”的意思有二：一是太阳在这时到达黄径180。一天24小时昼夜均分，各12小时；二是按我国古代以立春、立夏、立秋、立冬为四季开始的季节划分法，秋分日居秋季90天之中，平分了秋季。</p>

<p class="second">秋分时节，我国长江流域及其以北的广大地区，均先后进入了秋季，日平均气温都降到了22℃以下。北方冷气团开始具有一定的势力，大部分地区雨季刚刚结束，凉风习习，碧空万里，风和日丽，秋高气爽，丹桂飘香，蟹肥菊黄，秋分是美好宜人的时节。</p>

<p class="third">秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。</p>

</body>

</html>

示例4.6的运行效果如图4.1.6所示，第1段文字采用了绝对数值，并且将行间距设置得比文字大小还要小，因此可以看到文字发生了部分重叠现象。第2段和第3段分别设置了不同的文字大小，但由于使用了相对数值，因此能够自动调节行间距。

图4.1.6 文本行间距

2. 字间距letter-spacing

与line-height属性的使用方法类似，CSS中通过letter-spacing属性来设置字间距。这个属性同样可以使用相对数值和绝对数值。如示例4.7。

示例4.7

<html>

<style>

p.one{

font-size:10pt;

letter-spacing:-2pt; /* 字间距，绝对数值，负数 */

}

p.second{ font-size:18px; }

p.third{ font-size:14px; }

p.second, p.third{

letter-spacing: .5em; /* 字间距，相对数值 */

}

</style></head>

<body>

</body>

</html>

示例4.7的运行效果如图4.1.7所示，可以看到文字间距属性letter-spacing除了可以使用相对数值和绝对数值外，还可以使用负数来实现文字重叠效果。

图4.1.7 字间距

1.4 表格样式

表格在HTML网页中使用非常的广泛。可以使用表格显示数据、布局等。本节将详细学习CSS表格效果设置。

1.4.1 表格的标签

在第2章中学习了基本表格的创建，相信大家对表格中的标签非常熟悉，如示例5.4是一个用来显示统计的表格，使用<caption>标签加了标题，使用<th>标签加入表头单元格。没有加入任何CSS修饰。

示例4.8

<html>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

示例4.8的运行效果如图4.1.8所示

图4.1.8 基本表格

1.4.2 表格的颜色

表格的颜色设置十分简单，与文字颜色的设置完全一样即通过color属性设置表格中文字的颜色，通过background-color属性设置表格背景颜色。给示例4.9加入如下CSS代码，简单设置表格的文字颜色、背景颜色。

示例4.9

<style>

body{

background-color:#ebf5ff; /* 页面背景色 */

text-align:center; /* 居中对齐（IE有效） */

}

table{

color:#0046a6; /* 表格文字颜色 */

background-color:#d2e8ff; /* 表格背景色 */

font-family:Arial; /* 表格字体 */

}

caption{

font-size:18px; /* 标题文字大小 */

font-weight:bold; /* 标题文字粗体 */

}

th{

color:#003e7e; /* 行、列名称颜色 */

background-color:#7bb3ff; /* 行、列名称的背景色 */

}

</style>

此时表格的运行效果如图4.1.9所示，可以看到页面的背景颜色、表格背景色、字体等都进行了相应的变化。而这些设置与前面学习的设置文字样式和页面背景完全相同。

图4.1.9 表格的颜色

1.4.3 表格的边框

如前所述在HTML中设置边框最常见的是通过<table>标签的border属性来设置其粗细，通过bordercolor来设置边框颜色，但是这样设计的表格很不美观并且在不同的浏览器中的显示效果也不太一样。

相比采用HTML标签，使用CSS设置表格边框更为精细和美观。在CSS中设置边框同样是通过border属性，方法和设置图片边框完全一样，只不过在表格中需要特别注意单元格之间的关系。在示例4.9的基础上，修改HTML代码<talbe>标签的border属性等于0或者删除该属性，修改修饰<table>的CSS代码如下所示，仅仅是设置了表格的边框，单元格不会有任何边框，如图4.1.10所示：

table{

color:#0046a6; /* 表格文字颜色 */

font-family:Arial; /* 表格字体 */

border:1px solid #0055ff; /*表格边框*/

}

图4.1.10 表格边框

因此才用CSS设置表格边框时，需要为表格中的单元格单独设置边框，修改CSS代码如下所示，修改后运行效果如图4.1.11所示：

th{

color:#003e7e; /* 行、列名称颜色 */

border:1px solid #0055ff;

background-color:#d2e8ff;

}

td{

color:#003e7e; /* 行、列名称颜色 */

border:1px solid #0055ff;

}

图4.1.11 表格单元格边框

如图4.1.11所示，按照前面的步骤设置完表格边框和单元格边框后，各个单元格的边框之间会有间隙，这时候需要设置整个表格的border-collapse属性，使得边框重叠在一起。最后再设置caption的CSS样式，完整代码如示例4.10所示

示例4.10

<style>

body{

background-color:#feffe3; /* 页面背景色 */

text-align:center; /* 居中对齐（IE有效） */

}

table{

color:#0046a6; /* 表格文字颜色 */

font-family:Arial; /* 表格字体 */

border:1px solid #0055ff; /*表格边框*/

border-collapse: collapse; /*单元格边框重叠*/

}

caption{

font-size:18px; /* 标题文字大小 */

font-weight:bold; /* 标题文字粗体 */

}

th{

color:#003e7e; /* 行、列名称颜色 */

border:1px solid #0055ff;

background-color:#d2e8ff;

}

td,caption{

color:#003e7e; /* 行、列名称颜色 */

border:1px solid #0055ff;

}

</style>

示例4.10的运行效果如图4.1.12所示，可见通过CSS控制使得表格比使用HTML设置的表格要绚丽的多。

图4.1.12 CSS综合控制表格

1.4.4 表格综合示例：隔行变色

当表格中的行和列很多时，单元格如果才用相同的背景颜色，用户在浏览时会感到疲劳。通常的解决办法就是采用隔行变色，使得奇数行和偶数行的背景颜色不一样，达到一目了然的效果。

在CSS中实现隔行变色十分简单，思路主要是给偶数行和奇数行添加不同的样式，如示例5.7所示：

示例4.11

<html>

<style>

table{

border:1px solid #0058a3; /* 表格边框 */

font-family:Arial;

border-collapse:collapse; /* 边框重叠 */

font-size:14px;

}

caption{

padding-bottom:5px;

font:1.2em;

font-weight:bold;

text-align:left;

background-color:#c7e5ff;

}

td{

border:1px solid #0058a3; /* 单元格边框 */

text-align:center;

padding-top:4px;

padding-bottom:4px;

padding-left:10px;

padding-right:10px;

}

tr.altrow{

background-color:#c7e5ff; /* 偶数行背景色 */

}

</style>

</head>

<body>

<td>人民网</td><td>中国移动</td><td>中国政府网</td></tr>

<td>4399游戏</td><td>太平洋电脑网</td></tr>

<tr class="altrow"><td>东方财富</td><td>中华英才网</td><td>中彩网</td>

<td>赛尔号</td><td>智联招聘</td><td>携程旅行网</td></tr>

<td>搜房网</td><td>大众点评网</td></tr>

<tr class="altrow"><td>工商银行</td><td>当当网</td><td>中关村在线</td>

</table>

</body>

</html>

示例4.11的运行效果如图4.1.13所示。这种方法使得数据的显示尤为清晰，特别是数据很多的时候，这种方法非常实用。

图4.1.13 隔行变色的表格

1.5 表单样式

表单是用户和服务器交互不可或缺的元素，在HTML中对表单元素的样式控制很少，仅仅局限于功能上的实现。本节学习CSS控制表单，包括对表单中各个元素进行控制，表单与表格配合制作各种效果等。

1.5.1 表单中的元素

如前面学习到的，表单中的元素很多，包括常用的输入框、密码框、单选按钮、复选框、下拉框、多行文本输入框和按钮等，如示例4.12是一个没有经过CSS修饰的简单表单。

示例4.12

<html>

<head>

<body>

<p>请输入您的姓名:<br><input type="text" name="name" id="name"></p>

<p>请选喜欢的颜色:<br>

</select></p>

<p>请问你的性别:<br>

<p>你喜欢做些什么:<br>

<input type="checkbox" name="hobby" id="book" value="book">看书

<input type="checkbox" name="hobby" id="net" value="net">上网

</form>

</body>

</html>

示例4.12的运行效果如图4.1.14所示，因为没有加入任何CSS样式，所以显示效果非常的单调。

图4.1.14 普通表单

1.5.2 表单样式

没有使用样式修饰的表单非常的单调。下面使用CSS对表单进行控制，对整个表单添加简单的样式风格，包括边框，背景色，宽度和高度等。如示例4.13所示：

示例4.13

<html>

<head>

<style>

form {

border: 1px dotted #AAAAAA;

padding: 3px 6px 3px 6px;

margin:0px;

font:14px Arial;

}

input {

color: #00008B;

background-color: #ADD8E6;

border: 1px solid #00008B;

}

select {

width: 80px;

color: #00008B;

background-color: #ADD8E6;

border: 1px solid #00008B;

}

textarea {

width: 200px;

height: 40px;

color: #00008B;

background-color: #ADD8E6;

border: 1px solid #00008B;

}

</style>

</head>

<body>

<p>请输入您的姓名:<br><input type="text" name="name" id="name"></p>

<p>请选喜欢的颜色:<br>

</select></p>

<p>请问你的性别:<br>

<p>你喜欢做些什么:<br>

<input type="checkbox" name="hobby" id="book" value="book">看书

<input type="checkbox" name="hobby" id="net" value="net">上网

</form>

</body>

</html>

示例4.13的运行效果如图4.1.15所示，此时表单看上去就不那么单调了。

图4.1.15简单表单样式

通过对表单样式的应用，可以发现比原始的HTML表单更加美观；经常上网可以看网站上的好多表单元素的外观都是应用样式的结果；而不是灰色的按钮。这就是样式表的神奇之处，让客户在浏览信息的时候赏心悦目，提高网站客户的粘合度；有了大量的注册用户后你的网站离盈利的距离就越来越近了。

本章总结

Ø CSS选择的特殊声明

(1) 组合选择器

(2) 包含选择器

Ø CSS常用样式

n 文本样式

n 表格样式

n 表单样式

任务实训部分

实训任务1 CSS组合选择器

训练技能点

Ø 组合选择器

Ø 字体样式

需求说明：

请使用组合选择器的方式实现如图4.2.1效果。要求页面整体字体为微软雅黑，<h1>和<p>标签字体为黑体，颜色为蓝黑#000055，加下划线。

图4.2.1 CSS选择器组合声明

实现思路

Ø 使用选择器组合声明的方式为页面中所有元素声明共同的样式

Ø 再使用标签选择器为特殊的标签声明特殊的样式

实现步骤

(1) 编写HTML页面内容，页面内容如下所示：

<html>

<body>

<p>欢迎学习CSS</p>

<ul>

<li>在这里，你可以学习到：

<ul>

<li>Javascript</li>

</ul>

</li>

</ul>

<p>第一章:CSS基础语法</p>

<ol>

<li>CSS简介</li>

<li>CSS选择器</li>

<li>CSS样式表种类</li>

<li>CSS文字样式</li>

</ol>

<p>如果您有任何问题，欢迎联系我们</p>

</body>

</html>

(2) 使用“*”号组合声明页面中所有元素的样式，字体为微软雅黑，然后使用标签选择器声明设置<h1>和<p>标签的样式，字体为黑体，颜色为蓝黑#000055，加下划线，核心代码如下。

font-family: 微软雅黑;

}

h1,p{

font-family: 黑体;

text-decoration: underline;

color:#000055;

}

</style>

实训任务2 CSS文本效果

训练技能点

Ø 文本样式

Ø 文字样式

需求说明

使用CSS完成如图4.2.2所示效果，要求的文本设置，文本字体为微软雅黑，字号为17px，行高21px，字间距为3px，里面所有<span>标签中的内容字体颜色为浅蓝色(#136EC2)、加粗并加下划线。

图4.2.2 文本样式

实现思路

Ø 使用标签选择器为整个<p>段落设置样式

Ø 设置文字样式，字体和字号等

Ø 使用line-height设置行高

Ø 使用letter-spacing设置字间距

Ø 再为里面的特殊文字设置不同的样式

实现步骤

(1) 编写页面内容，HTML内容如下。

<html>

<body>

<p>

中秋节，农历八月十五，我国的传统<span>节日</span>之一。关于节日起源有很多种说法，也有很多关于这天的<span>传说</span>和传统。

中秋节与<span>春节</span>、<span>清明节</span>、<span>端午节</span>并称为中国<span>汉族</span>的四大传统节日。自2008年起中秋节被列为国家<span>法定节假日</span>。

国家非常重视非物质文化遗产的保护，2006年5月20日，该节日经<span>国务院</span>批准列入第一批国家级<span>非物质文化遗产</span>名录。

</p>

</body>

</html>

(2) 使用标签选择器为整个段落设置共同的样式，参考代码如下。

font-family: 微软雅黑;

font-size: 17px;

line-height: 21px;

letter-spacing: 3px;

}

(3) 再为包含在<span>标签里的特殊文字添加样式。代码如下。

span{

font-weight: bold;

text-decoration: underline;

color:#136EC2;

}

实训任务3 实现细线表格

训练技能点

Ø CSS表格背景

Ø CSS表格边框

Ø 实现细线表格

需求说明

页面内容如下，使用CSS实现细线表格效果，运行效果如图4.2.3所示。

图4.2.3 细线表格效果

实现思路

Ø 给整个表格加入文字设置，背景颜色和边框颜色，例如#eaf5ff

Ø 给表头加入不同的文字设置，背景颜色，比如#4bacff，用以突出显示

Ø 设置单元格的border为1px，表格的边框也为1px，使用border-collapse:collapse设置表格和单元格的边框重叠

实现步骤

(1) 首先编写HTML内容，代码如下。

<html>

<head><title>Member List</title></head>

<body>

<table>

<caption>Member List</caption>

<tr> /*表头*/

<th>Class</th>

<th>Birthday</th>

<th>Constellation</th>

<th>Mobile</th>

</tr>

<td>isaac</td>

<td>Cancer</td>

</tr>

<td>girlwing</td>

<td>Virgo</td>

</tr>

……

</table>

</body>

</html>

(2) 使用类别选择器定义表格表格的样式效果，代码如下。

.datalist{

border:1px solid #0058a3; /* 表格边框 */

font-family:Arial;

border-collapse:collapse; /* 边框重叠 */

background-color:#eaf5ff; /* 表格背景色 */

font-size:14px;

}

(3) 设置表头和单元格的样式效果，关键代码如下所示。

.datalist caption{

font:bold 1.4em;

text-align:left;

}

.datalist th{

border:1px solid #0058a3; /* 表头边框 */

background-color:#4bacff; /* 表头背景色 */

color:#FFFFFF; /* 表头颜色 */

text-align:center;

}

.datalist td{

border:1px solid #0058a3; /* 单元格边框 */

text-align:left;

}

实训任务4 实现经过隔行变色的表格

训练技能点

Ø CSS表格背景

Ø CSS表格边框

Ø 实现细线表格

Ø 表格隔行变色

需求说明

在实训任务3的基础上，实现如下要求。

参考示例5.7实现隔行变色表格效果。

实现思路

为奇数行和偶数行设置不同的样式。运行结果如图4.2.4所示

图4.2.4 隔行变色表格

实训任务5 制作七彩下拉框

训练技能点

Ø 表单样式

Ø 下拉框样式

需求说明

使用CSS制作一个七彩下拉框，如图4.2.5所示。

图4.2.5 七彩下拉框

实现思路

对下拉框的每一个选项设置不同的背景颜色。

实训任务6 制作网站调查问卷CSS效果

训练技能点

表格和表单样式综合训练

需求说明

制作网站调查问卷，最终效果如图4.2.6所示。

图4.2.6网站调查效果

实现思路

Ø 使用嵌套表格，分别为内层和外层表格设置不同的内容和样式

Ø 再为表单设置相应的样式

实现步骤

(1) 建立HTML页面，考虑到调查问卷分为内外两层，外层为橘红色，内层为红色，因此才用表格嵌套的方式，参考代码如下

<html>

<head>

<body>

<tr>

在姚明缺阵麦蒂领军的情况下，火箭队的胜率是<br>

<input type="radio" name="q_498" value="2752">40％到50％

<a href="#">新浪-篮球先锋报联合评选</a>

</td>

</tr>

</table>

</form>

</td></tr>

</table>

</body>

</html>

(2) 为外层表格添加CSS样式，包括背景图片，文字大小和标题样式等，代码如下所示。

.outside{ /* 外层表格 */

background:url(bg1.jpg);

font-size:12px;

padding:0px;

}

.title{ /* 表格标题 */

color:#FFFFFF;

font-weight:bold;

text-align:center;

padding-top:3px;

padding-bottom:0px;

}

.tdoutside{

padding:0px 1px 4px 1px;

}

此时的效果如图4.2.7所示。

图4.2.7外层表格效果

(3) 然后调整内层表格的样式，包括文字的样式、背景颜色、表单按钮和单选按钮等。关键代码如下所示。最终效果如图4.2.7所示。

.inside{ /* 内层表格 */

width:269px;

font-size:12px;

padding:0px;

margin:0px;

}

.tdinside{

padding:7px 0px 7px 10px;

background-color:#FFD455;

}

form{

margin:0px; padding:0px;

}

input{

font-size:12px;

}

color:#000000;

}

巩固练习

一、选择题

1. 在以下的 CSS 中，可使所有<p>元素变为粗体的正确语法是 ( )

A. <pstyle="font-size:bold">

B. <pstyle="text-size:bold">

C. p {font-weight:bold}

D. p {text-size:bold}

2. 以下哪个选项不是text-align的正确取值( )

A. left

B. right

C. center

D. middle

3. 以下哪个选项不是border-style的正确取值( )

A. baseline

B. solid

C. dotted

D. dashed

4. 在CSS中哪个属性用来调整文本文字之间的间距( )

A. word-space

B. line-space

C. letter-spacing

D. word-spacing

5. 哪个属性可用于改变背景颜色？ ( )

A. bgcolor:

B. background-color:

C. color:

6. 如何为所有的<h1>元素添加背景颜色？( )

A. h1.all{background-color:#FFFFFF}

B. h1 {background-color:#FFFFFF}

C. all.h1{background-color:#FFFFFF}

7. 下列选项中( )可以设置网页背景图像。

A. bgimage

B. background-color

C. color

D. background

8. 下列选项中( )可以设置网页背景图像水平重复。

A. repeat-width

B. repeat-y

C. no-repeat

D. repeat-x

9. 下列选项中( )可以设置网页表格的边框是否重叠。

A. border-collapse

B. border

C. border-style

二、上机练习

1. 制作可以直接输入的Excel式表格。实现步骤：

(1) 首先准备好HTML文档内容，代码如下。此时效果如图4.3.1所示

<html>

<head><title>直接输入的Excel表格</title>

<style>

</style></head>

<body>

<caption>公司销售统计表 2004～2007</caption>

<tr>

</tr>

<tr>

</tr>

<tr>

<th scope="row">主板(Mainboard)</th>

</tr>

<tr>

<th scope="row">内存条(Memory Disk)</th>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

图4.3.1输入表格初始效果

(2) 建立好页面后，开始为表格和表单分别设置CSS样式，总体思路在于整个表格的样式：整个表格的边框和字体、表格标题<caption>文本左对齐、表头<th>加入细边框(边框颜色比如#5F6F7E)和背景颜色(比如#E2E2E2)、普通单元格<td>细边框(边框颜色比如#ABABAB)，而将表单的输入框设置为“不可见”。首先设置表格样式，比如设置整个表格的的边框，字体。代码如下所示。

.formdata{

border:1px solid #5F6F7E;

border-collapse:collapse;

font-family:Arial;

}

给表格加入以上CSS设置后

0 0

WEB入门 四CSS样式表深入

1.1 组合选择器

1.2 包含选择器

1.3 CSS文本样式

1.3.1 文本垂直对齐

1.3.2 行间距和字间距

1.4 表格样式

1.4.1 表格的标签

1.4.2 表格的颜色

1.4.3 表格的边框

1.4.4 表格综合示例：隔行变色

1.5 表单样式

1.5.1 表单中的元素

1.5.2 表单样式

实训任务1 CSS组合选择器

实训任务2 CSS文本效果

实训任务3 实现细线表格

实训任务4 实现经过隔行变色的表格

实训任务5 制作七彩下拉框

实训任务6 制作网站调查问卷CSS效果

WEB入门四CSS样式表深入