实验 CSS样式表的应用

时间：2024.5.15

实验三 CSS样式表的应用---CSS的引用

一、实验目的

1、掌握CSS样式表的引用的几种方式

2、学习如何控制字号，字模及加入特殊效果

3、了解要素和图象方面的样式设置

二、实验内容

1、整页套用样式：

不执行这个网页程序，回答程序中的问题，为什么？

<html>

<head>

<!—

h2{color:blue;text-align:center}

h1{color:red;text-align:right}

-->

</style>

</head>

<body>

<h1>请指出这个几字的颜色及对齐方式</h1>

<h2>请指出这个几字的颜色及对齐方式</h2>

<h3>请指出这个几字的颜色</h3>

</body>

</html>

2、样式文件引入

不改变以下程序，分别使“网站实验”几个字变红色，“css页实验”几个字变成绿色（分别使用外联和导入方式）<html>

网

<head>

<body>

<h2>css网页实验</h2>

</body>

</html>

3、如何使有超级链接的文字不出现下划线，如何使鼠标移动到超链上产生变色的效果

写出以下语句，并改变参数，使超链上产生变色，并改变有超级链接文字的下划线的类型

<html>

<head>

<style>

<!--

a:link{color:green;text-decoration:none}

a:visited{color:red;text-decoration:none}

a:hover{color:black;text-decoration:underline;font-size:25pt} -->

</style>

</head>

<body>

<p style="font-family:行书体;font-size:28pt"> <a

href="http://www.">未访问的链接</a></p>

<p style="font-family:宋体;font-size:18pt"> <a

href="http://www.">访问过的链接</a><p>

<p style="font-family:行书体;font-size:18pt"> <a

href="http://www."> 鼠标激活的链接</a><p>

</body>

</html>

4、用 css 控制的网页

1)用以下语句建立一个6.htm文件

<html>

<head>

</head>

<body>

<h1 align="center">用 css 控制的网页</h1>

</td></tr>

<tr>

<td width="100" align="right" height="30"><b>文章标题：</b></td> <td width="544" height="30"><input type="text" name="txttitle" size="70"

class="smallinput" maxlength="100"></td></tr>

<td width="544" height="93" class="b2"><b2>CSS就是一种叫做样式表（stylesheet）的技术。<br>

也有的人称之为层叠样式表（Cascading

Stylesheet）。<br>

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。<br>

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。</b2></td>

<tr>

<td width="100" align="right" height="30"><b>相关文章</b></td> <td width="544" height="30"><input type="text" name="txttitle" size="70"

class="smallinput" maxlength="100"></td>

</tr><tr>

<td width="544" height="80"><h1>它的作用可以达到：<br>

（1）在几乎所有的浏览器上都可以使用。<br>

（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。<br>

（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。<br>

（4）你可以轻松地控制页面的布局。</h1>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td width="544" height="30"><input type="text" name="writefrom" size="70"

class="smallinput" maxlength="100"></td>

<tr>

</table>

</body>

</html>

2）用记事本程序建立一个css文件：style.css,改变文件中

b,input.smallInput,h1,.b2，img的属性，使页面的字体变得更漂亮，使页面及图片更赏心悦目

b{font-size: 10pt; font-family:"Verdana", "Arial", "宋体";color: #5F9EA0;}

input.smallInput{border:1 solid;FONT-SIZE: 13pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 28px; LINE-HEIGHT: normal; color: #000000; background-color: #F5F5DC}

h1{font-size: 12pt; font-family:"Verdana", "Arial", "宋体";color: #CC9966;}

.b2{font-size: 10pt; font-family:"Verdana", "Arial", "宋体";color: #006400;}

img{filter:Alpha(opacity=100,style=3)}

3）将下列照片和以上两个文件放在同一文件夹下,重新运行6.htm文件。 x.jpg

三、思考题：

CSS与HTML的区别

第二篇：实验三 XML样式表技术(CSS与XSL)

实验三： XML样式表技术

一、实验类型

验证性实验

二、实验目的

1．了解XML内容与显示分离的特点；

2．掌握XML样式的两种技术CSS和XSL，并理解两者的区别；

2．掌握CSS的基本语法和两种引用方式；

3．理解基于XSL处理XML显示的基本原理；

4．掌握XSL的语法结构和元素声明。

5．掌握XSL中XPath的概念和基本使用方式；

6．掌握基于XML SPY提供的XSLT的转换；

三、实验要求

1．按要求对XML文档进行CSS定义；

2．使用CSS文件对XML进行显示；

3．按要求为XML文档编写XSL样式文件；

4．使用XSL对XML进行显示；

5．能利用XML SPY的XSL转换功能将XML转换为HTML文件。

三、实验环境

配置有XML Spy 2006或XML Spy 2009开发环境的计算机设备

四、实验原理

1．XML的样式表技术

XML本身不提供任何相关显示的方法，也不像HTML带有预定义的可提供显示功能的标

签，在XML中可以使用CSS和XSL两种样式表技术来提供XML数据的格式化显示。

XML将文档内容和外观相分离。当需要显示时，再附加包含样式的样式文件。内容与显示分离带来了诸多的优点，使得开发的关注点被分离，要么在数据内容上，要么在显示方式上。同样的数据内容可以有不同的显示样式，只需要更改使用的样式文件。分离也使得开发人员和设计人员能相互独立无干扰地工作。

2． CSS——并非为XML专门设计的样式表技术

CSS(Cascading Style Sheets)，级联样式表，提供了简单的语法和强大的格式化显示能力。在CSS文件中对XML元素设定不同的样式规则，当使用浏览器显示XML文件，浏览器会根据所引用的CSS文件，对XML每个元素进行格式化。

CSS最初是为HTML进行的设计，不具备XML的语法。

根据书本内容，掌握CSS的语法结构、常用属性和两种引用方式

3． XSL——基于XML的样式表技术

XSL(eXtensible Stylesheet Language)，可扩展的样式表语言，提供了基于XML的样式显示方式，它本身就是结构完整的XML文档。

? XSL包含三个部分的内容：XSLT、XPath和XSL-FO。

? XSL的功能主要由XSLT来完成。

在XSL中定义了用于XML显示的模版和模式，当XML处理程序读取XML文件时，会将读入的内容与模式比较，当识别出与XSL样式文件中模式匹配内容的时，将按照对应的模版组合这些内容，生成带有显示能力的其他文档。

? 使用XPath来查找、定位XML文档片段。

? XSL-FO对象可以对XSL转换结果进行显示。FO目前较少使用，一般来说，会将XML转换为(x)Html文件，利用CSS和HTML来提供显示。

4．CSS与XSL比较

CSS只能改变特定元素的格式，也只能以元素为基础。但XSL样式单可以重新排列元素并对元素进行重排序。这种样式单可以隐藏一些元素而显示另外一些元素。更进一步说，还可以选择应用样式的标记，而不仅是基于标记的，而且还基于标记的内容和特性，还基于标记在文档中相对于其他元素的位置，以及基于各种其他的准则。

CSS的优越性在于具有广泛的浏览器支持。但是XSL更为灵活和强大，可更好地适用于XML文档。而且带XSL样式单的XML文档可以很容易地转换为带CSS样式单的HTML文档。

四、实验内容

（一）使用CSS处理XMl显示

（1）对以下“联系人.xml”进行CSS定义（设CSS文件名为“联系人.css”）

实验三XML样式表技术CSS与XSL

（2）书写css定义头部

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

（3）定义“联系人列表”元素的显示（由“联系人”组成）

联系人列表{display:block;}

（4）定义“联系人”元素的显示

联系人{

display:block;

position:center;

}

（5）定义“姓名”及“电话”元素的显示

姓名{

display:block;

color:blue;

font-family:Times,Arial,serif; font-style:normal; font-size:16pt; font-weight:bold;

}

电话{

display:block;

color:red;

font-family:Times,Arial,serif;

font-style:italic;

font-size:16pt;

font-weight:bold;

}

（6）在XML文件中指定对应CSS样式表

<?xml version="1.0" encoding="gb2312" standalone="no"?>

<?xml-stylesheet type="text/css" href="联系人.css"?>

<联系人列表>

<联系人>

<姓名>李明</姓名>

<电话>134xxxxxxxx</电话>

</联系人>

<联系人>

<姓名>陈俪</姓名>

<电话>159xxxxxxxx</电话>

</联系人>

</联系人列表>

（8）在IE中打开带有CSS定义的“联系人信息.xml”，观察显示结果。如显示没有效果，请修改XML中的元素中文名称替换为字母，并修改对应的css文件。

（10）修改CSS的引用方式为内部CSS。

? 问题与思考：

（1）CSS选择器是否支持中文？（2）CSS的选择器定义的样式规则是否会被继承？

（二）使用XSL处理XML显示

（1）对以下“图书信息.xml”进行XSL定义（设XSL文件名为“图书信息.xsl”）

实验三XML样式表技术CSS与XSL

（2）书写XSL定义头部

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

（3）编写根节点匹配模板（注意xsl:stylesheet元素是必须要的）

<xsl:stylesheet version="1.0" xmlns:xsl="/1999/XSL/Transform>

<xsl:template match="/">

<html>

<body>

<tr>

<td style="text-align:center">BookID</td>

<td style="text-align:center">BookType</td>

<td style="text-align:center">BookName</td>

<td style="text-align:center">Publisher</td>

<td style="text-align:center">Price</td>

<td style="text-align:center">PubDate</td>

<td style="text-align:center">Quantity</td>

</tr>

[……]

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

（4）编写XPath节点booklist/book的匹配模板（添加在[……]处）

<xsl:for-each select="Booklist/Book">

</tr>

</xsl:for-each>

（5）在IE中打开带有XSL定义的图书信息.xml，观察文件显示结果（带XSL定义的XML文件头部如下所示）。

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

<xsl:stylesheet version="1.0" xmlns:xsl="/1999/XSL/Transform">

（6）使用<xsl:sort/>元素对数据进行排序。（按照价格或出版时间倒排）（7）利用<xsl:if/>元素筛选满足如下条件的书籍。 a.清华大学出版社出版的计算机类书籍 b.价格不大于20或评分不低于15的书籍

（8）针对（7）问题，要求满足条件a的书籍高亮显示，其它数据以默认方式显示。

（三）使用XML SPY转换XML

（1）使用XML SPY编辑器提供的转换功能，转换上述”图书信息.xml”文件。

（2）观察生成的html文件，并与图书信息.xsl文件进行比对。

（3）分析在使用浏览器进行xsl文件样式显示时，是否生成对应的html文件，如果有存在哪里？

五、思考与扩展

（1）使用CSS和XSL处理转换有哪些不同？

（2）为什么XSL处理显示将XML文件转换为HTML文件?

（3）XSL转换的功能还可以应用在哪些地方？将XML转换为XML有意义？

更多相关推荐：

万用表实验报告: 物理实验报告姓名杜伟胜班级桌号日期成绩一实验项目万用表的使用二实验目的掌握万用表的使用方法三实验仪器MF5004型万用表直流稳压电源滑线变阻器标准电阻箱电阻板暗盒子伏特表毫安表单刀开关双刀开关导线7条故障线2条...
万用表实验报告.doc: 信息科学与工程学院班级：自动化1006学号：**姓名：**教师：**二○xx年六月1实习目的和要求电气电子工艺实习是自动化专业学生重要的实践教学环节，其目的是巩固和加深所学电子技术的知识，了解并初步掌握一般电子…
万用表的使用练习实验报告----中国石油大学华东: 中国石油大学现代远程教育课程实验报告所属教学站姓名年级专业层次实验时间小组合作是否1实验目的学号学期实验名称万用表的使用练习小组成员2实验设备及材料3实验原理4实验内容及数据5实验数据处理过程6实验结果的评定及...
万用表实验报告: 电气电子工艺实习电气电子工艺实习MF47万用表制作学院专业学号姓名日期信息科学与工程学院自动化20xx04134116陶永杰20xx619电气电子工艺实习万用表的制作摘要机械万用表用于基本故障诊断的编写装置被用...
万用表使用实验报告: 实验四实验报告万用表的使用一实验目的1了解万用表的工作原理和基本结构掌握万用表的正确使用方法2掌握色环电阻的读法3加深对全电路欧姆定律的理解掌握测量干电池的电动势和内电阻的方法二实验器材1数字万用表一只UT39...
万用表的使用实验报告: 万用表的使用实验题目万用表的构造及应用实验器材万用表实验过程一万用表的认识1内部构成表头测微小电流电压转换开关电阻2外部表面认识1表盘及刻度线2测量项目及量程开关3机械调零器不用调用螺丝刀4欧姆调零旋钮常调用手...
万用表实验报告: 青海师范大学课程设计报告课程设计名称MF47型万用表专业班级电子信息工程学生姓名李玉斌学号20xx1711306同组人员郭延森安福成涂秋雨指导教师易晓斌课程设计时间20xx年11月目录1设计任务要求以及文献综述...

DT9205A万用表实验报告: 青岛理工大学琴岛学院实习报告实习名称万用表实习性质系部机电系专业班级学号20xx020xx18学生李传武指导教师郑丽丹青岛理工大学琴岛学院教务处20xx年6月13日
北京交通大学万用表组装实验报告: 万用表组装实验报告授课教师学院电气工程学院专业电气信息类班级姓名学号11实验任务分析研究万用表电路设计并组装一个简单的万用表2实验要求1分析常用万用表电路说明各挡的功能和设计原理2设计组装并校验具有下列四挡功能...
实验一万用表、毫伏表的使用: 实验一数字万用表交流毫伏表及其使用一实验目的1掌握万用表测量电阻测量交直流电压的过程及测量数据的处理方法2掌握毫伏表的使用方法3了解毫伏表的工作频率极限4学会毫伏表使用前的调零和校正二实验仪器及材料1数字万用表...
万用表的工作原理-实验报告: 万用表的工作原理一实验目的一1理解万用表的工作原理2熟悉并掌握万用表的主要功能和使用操作方法二实验内容1用万用表检测元器件电阻测量电容测量二极管检测三极管检测2用万用表测量电压和电流直流电压及电流的测量交流电压...
DT-830B数字万用表实验报告: DT830B数字万用表实验报告一实验目的通过数字万用表的安装与调试实训了解数字万用表的特点熟悉装配数字万用表的基本工艺过程掌握基本的装配技艺学习整机的装配工艺培养动手能力及严谨的工作作风二项目要求学习了解DT8...

热门关注