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

1 学时

2学时

实验目的与要求

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

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

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

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

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

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

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

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

实验环境

XML SPY

准备工作

教师准备实验内容。

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

实验内容

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

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

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

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

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

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

<phone-list>

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

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

</phone-list>

</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>

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

<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>

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

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

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

</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文档；

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

实验一结果：

实验二结果：

五、结果分析与实验