CSS显示XML文档
CSS不仅可以设置HTML文档的呈现方式，也可以定义XML文档的呈现方式。通过CSS样式表，可以很容易为XML定义呈现方式，从而为XML提供丰富的表现力。本练习将使用CSS来定义XML文档的呈现样式，具体步骤如下所示：
（1）呈现方式依附数据而存在。创建XML文档，文档用来介绍一本图书，文档内容如下所示：
<?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>
该文本内容保存为l文件。其中class属性值为top的div元素用来显示图书图片；class属性值为bottom的div元素用来显示图书相关文字信息。
（2）根据文档内容创建CSS文件。首先需要对显示图片的div进行CSS定义，如下所示：
.top{
    background-image: url(04.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 150px;
    height: 100px;
    display:block;
}
css文件怎么写
该选择器定义图书图片作为该元素的背景，并设置元素的width属性、height属性和display属性。如果没有设置width和height属性值，那么图片将不会呈现出来。下面的CSS内容对文本信息进行样式设置：
.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.css文件。在浏览器中打开l文件，如图4-1所示。
图4-1  图书信息