实验七：层叠样式表(二)

1 学时 

2学时

1. 实验目的与要求

（１）熟悉掌握CSS文件编写的语法规则；

（２）熟练使用编辑工具编写CSS文件；

（３）熟练掌握使用CSS格式化XML文档的过程。

（4）认真在编辑环境中编写CSS文件内容；

（5）熟练掌握在CSS文件中对元素、属性、实体和标记进行格式化的语法规则；

（6）熟练掌握CSS文件的编辑与调试；

（7）掌握浏览和显示操作的过程；

（8）认真总结实验过程中的操作内容。

1. 实验环境

XML SPY

1. 准备工作

教师准备实验内容。

学生掌握CSS的基本概念、文字大小、颜色、分行、分块、分列、边框、添加图片的显示规则。

1. 实验内容

（１）编写关于个人履历的XML文档；

<?xml version="1.0" encoding="GB2312"?>

<?xml:stylesheet type="text/css" href="shiyan44.css"?>

<resume>

         <personinfo>

                  <name>曹树阳</name>

                  <sex>男</sex>

                  <birth>1986-09-11</birth>

                  <nation>汉</nation>

                  <native>江苏句容开发区XX号</native>

                  <status>团员</status>

                  <guraduated>2009</guraduated>

                  <education>本科</education>

                  <university>淮海工学院</university>

                  <address>江苏句容开发区XX号</address>

                  <phone-list>

                           <home-phone>0518568888888</home-phone>

                           <company-phone>051859622222</company-phone>

                           <telephone>1395268552222</telephone>

                  </phone-list>

                  <instruction>

                           <health>健康</health>

                           <information>宽容，善良</information>

                  </instruction>

         </personinfo>

         <education-history>

                  <primary-school>1993-1999，三台阁小学</primary-school>

                  <junior-middle-school>1999-2001，第二中学</junior-middle-school>

                  <senior-middle-school>2001-2005，第三中学</senior-middle-school>

                  <college>2005-2009，淮海工学院</college>

         </education-history>

         <Experience>

                  <company-name>酒店</company-name>

                  <job>服务员</job>

                  <month-pay>￥1000</month-pay>

         </Experience>

</resume>

 

（２）编辑关于个人履历XML文档的CSS文件内容

resume
{
	display:block;
	background-color: #ff2222;
}
personinfo
{
	display:block;
	border-left:5px solid white;
	border-top:5px solid white;
	border-right:5px solid black;
	border-bottom:5px solid black;
}
education-history
{
	display:block;
	border-left:5px solid white;
	border-top:5px solid white;
	border-right:5px solid black;
	border-bottom:5px solid black;
}
Experience
{
	display:block;
	border-left:5px solid white;
	border-top:5px solid white;
	border-right:5px solid black;
	border-bottom:5px solid black;
}
name
{
	display:block;
}
sex{
	display:block;
}
birth{
	display:block;
}
nation{
	display:block;
}
native{
	display:block;
}
status{
	display:block;
}
guraduated{
	display:block;
}
education{
	display:block;
}
university{
	display:block;
}
address{
	display:block;
}
home-phone{
	display:block;
}
company-phone{
	display:block;
}
telephone>{
	display:block;
}
health{
	display:block;
}
information{
	display:block;
}
junior-middle-school{
	display:block;
}
senior-middle-school{
	display:block;
}
college{
	display:block;
}
company-name{
	display:block;
}
job{
	display:block;
}
month-pay{
	display:block;
}

personinfo{background-color: #f08080; width :100%;height:100%;}

name,sex,birth,nation,native,status,guraduated,education,university,address,home-phone,company-phone,telephone,instruction,health,information{color:#00AA00;display:block;font-weight: bold;letter-spacing: 5px;text-indent:1cm}

education-history{background-color: #f08080; width :100%; color:#00AA00;display:block;font-weight: bold;letter-spacing: 5px;text-indent:1cm}

primary-school,junior-middle-school,college{color:#00AA00;display:block;font-weight: bold;letter-spacing: 5px;text-indent:1cm}

Experience{background-color: #f08080; width :100%; color:#00AA00;display:block;font-weight: bold;letter-spacing: 5px;text-indent:1cm}

company-name,job,month-pay{color:#00AA00;display:block;font-weight: bold;letter-spacing: 5px;text-indent:1cm}

（１）编写关于图书目录的XML文档；

内容包括：图书名、（作者、作者EMAIL）、（图书出版社名称、出版地址、邮编）、价格，要求至少两本书。

 

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

<?xml:stylesheet type="text/css" href="shiyan55.css"?>

<book>

<name>XML实用培训教程</name>

<writer>张剑飞</writer>

<e-mail>zjf@163.com</e-mail>

<publisher>科学出版社</publisher>

<address>北京东皇城根北街16号</address>

<postcode>100717</postcode>

<price>￥27</price>

</book>

（２）编辑关于图书目录XML文档的CSS文件内容

name{display:block;font-weight: bold;letter-spacing: 10px;font-size: x-large;border-top : 1px solid #000000;margin-top:30px;}

writer{display:block;text-align:center;margin-top:20px;}

e-mail{display:block;letter-spacing: 8px;text-align:center;}

publisher{display:block;letter-spacing: 8px;margin-top:20px;ridge;}

address{display:block;letter-spacing: 8px;}

postcode{display:block;letter-spacing: 8px;border-bottom : 1px solid #000000;}

price{display:block;text-align:right;}

（３）调试CSS文件；

（4）浏览（显示）个人履历的XML文档；

四、测试数据与实验结果：

 

 实验一结果：

 

实验二结果：

 

五、结果分析与实验