WEB入门 四 CSS样式表深入
学习内容
Ø 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
组合声明p1
组合声明p2
组合声明p3 html> |
示例4.1的运行效果如图4.1.1所示，可以看到所有行的颜色都是紫色，而且字体大小都是15px。组合声明的效果和单独声明的效果完全相同，这样避免了为每个标签都进行CSS声明，从而达到代码的高度重用。h2.special、.special和#one声明并不影响前一个组合声明，第2行和最后一行在紫色和大小15px的基础上使用了下划线进行突出。
图4.1.1 选择器组合声明
2. 全局声明
如果希望对页面中所有标签都用同一种CSS样式，但又不想逐个加入组合声明列表。这时可以使用 “*”进行全局声明。如示例4.2
示例4.2
<html> 全局声明h1
全局声明h2
全局声明h3
全局声明h4
全局声明h5
全局声明p1
全局声明p2
全局声明p3 html> |
示例4.2的运行效果如图4.1.2所示，可以看到效果和示例4.1完全相同，代码却大大缩减了。
1.1.2 选择器全局声明
1.2 包含选择器
在CSS选择器中还可以通过嵌套的方式，对特殊HTML标签进行声明，例如当
和
标签之间包含标签时，就可以使用选择器嵌套对其进行控制，如示例4.3示例4.3
<html>
嵌套使用CSS标签的方法 嵌套之外的标签不生效 html> |
示例4.3运行效果如图4.1.3所示，可以看到通过将b选择器嵌套在p选择器中进行声明，显示效果只对
和
标签之间包含标签有效(加上了下划线，颜色红色)，而其外的标签并不会产生效果。图4.1.3 CSS选择器嵌套
嵌套选择器的使用非常广泛，不只是嵌套标签本身，类别选择器和ID选择器都可以进行嵌套，下面是一些典型的嵌套语句。
.special i { color: red; } /*类别为special的标签里包含的i标签*/ #one li { font-size: 15px;}/*ID为one的标签里包含的 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属性进行设置的。对于文字本身而言，该属性对于块元素并不起作用，例如
和
<html>
html> |
在示例4.4中建立一个3行2列的表格，其中第1列都是一张图片，第2列都是文字，分别采用了顶端对齐、底端对齐和中间对齐的方式，对应的CSS值为top、bottom和middle，在浏览器中运行的效果如图4.1.4所示：
图4.1.4 垂直对齐方式
如果vertical-align属性设置具体的数值，对于文字本身则可以在垂直方向山发生位移，如示例4.5所示：
示例4.5
<html>
给对齐属性设置具体数值，正数
给对齐属性设置具体数值，负数 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>
秋分，我国古籍《春秋繁露、阴阳出入上下篇》中说：“秋分者，阴阳相半也，故昼夜均而寒暑平。”“秋分”的意思有二：一是太阳在这时到达黄径180。一天24小时昼夜均分，各12小时；二是按我国古代以立春、立夏、立秋、立冬为四季开始的季节划分法，秋分日居秋季90天之中，平分了秋季。
秋分时节，我国长江流域及其以北的广大地区，均先后进入了秋季，日平均气温都降到了22℃以下。北方冷气团开始具有一定的势力，大部分地区雨季刚刚结束，凉风习习，碧空万里，风和日丽，秋高气爽，丹桂飘香，蟹肥菊黄，秋分是美好宜人的时节。
秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。 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>
文字间距1，负数
文字间距2，相对数值
文字间距3，相对数值 html> |
示例4.7的运行效果如图4.1.7所示，可以看到文字间距属性letter-spacing除了可以使用相对数值和绝对数值外，还可以使用负数来实现文字重叠效果。
图4.1.7 字间距
1.4 表格样式
表格在HTML网页中使用非常的广泛。可以使用表格显示数据、布局等。本节将详细学习CSS表格效果设置。
1.4.1 表格的标签
在第2章中学习了基本表格的创建，相信大家对表格中的标签非常熟悉，如示例5.4是一个用来显示统计的表格，使用
示例4.8
<html>
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{ 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>
html> |
示例4.11的运行效果如图4.1.13所示。这种方法使得数据的显示尤为清晰，特别是数据很多的时候，这种方法非常实用。
图4.1.13 隔行变色的表格
1.5 表单样式
表单是用户和服务器交互不可或缺的元素，在HTML中对表单元素的样式控制很少，仅仅局限于功能上的实现。本节学习CSS控制表单，包括对表单中各个元素进行控制，表单与表格配合制作各种效果等。
1.5.1 表单中的元素
如前面学习到的，表单中的元素很多，包括常用的输入框、密码框、单选按钮、复选框、下拉框、多行文本输入框和按钮等，如示例4.12是一个没有经过CSS修饰的简单表单。
示例4.12
<html> html> |
示例4.12的运行效果如图4.1.14所示，因为没有加入任何CSS样式，所以显示效果非常的单调。
图4.1.14 普通表单
1.5.2 表单样式
没有使用样式修饰的表单非常的单调。下面使用CSS对表单进行控制，对整个表单添加简单的样式风格，包括边框，背景色，宽度和高度等。如示例4.13所示：
示例4.13
<html> html> |
示例4.13的运行效果如图4.1.15所示，此时表单看上去就不那么单调了。
图4.1.15简单表单样式
通过对表单样式的应用，可以发现比原始的HTML表单更加美观；经常上网可以看网站上的好多表单元素的外观都是应用样式的结果；而不是灰色的按钮。这就是样式表的神奇之处，让客户在浏览信息的时候赏心悦目，提高网站客户的粘合度；有了大量的注册用户后你的网站离盈利的距离就越来越近了。
本章总结
Ø CSS选择的特殊声明
(1) 组合选择器
(2) 包含选择器
Ø CSS常用样式
n 文本样式
n 表格样式
n 表单样式
任务实训部分
实训任务1 CSS组合选择器
训练技能点
Ø 组合选择器
Ø 字体样式
需求说明：
请使用组合选择器的方式实现如图4.2.1效果。要求页面整体字体为微软雅黑，
和
标签字体为黑体，颜色为蓝黑#000055，加下划线。
图4.2.1 CSS选择器组合声明
实现思路
Ø 使用选择器组合声明的方式为页面中所有元素声明共同的样式
Ø 再使用标签选择器为特殊的标签声明特殊的样式
实现步骤
(1) 编写HTML页面内容，页面内容如下所示：
<html>
CSS教程
欢迎学习CSS
第一章:CSS基础语法
如果您有任何问题，欢迎联系我们 html> |
(2) 使用“*”号组合声明页面中所有元素的样式，字体为微软雅黑，然后使用标签选择器声明设置
和
标签的样式，字体为黑体，颜色为蓝黑#000055，加下划线，核心代码如下。
<style type="text/css"> *{ font-family: 微软雅黑; } h1,p{ font-family: 黑体; text-decoration: underline; color:#000055; } style> |
实训任务2 CSS文本效果
训练技能点
Ø 文本样式
Ø 文字样式
需求说明
使用CSS完成如图4.2.2所示效果，要求的文本设置，文本字体为微软雅黑，字号为17px，行高21px，字间距为3px，里面所有标签中的内容字体颜色为浅蓝色(#136EC2)、加粗并加下划线。
图4.2.2 文本样式
实现思路
Ø 使用标签选择器为整个
段落设置样式
Ø 设置文字样式，字体和字号等
Ø 使用line-height设置行高
Ø 使用letter-spacing设置字间距
Ø 再为里面的特殊文字设置不同的样式
实现步骤
(1) 编写页面内容，HTML内容如下。
<html> 中秋节，农历八月十五，我国的传统节日之一。关于节日起源有很多种说法，也有很多关于这天的传说和传统。 中秋节与春节、清明节、端午节并称为中国汉族的四大传统节日。自2008年起中秋节被列为国家法定节假日。 国家非常重视非物质文化遗产的保护，2006年5月20日，该节日经国务院批准列入第一批国家级非物质文化遗产名录。 html> |
(2) 使用标签选择器为整个段落设置共同的样式，参考代码如下。
p{ font-family: 微软雅黑; font-size: 17px; line-height: 21px; letter-spacing: 3px; } |
(3) 再为包含在标签里的特殊文字添加样式。代码如下。
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>
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页面，考虑到调查问卷分为内外两层，外层为橘红色，内层为红色，因此才用表格嵌套的方式，参考代码如下
|
||
|
(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; } a{ color:#000000; } |
巩固练习
一、选择题
1. 在以下的 CSS 中，可使所有
元素变为粗体的正确语法是 ( )
A.
B.
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. 如何为所有的
元素添加背景颜色？( )
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所示
| |
图4.3.1输入表格初始效果
(2) 建立好页面后，开始为表格和表单分别设置CSS样式，总体思路在于整个表格的样式：整个表格的边框和字体、表格标题
.formdata{ border:1px solid #5F6F7E; border-collapse:collapse; font-family:Arial; } |