第4章 CSS修饰XML文档
层叠样式表CSS（Cascading Style Sheet，简称样式表），一般用于控制HTML和XHTML的排版格式，但也可以用于控制XML文档在浏览器上的显示效果。XML文档本身只包含数据，而不指示浏览器如何呈现文档数据。通过使用CSS来控制XML文档中各个元素的呈现方式。在本章将详细介绍CSS的基本知识以及如何在XML文档中使用CSS来控制元素在浏览器上的呈现方式。
本章知识要点：
了解CSS发展历史
掌握CSS基本语法规则
掌握CSS常用属性的作用及使用方法
掌握引用CSS文档的基本方法
4.1 CSS简介
在制作网页时采用CSS技术，可以精确地设置文字的大小、文字的间距、行距、图层重叠、绝对定位和相对定位等，但其最强大的功能还在于它的可随时插入性和易操作性。只要对CSS文档中相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同页面的外观和格式。CSS通过定义样式的方式来辅助XML，为XML文档制定显示样式效果。
4.1.1 CSS基本知识
万维网联盟（W3C），这个非营利的标准化联盟，在1996年制定并发布的一个网页排版样式标准，即层叠样式表，用来对HTML有限的表现功能进行补充。CSS并不是一种程序设计语言，而只是一种用于网页排版的标记性语言，其全部信息都是以纯文本的形式存在一个文档中，因此我们可以利用任何一个文本编辑工具去编写CSS文档。
4.1.2 CSS创建与应用
使用CSS仅能控制浏览器显示XML元素的文本内容，无法将属性、处理指令等内容指定显示样式。CSS采用元素匹配模式，将样式套用到对应的XML元素上，从而使各个元素呈现出不同的表现风格。
一个样式规则有三部分组成：选择符（selector）、属性（properties）和属性的取值（value）。
4.2 CSS基本语法
在本节将详细介绍CSS选择器的有关知识，包括CSS选择器语法结构、CSS属性与CSS属性值等内容。
4.2.1 CSS语法概述
CSS样式表是由若干条样式规则组成，这些样式规则可以应用到不同的元素或文档来定义它们显示的外观。每一条样式规则由三部分构成：选择符（selector）、属性（properties）和属性的取值（value）。
4.2.2 CSS选择器
选择器也被称为选择符。选择器不只是选择文档中的元素标记，它还可以是类（Class，这不同于Java或C＋＋中的类）、ID（给予元素特殊的名称，也便于在脚本中使用）或是元素的某种状态（如：a:link）。根据CSS选择符用途可以把选择器分为标记选择器、类选择器、层次选择器、ID选择器和伪类选择器等。
4.3 CSS属性设置
上面一节介绍了选择器的定义以及选择器的种类，在本节将按照属性的用途来分别介绍属性的作用以及使用方法。
4.3.1 设置显示属性
设置显示的属性有两个visibility属性和display属性。visibility属性用来设定定元素是显示还是隐藏。该属性取值为visible或hidden。visible表示显示，hidden表示隐藏。当visibility被设置为hidden的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
4.3.2 设置字型属性
在HTML中的字体标记<font>只能提供字体颜色color、字体大小size和字体类型face三种设置，而CSS样式表则提供了多个字体属性使设计者对字体有更详细的设置，从而能够更加丰富页面效果。
4.3.3 设置色彩属性
任何美观的网页都离不开背景的修饰，以及丰富的色彩。没有色彩的网页是没有生机的，这就意味着一个优秀的网页设计者不仅要能够合理的安排页面布局，而且还要具有一定的色彩视觉和色彩的搭配能力，这样才能够使网页更加精美也具表现力，并给浏览者以亲切感。
|
属性值
|
描述
|
|
repeat
|
背景图片水*和垂直方向都重复*铺
|
|
repeat-x
|
背景图片水*方向重复*铺
|
|
repeat-y
|
背景图片垂直方向重复*铺
|
|
no-repeat
|
背景图片不重复*铺
|
4.3.4 设置边框属性
页面元素的边框就是将元素内容及间隙包含在其中的边线，类似于表格的外边线。每一个页面元素的边框可以从三个方面来描述：宽度、样式和颜色，这三个方面决定了边框所显示出来的外观。CSS中分别使用border-style、border-width和border-color这三个属性设定边框的三个方面。
|
属性
|
描述
|
|
border-top-style
|
设定上边框的样式
|
|
border-right-style
|
设定右边框的样式
|
|
border-bottom-style
|
设定下边框的样式
|
|
border-left-style
|
设定左边框的样式
|
4.3.5 设置布局属性
在进行页面设计时，要保证页面元素出现在其适当的位置，常常需要使用div完成。然而div布局需要与CSS属性一起使用才可以完成布局设置。CSS中的边距和间隙属性就提供了这样一种功能，能够为页面元素定义边框，并修饰内容距离，从而优化文本内容的显示效果。
4.3.6 设置文本属性
文本表示的是页面所包含的内容，文本的放置与效果的显示会直接影响到页面的布局及风格。CSS样式表提供了文本属性来实现对页面中文本的控制，本节将对几种重要的文本属性进行介绍。
|
属性值
|
描述
|
|
baseline
|
默认值，与上级标记基线对齐。
|
|
sub
|
垂直对齐文本的下标
|
|
super
|
垂直对齐文本的上标
|
|
top
|
将标记内容顶端对齐
|
|
text-top
|
将标记文本顶端对齐
|
|
middle
|
将标记内容中部对齐
|
|
bottom
|
将标记内容底部对齐
|
|
text-bottom
|
将标记文本底端对齐
|
4.4 CSS链接
在前面主要介绍了如何定义CSS选择器和设置CSS属性，以及适合于XML文档的CSS属性。在本节中将介绍如何在XML引用CSS。
4.4.1 使用一般链接指令
在XML中使用CSS样式有两种方式，一种是嵌入式，就是把CSS代码直接放到XML中；一种引入式，就是把CSS代码做成独立的文件，引入到XML中。
<?xml version="1.0" encoding="GB2312" ?>
<?xml-stylesheet type="text/css"?>
<student xmlns:HTML="http://www.org.com">
<HTML:STYLE>
<!-- -->
student{
display:block;
background-color:#A9A9A9;
}
name{
display:line;
font-size:20pt;
color:red;
}
sex{
display:block;
text-indent:50px;
font-size:12pt;
font-style:italic;
}
<!-- -->
</HTML:STYLE>
<name>许世宽</name>
<sex>男</sex>
<name>王娟</name>
<sex>女</sex>
</student>
4.4.2 使用@import指令
通过@import指令可以把具有逻辑层次关系的一组样式表组合成一个较高层次的CSS文件，从而达到CSS样式表的模块化，提高CSS样式表的复用程度，而且方便对CSS进行管理和维护。
|
设备类型
|
版本
|
兼容性
|
概述
|
|
all
|
CSS2
|
IE4+
|
用于所有设备类型
|
|
aural
|
CSS2
|
NONE
|
用于语音和音乐合成器
|
|
braille
|
CSS2
|
NONE
|
用于触觉反馈设备
|
|
embossed
|
CSS2
|
NONE
|
用于凸点字符（盲文）印刷设备
|
|
handheld
|
CSS2
|
NONE
|
用于小型或手提设备
|
|
print
|
CSS2
|
IE4+
|
用于打印机
|
|
projection
|
CSS2
|
NONE
|
用于投影图像，如幻灯片
|
|
screen
|
CSS2
|
IE4+
|
用于计算机显示器
|
|
tty
|
CSS2
|
NONE
|
用于使用固定间距字符格的设备。如电传打字机和终端
|
|
tv
|
CSS2
|
NONE
|
用于电视类设备
|
4.4.3 样式应用说明
在本章前面内容中详细介绍有关CSS的基本语法和使用方法，在本节将通过一个具体实例来演示如何综合使用这些知识来设置XML元素的呈现样式。
border
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css"?>
<body xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
<HTML:STYLE>
div
{
width:150px;
}
p
{
border:red solid thin;
margin-right:-10px;
}
</HTML:STYLE>
<div>
<p>Some text1</p><p>Some text2</p>
</div>
</body>hidden
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"?>
<div class='root' xmlns:HTML="http://www.itzcn.com">
<HTML:STYLE>
div
{
text-align:center;
}
.root
{
width:200px;
height:200px;
background: #D1D1C0;
}
.hidden
{
width:33%;
height:30%;
background:red;
visibility:hidden;
}
</HTML:STYLE>
<div class="left">眼睛</div>
<div class="hidden">空白区域</div>
<div class="right">眼睛</div>
<div class="hidden">空白区域</div>
<div >嘴巴</div>
<div class="hidden">空白区域</div>
</div>
border
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/css" ?>
<root xmlns:HTML="URL">
<HTML:STYLE>
span
{
width:200px;
}
.dotted
{
border-style:dotted;
}
.mix
{
border-style:dotted solid dashed groove;
}
</HTML:STYLE>
<span style="border-style:none;">无边框样式</span>
<span class="dotted">dotted 点线式边框</span>
<span style="border-style:dashed;">dashed 破折线式边框</span>
<span style="border-style:solid;">solid 直线式边框</span>
<span style="border-style:double;">double 双线式边框</span>
<span style="border-style:groove;">groove 槽线式边框</span>
<span style="border-style:ridge;">ridge 脊线式边框</span>
<span style="border-style:inset;">inset 内嵌效果的边框</span>
<span style="border-style:outset;">outset 突起效果的边框</span>
<span class="mix">border-style:dotted solid dashed groove 多样式边框效果</span>
</root>
cursor.css
h2
{
font-size:20pt;
color:red;
height:50px;
}
div
{
font-size:15pt;
color:DarkBlue;
height:130px;
}
p
{
text-indent:15pt;
height:30%;
display:block;
}
.hand
{
cursor:hand;
background-color: #E3E4FF;
}
.help
{
cursor:help;
background: #FFD0D0;
}
.n_resize
{
cursor:n-resize;
background: #E3E3E3;
}
cursor
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet href="cursor.css" type="text/css"?>
<body>
<h2>鼠标效果</h2>
<div >
<p class="hand">手形</p>
<p class="help">帮助</p>
<p class="n_resize">箭头朝上双向</p>
</div>
</body>
example.css
.top{
background-image: url(04.gif);
background-repeat: no-repeat;
background-position: center;
width: 150px;
height: 100px;
display:block;
}
.bottom{
width: 150px;
height:86px;
text-align: center;
}
title
{
color: #A2A2FF;
font-size: 25px;
display:block;
}
content{
text-align: left;
text-indent: 20pt;
font-size:10pt;
color: Red;
display:block;
}
example
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet href="example.css" type="text/css"?>
<body>
<div >
<div class="top"></div>
<div class="bottom">
<title>Java基础教程</title>
<content >本书通俗易懂，知识覆盖面广，是Java开发入门学习的好帮手</content>
</div>
</div>
</body>
table.css
student
{
display:block;
background-color: #F2F2FF;
text-align:center;
}
div
{
margin:1px;
width:25%;
display:inline;
}
div.title
{
font-weight:bolder;
color:red;
text-align: center;
width: 62%;
display:block;
}
head line div
{
background-color: #D3D3D3;
}
line
{
border-left-style:inset;
border-right-style:inset;
line-height:25px;
display:block;
}
.single div
{
background-color: #CCCCFF;
}
div.addr
{
text-align: left;
width:49%;
}
bottom div
{
background-color: #D3D3D3;
text-align: center;
width: 100%;
}
table
<?xml version="1.0" encoding="GB2312" ?>
<?xml-stylesheet href="table.css" type="text/css" ?>
<student>
<head>
<div class="title">长春煤矿学院05级部分学生通讯地址</div>
<line>
<div>学号</div><div>姓名</div><div class="addr">家庭住址</div>
</line>
</head>
<body>
<line class="single">
<div>2051501</div><div>吴海阳</div><div class="addr">辽宁省沈阳市幸福路35号</div>
</line>
<line>
<div >2051502</div><div>牛海力</div><div class="addr">吉林省长春市前进大街106号</div>
</line>
<line class="single">
<div>2051503</div><div>郑国华</div><div class="addr">河南省郑州市桃源路68号</div>
</line>
<line >
<div>2051504</div><div>王昆</div><div class="addr">湖北省武汉市滨河大道362号</div>
</line>
<line class="single">
<div>2051505</div><div>赵紫燕</div><div class="addr">河南省登封市建设路35号</div>
</line>
<line >
<div>2051506</div><div>王上任</div><div class="addr">河南省*顶山市五矿街362号</div>
</line>
</body>
<bottom>
<line>
<div >数据查询日期：2008-03-26</div>
</line>
</bottom>
</student>
work.css
work{
border: solid;
border-color: Silver;
border-width: 1px;
width:230px;
height: 260px;
}
title{
background-color: #DBDBFF;
color: Red;
font-size: 28pt;
text-align: center;
width:100%;
height: 15%;
}
content{
background-color: white;
text-indent:25pt;
width:100%;
height: 69%;
}
item{
margin-top: 5px;
display: list-item;
list-style: decimal;
font-size: 11pt;
}
head{
font-family: @隶书;
color: Red;
}
connection
{
background-color: #8283FF;
color: White;
width:100%;
height: 20%;
font-size: 11pt;
}
work
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet href="work.css" type="text/css"?>
<work>
<title>惠通招贤榜</title>
<content>
<item>
<head>市场主管10名:</head>
能适应国内出差，一年以上工作经验，沟通能力强。底薪3000-5000元/月。
</item>
<item>
<head>项目经理5名:</head>
具有一年以上项目开发经验，沟通能力强，精通TCP和UDP开发。底薪4000-5000元/月。
</item>
<item>
<head>*面设计师2名:</head>
艺术院校毕业，具有一年以上GUI设计经验，创意独特。底薪2000-4000元/月。
</item>
</content>
<connection>北京*郊昌*区昌*商业街33号。
电子邮件：bghtccut@huitong.com
联系电话：010-69742898
</connection>
</work>
4-1.css
speak{
background: #EEEEFF;
width: 50%;
}
speaker{
background: #E3E4FF;
}
name{
color: #708090;
display: block;
}
content{
text-indent:9mm;
color: Fuchsia;
display: block;
margin-left: 10px;
}
4-1
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet href="4-1.css" type="text/css"?>
<!DOCTYPE speak [
<!ELEMENT speak (speaker*)>
<!ELEMENT speaker (name,content)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT content (#PCDATA)>
]>
<speak>
<speaker>
<name>明月鑫：</name>
<content>师范类化学系，大三学生</content>
</speaker>
<speaker>
<name>Evan：</name>
<content>计算机系大三学生</content>
</speaker>
<speaker>
<name>峰：</name>
<content>给水排水，大三学生。我们是好朋友</content>
</speaker>
</speak>
book.css
book{
background: #F0F2FF;
color: Black;
font:normal small-caps bolder 15pt "Cambria","Times New Roman",宋体,@宋体, @楷体_GB2312, @新宋体, @幼圆;
}
name{
font-family: 楷体_GB2312;
font-size:30pt;
display:block;
}
author{
font-family:@新宋体;
color: #7B7CFF;
display:block;
}
publisher{
color: #7B7B7B;
display:block;
}
price{
font-size: 13pt;
display:block;
}
book
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet href="book.css" type="text/css"?>
<!DOCTYPE book[
<!ELEMENT book (name,author,publisher,price)>
<!ELEMENT name (#PCDATA) >
<!ELEMENT author (#PCDATA) >
<!ELEMENT publisher (#PCDATA) >
<!ELEMENT price (#PCDATA) >
]>
<book>
<name>XML实践教程</name>
<author>张银鹤 张秋香 孙膺等编著</author>
<publisher>清华大学出版社</publisher>
<price>单价：39.00RMB</price>
</book>
caps.html
<html>
<head>
<title>字体变形</title>
<style type="text/css">
<!--
p{
font-size:20pt
}
.caps{
font-variant:small-caps;
}
-->
</style>
</head>
<body>
<p>This is a Attribute of CSS</p>
<p class="caps">This is a Attribute of CSS</p>
</body>
</html>
display.css
.span1
{
display:none;
}
.span2
{
dispaly:block;
visibility:hidden;
}
display
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet href="display.css" type="text/css" ?>
<div>
<div class="span1">不会显示出来</div>**********
<div class="span2">本元素的起始部分和技术部分会被自动添加回车换行符合</div>
<div >一个元素</div>
</div>
div.css
div{
width:60%;
height:60px;
background: #7B68EE;
display: block;
}
@import url(div_text.css);
div_text.css
div.text{
background: #A9A9A9;
width:70%;
height:50%;
text-indent:8mm;
}
html
<?xml version="1.0" encoding="gb2312"?>
<head>
<div class="title"></div>
<div class="content"></div>
<div class="bottom"></div>
</head>
import
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet href="div.css" type="text/css"?>
<div>
我的呈现样式是通过xml-stylesheet指令来实现的
<div class="text" >
我的呈现样式是通过在CSS中使用@import指令实现的
</div>
</div>
margin
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"?>
<root xmlns:HTML="http://www.itzcn.com/css">
<HTML:STYLE>
p
{
display:block;
}
.txt
{
margin-top:15mm;
margin-bottom:15mm;
margin-left:25mm;
margin-right:25mm
}
</HTML:STYLE>
<p class="txt">
百年奥运，风云变化，不变的是始终如一的人文精神。在奥林匹克精神中，
人文内涵是不朽的底蕴。它作为一种特殊的精神动力凝聚着全人类向往前进的心声。
</p>
<p>
在“Higher，Faster，Stronger”的口号下，奥林匹克运动所真正倡导的是“团结，友谊，进步”。
</p>
</root>
padding
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"?>
<body xmlns:HTML="http://www.itzcn.com/css">
<HTML:STYLE>
body
{
padding:10px
}
p
{
display:block;
}
.txt1
{
padding-top:10mm; padding-bottom:5mm; padding-left:15mm; padding-right:20mm;
background-color:Yellow
}
.txt2
{
padding:1mm; background-color:AliceBlue
}
.txt3
{
padding:10%; background-color:Yellow
}
</HTML:STYLE>
<p class="txt1">
百年奥运，风云变化，不变的是始终如一的人文精神。在奥林匹克精神中，人文内涵是不朽的底
蕴。它作为一种特殊的精神动力凝聚着全人类向往前进的心声。
</p>
<p class="txt2">
***************************************************
</p>
<p class="txt4">
在“Higher，Faster,Stronger”的口号下，奥林匹克运动所真正倡导的是“团结，友谊，进步”。
</p>
</body>
repeat.css
.repeat
{
width:300px
height:300px;
background-image:url(06.jpg);
/* background-repeat:repeat-x;*/
background-position:center left;
}
tab.css
.tag_box {
width:400px; height:126px; border:1px solid #B0BEC7;
font:12px Arial, Helvetica, sans-serif;
margin:5px; overflow:hidden
}
.tag_box ul.menulist {
width:402px; height:20px;
overflow:hidden; margin:0
}
.tag_box ul.menulist li {
float:left; width:80px; text-align:center; height:19px;
line-height:19px; background:url('default.gif') repeat-x;
position:relative; list-style-type:none}
.tag_box ul.menulist li a { color:#18397C; text-decoration:none;
display:block; width:80px; background:url('default.gif') no-repeat right 1px;
border-bottom:1px solid #93A6B4;
}
.tag_box ul.menulist li a:hover {
text-decoration:underline;
}
.tag_box ul.menulist li a.curMenu {
background:url(current.gif) repeat-x;
border:1px solid #91A7B4; border-bottom:none; width:81px;
position:absolute; color:#c63; font-weight:bold;
left:-1px;top:-1px; height:21px; z-index:100
}
.tag_box a.nonebg{
background: none;
}
.tag_content {
padding:6px; clear:both
}
.tag_content img.bigConImg {
background-image:url(images/tag_1_img.jpg);
width: 120px; height:90px;
margin-top:1px;
border:1px solid #788a98;
display:block; float:left
}
.tag_content .content_right{
margin-left:120px;
display:block;
}
.content_right h5 {
padding:2px 0px; margin:3px 6px;
font-size:12pt;background-color:#f7f7f7
}
.content_right a {
text-decoration:none;
color:#16387c
}
.content_right a:hover {
text-decoration:underline;
}
.content_right p {
margin-top:1px; padding:2px 6px;
float:left; line-height:18px
}
tab
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet href="tab.css" type="text/css"?>
<div class="tag_box" id="tag_menu">
<ul class="menulist" id="menulist">
<li><a class="curMenu" >主页</a></li>
<li><a class="" >软件下载</a></li>
<li><a class="" >网络学院</a></li>
<li><a class="" >关于我们</a></li>
<li><a class="" >联系我们</a></li>
</ul>
<div id="tag_content" class="tag_content">
<img class="bigConImg" />
<div class="content_right">
<h5><a >Supercars for the super-richHome</a></h5>
<p>For those who can drop six figures on a car, there's a fresh crop of shiny new 2007 models. <a >More</a></p>
</div>
</div>
</div>
浙公网安备 33010602011771号