最近评论
正在载入评论列表...
案例3-3 使用CSS层叠样式表丰富Web页面显示效果
下面给出一些使用CSS层叠样式表的页面文档的示例。在Eclipse中新建一个项目，项目的名称为“P33_CSS”。在该项目中新建一个HTML文档，对应的页面名称为css1.html。页面的源代码如下：
例如需要针对h1标记添加颜色和字体大小的属性：
源程序名称：css1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
H1 { font-size: x-large; color: red}
H2 { font-size: large; color: blue; font-family: Arial;font-style: italic}
-->
</style>
</head>
<body>
<h1>
第一章 Web2.0 与Ajax
</h1>
<h2>
第一节 什么是Web2.0
</h2>
</body>
</html>
在该程序中，通过样式表对HTML文档中的一级标题和二级标题标记进行了完善，其中除修改了对应文字的颜色和大小之外，对二级标题还设置了文字的字体为Arial，文字的样式为italic。
需要提示的是：该程序中的<!--和-->符号，主要是为了使一些不支持CSS的浏览器忽略CSS的代码，以避免代码原样显示在浏览器中。
该页面的效果如图3-11所示。
图3-11 层叠样式表基本效果
除了按照上述方法在<head>中定义层叠样式表之外，也可以在<body>中针对对应的标记直接设置style属性的值来实现修饰的效果，称为内联式样式表。新建一个HTML页面，对应的页面名称为css2.html。
对应程序的源代码如下：
源程序名称：css2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p style="text-indent:2em;background:yellow;color:red;">
Ajax带来网络异步交互新天地！Ajax带来网络异步交互新天地！欢迎使用Ajax技术！欢迎使用Ajax技术！欢迎使用Ajax技术！
</p>
</body>
</html>
在该程序中针对<p>标记添加了style属性。设置段落的首行缩进2个字符。背景色为黄色，文字颜色为红色。
该程序实现的页面效果如图3-12所示。
图3-12 CSS在body中的实现效果
除了上面提到的使用层叠样式表的方式之外，在实际的页面设计中，为了能够使多个页面共享同一个层叠样式表文件，在实际的网页设计中往往会将多个页面中都要用到的样式规则放在一个扩展名为.css的样式表文件中定义。需要用到该样式表的页面可以在本页面的head中使用link标记引用样式表文件，称为外挂式样式表。
需要强调的是在创建层叠样式表文件时，文件内容只能包含有关的样式规则，而不允许有其他的内容，示范文件如下所示：
源程序名称：mystyle.css
h1 {
color: green;
font-family: 黑体;
text-align: center
}
p {
text-indent: 2em;
background: yellow;
font-family: 宋体
}
其中，针对一级标题设置了文字颜色、字体及对齐方式。针对段落设置了首行缩进、背景色及字体。在准备好层叠样式表文件后，就可以利用link标记引用外部样式表文件。对应的程序代码如下：
源程序名称：css3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css3.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>
引入CSS外部文件的方式
</h1>
<p>
除了上面提到的使用层叠样式表的方式之外，在实际的页面设计中，
为了能够使多个页面共享同一个层叠样式表文件，在实际的网页设计中往往
会将多个页面中都要用到的样式规则放在一个扩展名为.css的样式表文件
中定义。
需要用到该样式表的页面可以在本页面的head中使用link标记
引用样式表文件。
</p>
</body>
</html>
在该程序中的head部分，使用了link标记，该标记用于引用外部的的文件。其中rel属性设定引用文件类型为样式表“stylesheet”，href属性规定了外部文件的位置和名称，使用的是相对路径，样式表类型为“text/css”。
对应的页面效果如图3-13所示。
图3-13 使用link标记引用外部样式表文件
此外，也可以在head部分的style标记中使用import导入外部的样式表文件，例如：
源程序名称：css4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css4.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
@import url(mystyle.css);
-->
</style>
</head>
<body>
<h1>
引入CSS外部文件的方式
</h1>
<p>
除了上面提到的使用层叠样式表的方式之外，在实际的页面设计中，为了能够使多个页面共享同一个层叠样式表文件，在实际的网页设计中往往会将多个页面中都要用到的样式规则放在一个扩展名为.css的样式表文件中定义。需要用到该样式表的页面可以在本页面的head中使用link标记引用样式表文件。
</p>
</body>
</html>
该程序所实现的页面效果与图3-13所示相同。
必知必会：CSS层叠样式表的优先级问题
在掌握了使用CSS层叠样式表的基本方法之后，需要再关注一下有关优先级的问题。如果在页面中采用了多种样式表的定义方式，并且使用不同方式针对同一个HTML标记进行了重复定义，且定义的属性中有冲突，例如，在外部样式表文件中对h1标记进行了颜色的定义，而在本页面的style样式中既导入了外部的样式文件，又对该标记进行了颜色的重新定义，还有可能在页面某处的h1标记中，使用style属性进行了不同颜色的定义。那么到底谁的设置会优先生效呢？
源程序名称：css5.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css5.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="mystyle.css" type="text/css">
<style type="text/css">
h1 {color:red; font-size:30}
p {background:green;color:gold}
</style>
</head>
<body>
<h1 style="color:brown">
引入CSS外部文件的方式
</h1>
<p>
除了上面提到的使用层叠样式表的方式之外，在实际的页面设计中，为了能够使多个页面共享同一个层叠样式表文件，在实际的网页设计中往往会将多个页面中都要用到的样式规则放在一个扩展名为.css的样式表文件中定义。需要用到该样式表的页面可以在本页面的head中使用link标记引用样式表文件。
</p>
</body>
</html>
在该程序中一级标题文字的颜色分别在外部样式表文件中定义为绿色、head的style标记中定义为红色，<h1>标记中定义为棕色，最终页面呈现出来的为棕色。而段落标记<p>标记在外部样式表文件中定义背景色为黄色，head的style标记中定义为绿色，最终呈现出来的是绿色。
对应的页面效果如图3-14所示。
图3-14 样式表的优先级
由此可见，当样式表定义有冲突时，采用就近原则，即与被修饰元素最近的优先生效。如果彼此之间不冲突，将共同作用于对应元素。
在CSS层叠样式表中，除了可以将HTML现有的标记作为CSS的选择符，实现格式设置扩充之外，也可以使用类选择符或者ID选择符进行样式规则的设定。
考虑到同一个标记有可能需要在页面的不同位置呈现出不一样的效果，CSS中允许针对同一个标记设置不同的类，从而实现不一样的样式。基本语法是，在HTML标记后添加.类选择符名，例如：
p.basic { text-indent:2em; background:yellow; font-family:宋体}
p.main { text-indent:2em; background:blue; font-family:宋体; font-style:italic; color:white}
在上面的定义中，对于段落标记根据需要可以有两种不同的格式。例如，针对基本段落设置的格式是首行缩进两个字符，背景色为黄色，字体为宋体。而针对需要重点强调的主要段落，则将背景色设置为蓝色，文字颜色为白色，并且以斜体显示。需要提醒的是，在给类命名时尽量能够反映出该类的功能。
在页面中需要具体使用时，可以在对应的标记中使用class（类）属性规定采用的到底是哪一个类，示例程序如下所示：
源程序名称：css6.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css6.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
p.basic { text-indent:2em; background:yellow; font-family:宋体}
p.main { text-indent:2em; background:blue; font-family:宋体; font-style:italic; color:white}
</style>
</head>
<body>
<p class="basic">
除了上面提到的使用层叠样式表的方式之外，在实际的页面设计中，为了能够使多个页面共享同一个层叠样式表文件，在实际的网页设计中往往会将多个页面中都要用到的样式规则放在一个扩展名为.css的样式表文件中定义。 需要用到该样式表的页面可以在本页面的head中使用link标记引用样式表文件。
</p>
<p class="main">
除了上面提到的使用层叠样式表的方式之外，在实际的页面设计中，为了能够使多个页面共享同一个层叠样式表文件，在实际的网页设计中往往会将多个页面中都要用到的样式规则放在一个扩展名为.css的样式表文件中定义。需要用到该样式表的页面可以在本页面的head中使用link标记引用样式表文件。
</p>
</body>
</html>
页面的效果如图3-15所示。
图3-15 针对同一标记的类选择符
此外，也可以定义与任何HTML标记无关的独立的类选择符。这样，如果有多个标记采用同样的格式，就可以借助class属性使用同一个类选择符中定义的属性。
源程序名称：css7.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css7.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.basic { text-indent:2em; background:yellow; font-family:宋体;color:yellow}
</style>
</head>
<body>
<h1 class="basic" style="font-family:黑体">
引入CSS外部文件的方式
</h1>
<p class="basic" style="font-size:20">
除了上面提到的使用层叠样式表的方式之外，在实际的页面设计中，为了能够使多个页面共享同一个层叠样式表文件，在实际的网页设计中往往会将多个页面中都要用到的样式规则放在一个扩展名为.css的样式表文件中定义。需要用到该样式表的页面可以在本页面的head中使用link标记引用样式表文件。
</p>
</body>
</html>
在该页面中<h1>标记和<p>标记都使用了basic类选择符，并在此基础之上利用标记本身的style属性，对格式进行了补充或修改。页面效果如图3-16所示。
除了可以使用类选择符之外，也可以使用ID选择符，在页面中使用频率并不太高，其基本格式是：
<style type="text/css">
#jenny { text-indent: 2em }
</style>
如果在HTML标记中需要使用该ID选择符，可以使用id属性，例如：
图3-16 不同标记使用同一类选择符
源程序名称：css8.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css8.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#jenny { text-indent:2em; background:yellow; font-family:宋体}
</style>
</head>
<body>
<p id="jenny">
图书导读
