XML学习之做过的实验——实验四

最新推荐文章于 2020-11-15 20:25:42 发布

Hiraethlxl

最新推荐文章于 2020-11-15 20:25:42 发布

阅读量550

点赞数 1

分类专栏： XML 文章标签： xml

本文链接：https://blog.csdn.net/Hiraet_h/article/details/108141778

版权

XML 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

实验四层叠样式表CSS

一、实验目的

（1）了解并掌握CSS的基本语法及创作步骤

（2）了解并掌握XML文档中使用CSS的引入式方法

（3）了解并掌握XML文档中使用CSS的嵌入式方法

二、实验条件

包配置有windows记事本、写字板或 XMLSpy开发环境的计算机设备。

三、实验原理及相关知识

CSS的基本语法以及在XML文档中引用CSS的方法。

四、实验内容

1、对以下XML进行CSS定义：

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<?xml-stylesheet type="text/css" href="person-comm.css"?>

<street>常青花园一路</street>

</address>

<e-mail>123@sina.com</e-mail>

</person>

<street>金银湖马池路</street>

</address>

<e-mail>54310858@qq.com</e-mail>

</person>

</personslist>

利用CSS属性和相关使用规则，根据以上XML文件编写一个CSS文件，使其转换成一个HTML文件。该HTML文件通过浏览器打开的显示效果如图所示：

person-comm.css：
<html>
person
{
  display:block;
}
person
{ 
  font-size:14pt;
  display:block;
}
name
{
  display:block;
  font-weight:bold;
  color:blue;
}
age
{
  font-weight:bold;
  color:blue;
}
province,city,street
{
  color:red;
  display:list-item;
  list-style-position:inside;
  list-style-type:disc;
  text-indent:2em;
}
tele,e-mail
{ 
  display:block;
  color:white;
  background-color:black;
}
</html>

验证：

2、以下XML文档：

<?xml version="1.0" encoding="UTF-8"?>

</authors>

<press>人民邮电出版社</press>

<description>读了“数学之美”，才发现大学时学的数学知识，比如马尔科夫链、矩阵计算，甚至余弦函数原来都如此亲切，并且栩栩如生，才发现自然语言和信息处理这么有趣，才真正明白“数学是科学的皇后”这句名言。</description>

</book>

对以上XML文档编写样式文件，对其呈现样式进行控制:

（1）每个元素默认占据一行，字体缺省为微软雅黑、海军蓝色navy，下部外边距为5px，左侧内边距为5px；

(2)元素title的字体大小为24pt，下部外边距为20px，颜色为橙色orange；

(3)隐藏price、pages和cover元素；

(4)元素description的上侧内边距为5px，上边框为1个像素宽的灰色（gray）虚线。

在浏览器中的呈现效果如下：

在XML文档第二行加上<?xml-stylesheet type="text/css" href="bookcss.css"?>
bookcss.css:
book[isbn="978-7-115-28282-8"]
{
  display:block;
  font-family:"微软雅黑";
  color:navy;
  margin-bottom:5px;
  padding-left:5px;
}

title
{
  display:block;
  font-size:24pt;
  margin-bottom:20px;
  color:orange;
}

price,pages,cover
{
  display:none;
}

press
{
  display:block;
}

description
{ 
  display:block;
  padding-top:5px;
  border-top-width:1px;
  border-top-color:gray;
  border-top-style:dashed;
}

验证：