第六讲 使用层叠样式单(CSS)格式化XML

css常用格式化样式

CSS（层叠样式表）用于设计和格式化网页的外观和样式。下面是一些常用的格式化样式：

1. 文本格式化：

 修改字体：font-family:Arial,sans-serif;

 修改字体大小：font-size:16px;

 修改字体粗细：font-weight:bold;

 修改字体颜色：color:#333;

 修改行高：line-height:1.5;

 修改文字对齐方式：text-align:center;

2. 盒子模型格式化：

 修改元素的宽度和高度：width:200px;height:100px;

 设置边框：border:1px solid#ccc;

 设置内边距：padding:10px;

 设置外边距：margin:20px;

 设置元素的背景颜色：background-color:#f5f5f5;

3. 背景格式化：

 设置背景图片：background-image:url('example.jpg');

 背景图片重复方式：background-repeat:no-repeat;

 背景图片位置：background-position:center center;

 背景图片大小：background-size:cover;

4. 元素定位：

 设置元素相对定位：position:relative;

 设置元素绝对定位：position:absolute;

 元素位置：top:50px;left:20px;

5. 清除浮动：

 清除浮动：.clearfix::after{content:"";display:table;clear:both;}

6. 响应式设计：

 媒体查询：@media screen and(max-width:600px){在小屏幕下的样式body{font-size:14px;}} 这些是一些常见的CSS格式化样式，用于调整文本、盒子模型、背景、定位和响应式设计等方面的样式。根据网页设计的需要，可以结合不同的属性和值来创建所需的样式。

前面曾经提到过，使用HTML排版，和使用Word这样的软件不同。由于HTML的标签数量十分有限，因此很难精确地控制版式，例如控制文字的行距，对于HTML来说就是很困难的。

因此，层叠样式表的出现就十分必要了。层叠样式表单（Cascading Style Sheets或CSS），就是专门用于定义各种各样的样式的一套规范，有了它，设计时就可以非常灵活地设计汇总样式了。

4.1 理解CSS

4.1.1 CSS是怎样工作的

CSS本身是一个定义样式的规范，样式中的属性在HTML元素中依次出现，并显示在浏览器中。比如：绿色、斜体和Arial字体等等。样式可以定义在HTML文档的标签里，也可以在外部附加文档作为外加文件。此时，一个样式表单可以作用于多个页面––––甚至整个站点，因此具有更好的易用性和扩展性。

样式表单究竟怎样工作呢？说了这么多，还是从一个最简单的例子开始。

假设要建立一个页面，并要求页面上所有

CSS

这是普通的标题

这样的话，如果有很多个

CSS Demo

其中粗体字的部分，就定义了选择器的属性和属性值，其中，

font-family: 黑体，就定义了H3标签的字体，color: green则定义了它的颜色。因此一旦此样式作用于一个HTML文档，每个

4.1.2 将样式与HTML结合

在上一节中，已经介绍了一种CSS的定方法，共有四种方法将这些定义的样式与HTML文档结合。最简单的两种方法，是把样式定义直接写在或里。同时，也可以独立建立外部样式表单文件并附于HTML文档。

1.在文档中定义

最好的定义单一HTML文档样式的方法是把样式定义语句放在里，而如果多个文档使用同一样式，那最好使用外部独立CSS定义。把样式定义写在注释标签中然后放进

ASP网络编程讲稿

第 1 页 共 16 页 层叠样式表（CSS）

“层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的、、、、、、等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。 CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。此外，不同浏览器显示的结果可能有不同。 一、 如何链接HTML文件与层叠样式表 它有4种方法：  在HTML文件的区块嵌入层叠样式表的定义。  将层叠样式表定义在单独的文本文件，然后将之导入或链接至HTML文件。  在HTML文件的标签属性style中加入样式定义  在HTML文件中套用样式类别。 1． 在HTML文件的区块嵌入层叠样式表的定义 无标题文档 2． 将层叠样式表导入或链接至HTML文件 只有IE浏览器支持。先看下面导入样式表： 样式表2 将样式表定义在独立的文本文件body.css中，然后嵌入HTML文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 其BODY.CSS文件内容： BODY { font-family: "宋体"; font-size=30; color:blue } 再看链接样式表： 样式表3 将样式表定义在独立的文本文件body.css中，然后链接至 HTML 文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 3．在HTML文件中套用样式类别 您也可以在样式表文件中定义不同的样式类别（Style Class），然后在HTML文件中套用不同的样式类别。 样式表4 蝶恋花

民营科技２０１２年第３期　科技论坛　如何使用ＣＳＳ格式ＸＭＬ文档　刘蕴楚书来　（周口职业技术学院，河南周口４６６０００）　摘要：阅读ＸＭＬ文档对于人类来说并不容易。ＸＭＬ文档全是文本，并且在ＸＭＬ文档中并不包含数据的显示格式信息。为了使　ＸＭＬ文档所包含的数据能够更好地显示，便于人们阅读，就需要使用特定的样式表语言来对这些数据加以描述。现主要讲述了如何使　用ＣＳＳ格式ＸＭＬ文档。　关键词：ＣＳＳ样式表；格式；ＸＭＬ文档　引言　阅读ＸＭＬ文档对于人类来说并不容易。ＸＭＬ文档全是文本，但　是各部分的可视安排未必很好地对应于各部分之间概念上的连接。而　且，在标记当中查找内容使得阅读也很困难。当然，ＸＭＬ的主要目的　并不是作为供人类直接查看的一种格式。它的最大｝寺｜　就是揭示了数　据本身的含义，因而ＸＭＬ文档可用来描述、储存和共享各种数据，具　有相当多的优点。然而在ＸＭＬ文档中并不包含数据的显示格式信息。　为了使ＸＭＬ文档所包含的数据能够更好地显示，便于人们阅读，就需　要使用特定的样式表语言来对这些数据加以描述。　１　ＣＳＳ的概念　ＣＳＳ的全称是Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ，中文的意思是“层叠样式　表”或“级联样式表”，是目前在浏览器上按一定格式显示ＸＭＬ文档内　容的主要方法之一。　ＣＳＳ是目前用来在浏览器中显示ＸＭＬ文档内容的主要方法。样　式表只是简单的文本，就像ＨＴＭＬ那样。它不需要图象，不需要执行　程序，不需要插件，不需要流式。它就像ＨＴＭＬ指令那样快。有了ＣＳＳ　之后，以前必须求助于ＧＩＦ的事情现在通过ＣＳＳ就可以实现。使用串　接样式表可以减少表格标签及其它加大ＨＴＭＬ体积的代码，减少图　象用量从而减少文件尺寸。你可以更陕更容易地维护及更新大量的网　页。没有样式表时，如果我想更新整个站点中所有主体文本的字体，我　必须一页一页地修改每张网页。即便站点用数据库提供服务，我仍然　需要更新所有的模板，而且更新每一模板中每一个实例的＜ＦＯＮＴ　ＦＡＣＥ＞。样式表的主旨就是将格式和结构分离。利于样式表，我可以将　站点上所有的网页都指向单一的一个ＣＳＳ文件，我只要修改ＣＳＳ文　件中某一行，那么整个站点都会随之发生变动。浏览器将成为你更友　好的界面。不象其它的的网络技术，样式表的代码有很好的兼容性，　也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版　本的浏览器时代码不会出现杂乱无章的．隋况。只要是可以识别串接样　式表的浏览器就可以应用它。　ＣＳＳ样式表中包含了一组设置元素显示的规则，最初是被开发用　来控制ＨＴＭＬ文档内容的显示格式的，它利用简单的样式声明语句　来控制元素内容在浏览器中的表现形式。在制作ＨＴＭＬ网页时采用　ＣＳＳ技术，可以有效地对页面的布局、字体、颜色、边框、背景和其他显　示效果实现精确的控制。利用多个特定的ＣＳＳ样式表并编写相应的　ＪａｖａＳｃｒｉｐｔ或者ＶＢＳｃｒｉｐｔ脚本程序，还能够实现许多动态ＨＴＭＬ页面　的效果。　２　ＣＳＳ设置ＸＭＬ文档的显示效果　ＣＳＳ在ＨＴＭＬ中已经有很好作用，在ＸＭＬ中，ＣＳＳ同样发挥了　它强大的样式表作用。在ＸＭＬ中的ＣＳＳ和ＨＴＭＬ中的ＣＳＳ差不多。　在ＸＭＬ的源文件中引用ＣＳＳ文件时有：（？ｘｍｌ－－ｓｔｙｌｅｓｈｅｅｔ　ｈｒｅｆ＝”　ｆｉｒｓｔ．ＣＳＳ”ｔｙｐｅ＝‘＇＇ｔｅｘｔ／ｃｓｓ”？），它指明这个ＸＭＬ文件在显示的时候引用　ＣＳＳ文件，具体的语法如下：　（？ｘｍｌ－ｓｔｙｌｅｓｈｅｅｔ　ｈｒｅｆ＝”ＵＲＵ’ｔｙｐｅ＝”＇ｔｅｘｔ／ｃｓｓ＇’？其中，Ｘｌｎ］一　ｓｔｙｌｅｓｈｅｅｔ是关键字，表明引用样式表设定；ｈｒｅｆ＝”ＵＲＬ＇’用来指定样式　表所在的位置，如果在同一个文件夹下可以写相对地址，ｔｙｐｅ＝　＇ｔｅｘｔ／　ＣＳＳ”表示该样式表是ＣＳＳ的样式表。　对于同一个ＸＭＬ文件，如果我们赋予它不同的ＣＳＳ，那么它就有　不同的显示效果，如果网页用ＸＭＬ来制作，那么为了变换网页的样　子，就可以编辑多个ＣＳＳ文件，隔段时间更换。只需要在ＸＭＬ文件的　前面改变‘＇ＵＲＬ＇’指定的ＣＳＳ文件就可以。　ＣＳＳ中使用选择符来格式化ＸＭＬ文档。选择符一般为一个或多　个ＸＭＬ标签，例如上面的ｂｏｏｋ、ｎａｍｅ等，在花括号中为显示的属性　和属性值，属性和属性值中间以冒号分开。使用ＣＳＳ可以通过ｄｉｓｐａｌｖ　屙Ｉ生设置标签内容是否显示，屙ｌ生值有ｎｏｎｅ、ｂｌｏｃｋ、ｉｎｌｉｎｅ、ｆｉｓｔ－ｉｔｅｍ。　另外ＣＳＳ还可以设置ＸＭＬ显示的字体、颜色、文本、边距、边框、填充　以及定位显示。因为ＸＭＬ文档中的所有元素都是用户自己定义和创　建的，浏览器并不知道怎样在网页中显示这些元素。所以建立适当的　ＣＳＳ样式表并将它链接到ＸＭＬ文档，便是一种告诉浏览器如何显示　文档中每个元素有有效方法。附加Ｃ　ＳＳ样式表的ＸＭＬ文档可以直　接在ＩＥ浏览器中打开，并且能够按照ＣＳＳ中规定的各种格式将ＸＭＬ　文档的内容很好地显示出来。　也可以创建专门的样式表文件，把控制元素显示格式的相关指　令放在其中，使其与ＸＭＬ文档的数据内容分开，可以大大提高控制　ＸＭＬ文档显示方式的灵活性，并可使得样式表本身更加容易维护。例　如为同一个ＸＭＬ文档附加不同的样式表，就可以相应地获得这个文　档的多种显示效果，使该文档适合多种不同的显示设备或者满足不同　的显示要求，而不必重新构造ＸＭＬ文档本身。此外，同一个样式表也　可以附加到多个类似的ＸＭＬ文档中，通过重新修改附加在这些ＸＭＬ　文档中的通用样式表，可以快速地对这一组类似的ＸＭＬ文档的显示　格式作更新编排，而不必单独打开与编排每一份ＸＭＬ文档。　３在ＸＭＬ文档中引入ＣＳＳ样式　在ＸＭＬ中引入ＣＳＳ样式表有两种方法。一种是在ＸＭＬ文档中　直接嵌入ＣＳＳ样式；另一种则是外部引入（似乎在ＷＥＢ中很多引入　的方式都有这两种）。　在ＸＭＬ中直接嵌入ＣＳＳ样式的方法如下：　＜？ｘｍｌ　ｖｅｒｓｉｏｎ＝”１．０”ｅｎｃｏｄｉｎｇ＝＇　ｕｔｆ－８”？＞　＜？ｘｍｌ～．ｓｔｙｌｅｓｈｅｅｔ　ｔｙｐｅ＝”＇ｔｅｘｔ／ｃｓｓ＇’？＞　＜ｘｍｌ＞　＜ＨＴＭＬ：ＳＴＹＬＥ　ｘｍｌｎｓ：ＨＴＭＬ＝”ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ｐｒｏｆｉｌｅｓｌ　ＸＨＴＭＬ－ｔｒａｎｓｉｔｉｏｎａｌ”＞　ｂｏｏｎ　ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　ｂａｃｋｇｒｏｕｎｄ－ｅｏｌｏｒ：＃ＦＦＥ４Ｃ４；　ｍａｒｇｉｎ：５ｐｘ；｝　ｔｉｔｌｅｆ　ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　ｌｉｎｅ－ｈｅｉｇｈｔ：３０ｐｘ；｝　ａｕｔｈｏｒ【　ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　ｆｉｎｅ－ｈｅｉｇｈｔ：３０ｐｘ；｝　作者简介：刘　蕴，女，汉族，周口职业技术学院讲师，研究方向：计算机应用，网页设计与网站开发。　楚书来，男，汉族，周１３职业技术学院讲师，研究方向：软件工程与网络。