如何使用CSS格式XML文档

民营科技２０１２年第３期　科技论坛　

如何使用ＣＳＳ格式ＸＭＬ文档　

刘蕴楚书来　

（周口职业技术学院，河南周口４６６０００）　

摘要：阅读ＸＭＬ文档对于人类来说并不容易。ＸＭＬ文档全是文本，并且在ＸＭＬ文档中并不包含数据的显示格式信息。为了使　

ＸＭＬ文档所包含的数据能够更好地显示，便于人们阅读，就需要使用特定的样式表语言来对这些数据加以描述。现主要讲述了如何使　

用ＣＳＳ格式ＸＭＬ文档。　

关键词：ＣＳＳ样式表；格式；ＸＭＬ文档　

引言　

阅读ＸＭＬ文档对于人类来说并不容易。ＸＭＬ文档全是文本，但　

是各部分的可视安排未必很好地对应于各部分之间概念上的连接。而　

且，在标记当中查找内容使得阅读也很困难。当然，ＸＭＬ的主要目的　

并不是作为供人类直接查看的一种格式。它的最大｝寺｜　就是揭示了数　

据本身的含义，因而ＸＭＬ文档可用来描述、储存和共享各种数据，具　

ＣＳＳ”表示该样式表是ＣＳＳ的样式表。　

对于同一个ＸＭＬ文件，如果我们赋予它不同的ＣＳＳ，那么它就有　

不同的显示效果，如果网页用ＸＭＬ来制作，那么为了变换网页的样　

子，就可以编辑多个ＣＳＳ文件，隔段时间更换。只需要在ＸＭＬ文件的　

前面改变‘＇ＵＲＬ＇’指定的ＣＳＳ文件就可以。　

ＣＳＳ中使用选择符来格式化ＸＭＬ文档。选择符一般为一个或多　

有相当多的优点。然而在ＸＭＬ文档中并不包含数据的显示格式信息。　

个ＸＭＬ标签，例如上面的ｂｏｏｋ、ｎａｍｅ等，在花括号中为显示的属性　

为了使ＸＭＬ文档所包含的数据能够更好地显示，便于人们阅读，就需　

和属性值，属性和属性值中间以冒号分开。使用ＣＳＳ可以通过ｄｉｓｐａｌｖ　

要使用特定的样式表语言来对这些数据加以描述。　屙Ｉ生设置标签内容是否显示，屙ｌ生值有ｎｏｎｅ、ｂｌｏｃｋ、ｉｎｌｉｎｅ、ｉｆｓｔ－ｉｔｅｍ。　

１　ＣＳＳ的概念　

另外ＣＳＳ还可以设置ＸＭＬ显示的字体、颜色、文本、边距、边框、填充　

ＣＳＳ的全称是Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ，中文的意思是“层叠样式　

以及定位显示。因为ＸＭＬ文档中的所有元素都是用户自己定义和创　

表”或“级联样式表”，是目前在浏览器上按一定格式显示ＸＭＬ文档内　建的，浏览器并不知道怎样在网页中显示这些元素。所以建立适当的　

容的主要方法之一。　

ＣＳＳ样式表并将它链接到ＸＭＬ文档，便是一种告诉浏览器如何显示　

ＣＳＳ是目前用来在浏览器中显示ＸＭＬ文档内容的主要方法。样　

文档中每个元素有有效方法。附加Ｃ　ＳＳ样式表的ＸＭＬ文档可以直　

式表只是简单的文本，就像ＨＴＭＬ那样。它不需要图象，不需要执行　

接在ＩＥ浏览器中打开，并且能够按照ＣＳＳ中规定的各种格式将ＸＭＬ　

程序，不需要插件，不需要流式。它就像ＨＴＭＬ指令那样快。有了ＣＳＳ　文档的内容很好地显示出来。　

之后，以前必须求助于ＧＩＦ的事情现在通过ＣＳＳ就可以实现。使用串　

接样式表可以减少表格标签及其它加大ＨＴＭＬ体积的代码，减少图　

象用量从而减少文件尺寸。你可以更陕更容易地维护及更新大量的网　

页。没有样式表时，如果我想更新整个站点中所有主体文本的字体，我　

必须一页一页地修改每张网页。即便站点用数据库提供服务，我仍然　

需要更新所有的模板，而且更新每一模板中每一个实例的＜ＦＯＮＴ　

也可以创建专门的样式表文件，把控制元素显示格式的相关指　

令放在其中，使其与ＸＭＬ文档的数据内容分开，可以大大提高控制　

ＸＭＬ文档显示方式的灵活性，并可使得样式表本身更加容易维护。例　

如为同一个ＸＭＬ文档附加不同的样式表，就可以相应地获得这个文　

档的多种显示效果，使该文档适合多种不同的显示设备或者满足不同　

的显示要求，而不必重新构造ＸＭＬ文档本身。此外，同一个样式表也　

ＦＡＣＥ＞。样式表的主旨就是将格式和结构分离。利于样式表，我可以将　

可以附加到多个类似的ＸＭＬ文档中，通过重新修改附加在这些ＸＭＬ　

站点上所有的网页都指向单一的一个ＣＳＳ文件，我只要修改ＣＳＳ文　文档中的通用样式表，可以快速地对这一组类似的ＸＭＬ文档的显示　

件中某一行，那么整个站点都会随之发生变动。浏览器将成为你更友　格式作更新编排，而不必单独打开与编排每一份ＸＭＬ文档。　

好的界面。不象其它的的网络技术，样式表的代码有很好的兼容性，　

３在ＸＭＬ文档中引入ＣＳＳ样式　

也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版　在ＸＭＬ中引入ＣＳＳ样式表有两种方法。一种是在ＸＭＬ文档中　

本的浏览器时代码不会出现杂乱无章的．隋况。只要是可以识别串接样　直接嵌入ＣＳＳ样式；另一种则是外部引入（似乎在ＷＥＢ中很多引入　

式表的浏览器就可以应用它。　的方式都有这两种）。　

ＣＳＳ样式表中包含了一组设置元素显示的规则，最初是被开发用　在ＸＭＬ中直接嵌入ＣＳＳ样式的方法如下：　

来控制ＨＴＭＬ文档内容的显示格式的，它利用简单的样式声明语句　

来控制元素内容在浏览器中的表现形式。在制作ＨＴＭＬ网页时采用　

ＣＳＳ技术，可以有效地对页面的布局、字体、颜色、边框、背景和其他显　

示效果实现精确的控制。利用多个特定的ＣＳＳ样式表并编写相应的　

ＪａｖａＳｃｒｉｐｔ或者ＶＢＳｃｒｉｐｔ脚本程序，还能够实现许多动态ＨＴＭＬ页面　

的效果。　

＜？ｘｍｌ　ｖｅｒｓｉｏｎ＝”１．０”ｅｎｃｏｄｉｎｇ＝＇　ｕｔｆ－８”？＞　

＜？ｘｍｌ～．ｓｔｙｌｅｓｈｅｅｔ　ｔｙｐｅ＝”＇ｔｅｘｔ／ｃｓｓ＇’？＞　

＜ｘｍｌ＞　

＜ＨＴＭＬ：ＳＴＹＬＥ　

ＸＨＴＭＬ－ｔｒａｎｓｉｔｉｏｎａｌ”＞　

ｘｍｌｎｓ：ＨＴＭＬ＝”ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ｐｒｏｆｉｌｅｓｌ　

ｂｏｏｎ　

ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　

ｂａｃｋｇｒｏｕｎｄ－ｅｏｌｏｒ：＃ＦＦＥ４Ｃ４；　

２　ＣＳＳ设置ＸＭＬ文档的显示效果　

ＣＳＳ在ＨＴＭＬ中已经有很好作用，在ＸＭＬ中，ＣＳＳ同样发挥了　

它强大的样式表作用。在ＸＭＬ中的ＣＳＳ和ＨＴＭＬ中的ＣＳＳ差不多。　

在ＸＭＬ的源文件中引用ＣＳＳ文件时有：（？ｘｍｌ－－ｓｔｙｌｅｓｈｅｅｔ　ｈｒｅｆ＝”　

ｉｆｒｓｔ．ＣＳＳ”ｔｙｐｅ＝‘＇＇ｔｅｘｔ／ｃｓｓ”？），它指明这个ＸＭＬ文件在显示的时候引用　

ＣＳＳ文件，具体的语法如下：　

（？ｘｍｌ－ｓｔｙｌｅｓｈｅｅｔ　ｈｒｅｆ＝”ＵＲＵ’ｔｙｐｅ＝”＇ｔｅｘｔ／ｃｓｓ＇’？其中，Ｘｌｎ］一　

ｓｔｙｌｅｓｈｅｅｔ是关键字，表明引用样式表设定；ｈｒｅｆ＝”ＵＲＬ＇’用来指定样式　

表所在的位置，如果在同一个文件夹下可以写相对地址，ｔｙｐｅ＝　＇ｔｅｘｔ／　

ｍａｒｇｉｎ：５ｐｘ；｝　

ｔｉｔｌｅｆ　

ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　

ｌｉｎｅ－ｈｅｉｇｈｔ：３０ｐｘ；｝　

ａｕｔｈｏｒ【　

ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　

ｉｆｎｅ－ｈｅｉｇｈｔ：３０ｐｘ；｝　

作者简介：刘　蕴，女，汉族，周口职业技术学院讲师，研究方向：计算机应用，网页设计与网站开发。　

楚书来，男，汉族，周１３职业技术学院讲师，研究方向：软件工程与网络。　

聃枝　仑坛　民营科技２０１２年第３期　

ｐｒｉｃｅ｛　

＜／ｂｏｏｋ＞　

ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　

＜／ｘｍｌ＞　

ｌｉｎｅ－ｈｅｉｇｈｔ：３０ｐｘ；｝　

代码说明：第一行为Ｘｍｌ文档的声明；第二行中添加了一个　

ＨＴＭＬ：ＳＴＹＬＥ＞　

ｈｒｅｆ屙陛，它表示引入外部的ＣＳＳ文件，文件的名字是ｂｏｏｋｓｔｙｌｅ．ＣＳＳ。　

＜ｂｏｏｋ＞　

后面的几行是ＸＭＬ文档的内容。　

＜ｔｉｔｌｅ＞ｘｍｌ入（］＜／ｔｉｔｌｅ＞　

２）创建样式表文件　

＜ａｕｔｈｏｒ＞王铭阐＜／ａｕｔｈｏｒ＞　

ＣＳＳ样式表是一个以．ＣＳＳ为文件扩展名的纯文本文件，其中包含　

＜ｐｒｉｃｅ＞￣３２＜／ｐｒｉｃｅ＞　

一

组告诉浏览器如何安排与显示ＸＭＬ文档中各种元素的规则。一般　

＜／ｂｏｏｋ＞　

可以使用“记事本”等文本编辑器来建立ＣＳＳ样式表文件。下面为上　

／＜ｘｍｌ＞　

述文档建立—个ＣＳＳ样式表文件，命名为ｂｏｏｋｓｔｙｌｅ．ＣＳＳ　

代码说明：第一行是ＸＭＬ文件的头部声明，作为一个格式良好　

ｂｏｏｋ｛　

的Ｘｍｌ文档，都应该添加头部的声明信息。第二行是ＣＳＳ样式的声　

ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　

明，其中，ｘｍｌ—ｓｔｙｌｅｓｈｅｅｔ的意思是为ＸＭＬ文档添加样式表，ｔｙｐｅ＝”　

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：ｇｒａｙ；　

ｔｅｘｆｆｃｓｓ”的意思是样式表的类型是ＣＳＳ样式表。＜ＨＴＭＬ：ＳＴＹＬＥ　

ｍａｒｇｉｎ：５ｐｘ；｝　

ｘｍｌｎｓ：ＨＴＭＬ＝”ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ｐｒｏｆｉｌｅｓ／ＸＨＴＭＬ－ｔｒａｎｓｉｔｉｏｎａｌ”＞与　

ｔｉｔｌｅ｛　

ＨＴＭＬ：ＳＴＹＬＥ＞　

ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　

中间的内容则是ＣＳＳ样式的内容，其中一句用来声明添加ＣＳＳ　

ｌｉｎｅ－ｈｅｉｇｈｔ：３０ｐｘ；｝　

代码，另外一句则是它的封闭标签。后面的几行是ＸＭＬ文档的内容。　

ａｕｔｈｏｒ｛　

在添加了ＣＳＳ样式之后，我们在ＩＥ中就可以打开这个ＸＭＬ文档。　

ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　

第二种方式是外部引用。要想使用ＣＳＳ格式ＸＭＬ文档，首先要　

ｌｉｎｅ－ｈｅｉｇｈｔ：３Ｏｐｘ；｝　

创建一个ＸＭＬ文档，然后再创建一个相应的ＣＳＳ样式表文档来规定　

ｐｒｉｃｅ（　

这个文档中多个元素的显示格式，最后将这个ＣＳＳ样式表链接到　

ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　

ＸＭＬ文档中，并实现在ＩＥ浏览器按所规定的格式显示这个ＸＭＬ文　

ｌｉｎｅ－ｈｅｉｇｈｔ：３０ｐｘ；】　

档。　

在ＩＥ浏览器中打开ＸＭＬ文档，可以看到，使用样式表之后ＸＭＬ　

１）建立ＸＭＬ文档，命名为ｂｏｏｋ．ｘｍｌ　文档中所有的标记文字以及注释内容已不再显示，各个元素所包含的　

＜？ｘｍｌ　ｖｅ￣ｉｏｎ＝”１．０”ｅｎｃｏｄｉｎｇ＝”ｕｆｆ－８”？＞　

数据将分别以样式表中指定的格式显示出来。　

＜？ｘｍｌ－ｓｔｙｌｅｓｈｅｅｔ　ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”ｈｒｅｆ＝”ｂｏｏｋｓｔｙｌｅ．ＣＳＳ”？＞　

通过简单的介绍，读者可以大致了解如何使用ＣＳＳ格式ＸＭＬ文　

＜ｘｍｂ　

档的方法。　

ｂ＜ｏｏｋ＞　

参考文献　

＜ｔｉｔｌｅ＞ｘｍｌ入（］＜／ｔｉｔｌｅ＞　

［１］耿祥义．ＸＭＬ基础教程【Ｍ］．北京：清华大学出版社，２００６．　

ａ＜ｕｔｈｏｒ＞王铭阐＜／ａｕｔｈｏｒ＞　

［２１许劲松等译．ＸＭＬ基础教程删．北京：人民邮电出版社，２００７．　

＜ｐｒｉｃｅ＞￣３２＜／ｐｒｉｃｅ＞　

［３］高怡新．ＸＭＬ基础教程　．北京：人民邮电出版社，２０１０．　

（上接９Ｏ页）选定一个企业的项目，项目来源于企业真实项目，　

心目中的良好形象，让每个学生在毕业时能够为用人单位所用，　

由小组成员讨论、调查、决定设计方案。教师在项目小组选择项目　

而不仅是停留在老师教授的本知识，所谓“来之能战”。　

的过程中要起到严格把关的作用，要求设计内容难度不要太深，　

５结论　

没有必要一定是大的项目，要求能运用所学知识点，每个项目必　总的来说，在国内高校《企业识别》课程是平面设计专业的一　

须在一个月就能完成。可以利用网络资源，指导学生登陆威客中　

门核心课程，其教学效果的优劣将直接影响该专业学生综合职业　

国网，鼓励学生自主选择设计风格，教师及时指导确定各组企业　

能力的发展，因此要把《企业识别》课程放在教学模式改革的首要　

识别设计项目，调动每个组学生学习积极性，为项目模块的开展　

位置。随着社会的进步和文化产业的不断发展，对《企业识别》课　

打下了很好的基础。　程提出了更高的要求，课程设置更应注重实践教学，内容与企业　

４）通过现代化的教学理念，培养现代化的创新人才、建立现　实际项目密切联系，用所学设计基础知识指导实践，在实践中发　

代化教育创新体系。整合教育资源，建立教学规范，提升教学环　

现问题并解决问题，培养了同学们的创新意识，提高了大学生实　

境，突破关键技术，并通过若干的项目教学设计的案例作为工作　

践动手能力，使学生具有适应社会设计工作的能力。ＣＩＳ教学也必　

引导，期望在学生的原始创新能力得到突破性的提升。通过项目　

须把握这个规律，才能真正让学生较为系统透彻的掌握ＣＩＳ设计　

性教学的深入开展，可以解决目前学生教育与就业之间的矛盾，　

的能力，并能将其它相关设计知识有机地串联起来，形成具有符　

平衡学院实验资源、提升创新能力。建立起一支学术水平高、创新　

合时代特征与企业文化的系列化企业形象设计，使学生具有适应　

能力强的研究型人才组织，也能促进并提高人才培养的质量。为　社会设计工作的能力。　

当地在相关领域的发展提供重要设计人才的支持。综合分析学生　

参考文献　

不同阶段能力的培养需求，结合嘉兴职业技术学院现有校外教学　

『１１丘晓东．关于职业教育项目教学实施中的几个问题『Ｊ］．广州教　

实践基地的优势，由第一课堂逐步向仿真模拟课堂、项目实践大　

育研究，２００７（９）．　

课堂的延伸与拓展，形成的“课堂一研究一仿真一项目结合的立体化　

１２］贺平．项目教学法的实践探索『Ｊ１．中国职业技术教育，２００６（２２）．　

教学模式。不仅是实验演习设计，而且要多鼓励学生参与实际ＣＩ　

『３１杨仁敏，李魏．ｃＩ设计『Ｍ１．重庆：西南师范出版社，２００４．　

设计企业项目和参加各类赛事，通过实战经验树立起基本的ｃＩ设　ｆ４１焦晨霞．谈”项目带动式“培养模式在高职教学中的应用［Ｊ］．教　

计理念，对于如何为提供企业进行视觉识别系统设计的基本流程　

育与职业，２００６（３）．　

和基本方法做到心中有数。能够通过自己的工作经验初步为企业　

【５】王明金．基于构建主义的项目教学法的拓展【Ｊ１．安徽科技学院　

建立准确的市场定位和形象信息，树立嘉职院毕业生在用人单位　学报，２０１０，２４（３）．