XML文件的显示——CSS和XSL

 

CSS(叠层样式表)和XSL(可扩展样式语言)都可以定义XML文件的显示,这两种方式有哪些不同以及它们在使用中的具体方法,我们将在本文给予介绍。

在XML文件中,使用的基本上是自定义的标记,显然一个浏览器是无法理解这些标记的,现在,浏览器仅仅是作为一个XML文件的解析器——只要你的XML文件是Well-Formed的,那么它就将文件原封不动地给你显示出来。在XML中内容与表现形式是分开的,在一个XML的源文件中并没有关于它表现形式的信息。XML的最大特点就是揭示了信息本身的含义,用于自动化的电子文档交换是最优的,如果一个XML文件仅仅用于交换信息,就无需考虑它的显示问题。编辑XML文件,我们仅仅需要关注文件的内容、信息的结构,至于它怎么显示,则交给CSS(叠层样式表)和XSL(可扩展样式语言)来完成。这就使得用户可以根据需要来定义数据的表现形式。


■用CSS来表现XML


CSS在HTML中已经有很好作用,在XML中,CSS同样发挥了它强大的样式表作用。在XML中的CSS和HTML中的CSS差不多。目前的版本是CSS 2.0。

我们先来看一段CSS的代码——例1中的first.css。它是为例1中2.xml这个XML文件所作的CSS文件。

在2.xml这个XML文件的源文件中,有一行:〈?xml-stylesheet href="first.css" type="text/css"?〉,它指明这个XML文件在显示的时候引用CSS文件,具体的语法如下:〈?xml-stylesheet href="URL" type="text/css"?〉 其中,xml-stylesheet是关键字,表明引用样式表设定;href="URL"用来指定样式表所在的位置,在例1中,因为first.css和2.xml在同一个目录下,所以可以直接写出它的名称,是相对地址;type="text/css"表示该样式表是CSS的样式表。应用CSS前,浏览器显示如图1,应用了样式表后,显示效果如图2所示。


图1

下面我们来分析例1中first.css这个文件。大家可以看到,在XML中的CSS和HTML中的CSS语法上实际是一样的。都是通过一些标记来设置标记文字怎样显示。

对照表1和表2,来分析这个文件。在这个文件中,每一个区块是针对XML文件中不同的标记来设定的,每个区块用{}符号分割开。像第一个区块,设置了title标记中文字的颜色(COLOR)、显示状态(是否分段:block或inline;隐藏不显示出来:none)、字型(FONT-FAMILY)、大小(FONT-SIZE和FONT-WEIGH)、有无上/下划线(TEXT- DECORATION)。其他区块,大家可以对照表中的一些常用属性来分析。我们可以利用CSS的各种属性组合出丰富多彩的显示效果。这和编程关系不大,因为语法太简单了,关键看你的想像力了。

对于同一个XML文件,如果我们赋予它不同的CSS,那么它就有不同的显示效果,如果你的网页用XML来制作,那么为了变换网页的样子,就可以编辑多个CSS文件,隔段时间更换。只需要在XML文件的前面改变“URL”指定的CSS文件就可以。


■用XSL来表现XML


XSL(可扩展样式语言)也是一种显示XML文件的规范。和CSS不同的是:XSL是遵循XML的规范来制定的。也就是说,XSL文件本身符合XML的语法规定。XSL在排版样式的功能上要比CSS强大。比如:CSS适用于那些元素顺序不变的文件,它不能改变XML文件中元素的顺序——元素在XML文件中是什么顺序排列的,那么通过CSS表现出来顺序不能改变。对于那些需要经常按不同元素排序的文件,我们就要用XSL。

XSL是怎样工作的呢?XML文件在展开后是一种树状结构,称为“原始树”,XSL处理器(现在只有IE 5支持XSL,在IE 5中的处理器叫:XSL Stylesheet Processor)从这个树状结构读取信息,根据XSL样式的指示对这个“原始树”进行排序、复制、过滤、删除、选择、运算等操作后产生另外一个“结果树”,然后在“结果树”中加入一些新的显示控制信息,如表格、其他文字、图形以及一些有关显示格式的信息。XSL处理器根据XSL样式表的指示读取XML文件中的信息,然后再重新组合后转换产生一个Well-Formed 的HTML文件。浏览器显示HTML文件肯定是没问题的,这样,XML文件中的信息就会以一定的形式显示在我们面前了。


图2

同样,我们先来看一个XSL的例子,再来分析它的结构和语法。XML源文件和XSL源文件如例2所示,显示效果如图3。可以看到,要想XML文件使用XSL来表现,在XML文件前面要加上一句:〈?xml-stylesheet href="URL" type="text/xsl" ?〉,和引用CSS是一样的,只不过是指定type="text/xsl"。

看看XSL文件,可以发现XSL文件的结构和XML文件的结构是一样的,因为XSL的规则是根据XML的规则制定的。一个XSL文件也必须是Well-Foemed的,因为XSL文件中所用的标记都是W3C定义好的。所以,XSL文件就不需要DTD了。另外,可以看到在XSL文件中可以插入一些HTML的标记,来帮助XML文件的显示,这些HTML的标记也必须是Well-Formed的,例如:必须要有正确的结束标记(不能像在HTML文件中那样可以偷懒了)。

XSL文件本身即是一份 XML文件,所以在XSL文件的开头,一样有和XML文件相同的声明。W3C为XSL定义了很多标记(元素),XSL文件就是这些标记和HTML标记的组合。在XSL文件中,必须有:〈xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"〉。

其中,xsl:stylesheet是XSL文件的根元素,在根元素中包含了所有的排版样式,样式表就是由这些排版样式组合成的;xmlns:xsl="http://www.w3.org/TR/WD-xsl"这一句主要用来说明该XSL样式表是使用W3C所制定的XSL,设定值就是XSL规范所在的URL地址。

XSL文件中,除HTML标记外,其他就是XSL自己的标记了。标记有不同的功能。下面介绍XSL中各种可用的标记,大家可以参照它们的功能说明与使用举例,来看看例3中XSL的源文件。

1. xsl:stylesheet:作为XSL样式表中的根元素,在每个XSL文件中都必须有。

属性:default-space:决定是否保留XML文件中的空白,仅当值为“default”时保留。

indent-result:决定是否保留XSL文件中的空白,值为“yes”时保留。

language:设定在XSL文件中使用的脚本语言。

例:〈xsl:stylesheet default-space="default"〉

2. xsl:template:指定XML文件中的特定标记来定义排版样式。

属性:language:指定使用哪种脚本语言。

match:设定从XML文件中哪个标记开始来读取信息,如果值为“/”那么表示从XML文件的根元素开始读取信息。

例:〈xsl:template mach="data/book"〉:表示从XML文件中的〈book〉标记开始读取信息。

3. xsl:value-of:从XML文件中的特定标记中将信息读出来。属性:select:设定读取哪一个标记中的信息。

例:〈xsl:template select="title"〉:表示要从〈title〉标记中将信息读出来。


图3

4. xsl:for-each:将排版样式应用到XML文件中相同的标记(类似于循环语句)。

属性:select:设定从哪一个标记中读取数据。

order-by:在读取信息完成之后,设定依据什么标记来进行排序,值为某一特定标记,如在标记名前用“+”号表示是由大到小的排序,反之用“-”号。例:〈xsl:for-each select="data/book" order-by="-price"〉:因为在XML文件中有多个〈book〉标记,这里设定重复地从〈book〉标记下的子元素中读取信息,将读出来的信息按照价格从小到大进行排序显示。

5.
xsl:comment:在此元素中的内容,XSL将它作为注释信息,并不显示在浏览器中。

6. xsl:apply-templates:指示XSL处理器在该XSL样式表中寻找合适的〈xsl:template〉中设定的样式来用。

属性:order-by和select:同xsl:for-each中的属性一样。

例:.......

〈tr〉〈xsl:apply-templates/〉〈/tr〉

..........

〈xsl:template match="book"〉

〈td〉〈xsl:value-of select="author"/〉〈/td〉

〈/xsl:template〉

.........



7. xsl:copy:从XML文件中拷贝标记中的信息到输出的文件中。无属性。

例:.......

〈xsl:template〉

〈xsl:copy〉

〈xsl:value-of /〉

〈/xsl:copy〉

〈/xsl:template〉

...........



此例首先使用〈xsl:copy〉将XML文件中的非标记的信息全部读取出来,然后通过〈xsl:value-of /〉将这些复制的信息显示出来。

8. xsl:if:与一般程序中的If...Then类似。

属性:script:设定script程序所表达的式子。

language:设定使用哪种脚本语言。

test:设定条件的叙述表达式。只有当script属性的设定值传回“true”时(或test属性设置的条件成立),〈xsl:if〉中的内容才会被XSL处理器处理。

例:

〈xsl:if test=".[@sex='男']"〉

〈td〉男〈xsl:value-of /〉〈/td〉

〈/xsl:if〉



9. xsl:choose、xsl:when、xsl:otherwise:这三个元素是用来设定较为复杂的条件式,一般共同配合使用。其中xsl:when有script、language、test三种属性,与前面xsl:if中的属性含义是一样的。

例:

〈xsl:choose〉

〈xsl:when test="wife"〉

〈td〉妻〈xsl:value-of /〉〈/td〉

〈/xsl:when〉

〈xsl:when test="husband"〉

〈td〉夫〈xsl:value-of /〉〈/td〉

〈/xsl:when〉

〈xsl:otherwise〉

〈td〉未婚〈/td〉

〈/xsl:otherwise〉

〈/xsl:choose〉



10.xsl:attribute和xsl:element:可以在标记中附加一个属性名称或新建一个标记。XSL样式表不但可以引用HTML标记,而且也可以建立新的标记和属性,然后一起结合XML文件中的信息来显示。其中,xsl:attribute是在标记中新增一个属性,xsl:element是新建一个标记。它们有共同的属性。

属性:name:为新建的属性指定属性名。

例:假如我们没有〈img〉这种显示图形文件的HTML标记,现在我们在XSL文件中要新增一个这样的标记,名为〈img〉,具有src属性。

〈xsl:template match="image"〉

〈xsl:element name="img"〉

〈xsl:attribute name="src"〉

〈xsl:value-of /〉

〈/xsl:attribute〉

〈/xsl:element〉



XSL是显示XML文件的最好的方法,因为它符合XML文件的标准,一切XML有的优点,XSL都具备,而且在功能上也有比CSS更强的地方,所以我们在想要将XML文件内容显示出来的时候,最好优先考虑使用XSL——为了将来的扩展。



例2 2.xml源文件

〈?xml version="1.0" encoding="GB2312" ?〉

〈?xml-stylesheet href="first.xsl" type="text/xsl" ?〉

〈data〉

〈book〉

〈title〉XML入门精解〈/title〉

〈author〉张三〈/author〉

〈price unit="人民币"〉20.00〈/price〉

〈/book〉

〈book〉

〈title〉XML语法〈/title〉

〈!-- 即将出版 --〉

〈author〉李四〈/author〉

〈price unit="人民币"〉18.00〈/price〉

〈memo〉此书是著名计算机科学专家编著,

极具权威性。在书中又穿插许多精彩的例

子,所以可读性又极强。

〈/memo〉

〈/book〉

〈/data〉

First.xsl源文件

〈?xml version="1.0" encoding="GB2312" ?〉

〈xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"〉

〈xsl:template match="/"〉

〈html〉〈body〉

〈center〉〈h2〉书籍信息〈/h2〉〈/center〉

〈div align="center"〉〈center〉

〈table border="1" cellpadding="5" bgcolor="#4EB7DE"〉

〈tr〉

〈th〉书名〈/th〉〈th〉作者〈/th〉〈th〉价格(人民币)〈/th〉

〈th〉备注〈/th〉

〈/tr〉

〈xsl:for-each select="data/book" order-by="title"〉

〈tr〉

〈td〉〈xsl:value-of select="title"/〉〈/td〉

〈td〉〈xsl:value-of select="author"/〉〈/td〉

〈td〉〈xsl:value-of select="price"/〉〈/td〉

〈td width="150"〉〈xsl:value-of select="memo"/〉〈/td〉

〈/tr〉

〈/xsl:for-each〉

〈/table〉

〈/center〉〈/div〉

〈/body〉〈/html〉

〈/xsl:template〉

〈/xsl:stylesheet〉



表1 常用的文字相关属性

属性名称

功能描述

设置值

color

文字的颜色

颜色的英文名或十六进制的rgb色

color:red color:#f00f01

font-family

文字字型

字型名称

font-family:宋体

font-size

文字大小

pt、in、cm、px、xx-small、x-small、small、medium、large、x-large、xx-large

font-size:x-large font-size:1cm

font-weight

文字粗细

extra-light、light、demi-light、medium、demi-bold、bold、extra-bold

font-weight:light

font-style

字型样式

normal、italic

font-style:italic

text-align

文字位置

center、right、left

text-align:left

text-indent

文字缩排

pt(点)in(英寸)cm(厘米)px(像素)

text-indent:20pt

text-transform

大小写转换

capitalize、uppercase、lowercase

text-transform:uppercase

text-decoration

文字加线设置

underline、ouerline、line-through

text-decora:underline


表2 常用的版面排列属性

属性名称

功能描述

设置值与单位

display

组件的显示状态

none、block、inline

width

组件的宽度

pt、in、cm、px

background-color

组件的背景颜色

颜色英文名或十六进制rgb

padding

组件与四边的距离

pt、in、cm、px

padding-left

组件与左边的距离

pt、in、cm、px

padding-right

组件与右边的距离

pt、in、cm、px

padding-top

组件与上边的距离

pt、in、cm、px

padding-bottom

组件与下边的距离

pt、in、cm、px

border

方形边框

border-left

方形的左边框

border-right

方形的左边框

border-top

方形的上边框

border-bottom

方形的下边框

border-color

方形边框的颜色

颜色的英文名或十六进制rgb

border-wide

方形边框的宽度

thin 、medium、thick、pt、in、cm、px

border-style

方形边框的样式

none、dotted、solid、double


图1

下面我们来分析例1中first.css这个文件。大家可以看到,在XML中的CSS和HTML中的CSS语法上实际是一样的。都是通过一些标记来设置标记文字怎样显示。

对照表1和表2,来分析这个文件。在这个文件中,每一个区块是针对XML文件中不同的标记来设定的,每个区块用{}符号分割开。像第一个区块,设置了title标记中文字的颜色(COLOR)、显示状态(是否分段:block或inline;隐藏不显示出来:none)、字型(FONT-FAMILY)、大小(FONT-SIZE和FONT-WEIGH)、有无上/下划线(TEXT- DECORATION)。其他区块,大家可以对照表中的一些常用属性来分析。我们可以利用CSS的各种属性组合出丰富多彩的显示效果。这和编程关系不大,因为语法太简单了,关键看你的想像力了。

对于同一个XML文件,如果我们赋予它不同的CSS,那么它就有不同的显示效果,如果你的网页用XML来制作,那么为了变换网页的样子,就可以编辑多个CSS文件,隔段时间更换。只需要在XML文件的前面改变“URL”指定的CSS文件就可以。


■用XSL来表现XML


XSL(可扩展样式语言)也是一种显示XML文件的规范。和CSS不同的是:XSL是遵循XML的规范来制定的。也就是说,XSL文件本身符合XML的语法规定。XSL在排版样式的功能上要比CSS强大。比如:CSS适用于那些元素顺序不变的文件,它不能改变XML文件中元素的顺序——元素在XML文件中是什么顺序排列的,那么通过CSS表现出来顺序不能改变。对于那些需要经常按不同元素排序的文件,我们就要用XSL。

XSL是怎样工作的呢?XML文件在展开后是一种树状结构,称为“原始树”,XSL处理器(现在只有IE 5支持XSL,在IE 5中的处理器叫:XSL Stylesheet Processor)从这个树状结构读取信息,根据XSL样式的指示对这个“原始树”进行排序、复制、过滤、删除、选择、运算等操作后产生另外一个“结果树”,然后在“结果树”中加入一些新的显示控制信息,如表格、其他文字、图形以及一些有关显示格式的信息。XSL处理器根据XSL样式表的指示读取XML文件中的信息,然后再重新组合后转换产生一个Well-Formed 的HTML文件。浏览器显示HTML文件肯定是没问题的,这样,XML文件中的信息就会以一定的形式显示在我们面前了。


图2

同样,我们先来看一个XSL的例子,再来分析它的结构和语法。XML源文件和XSL源文件如例2所示,显示效果如图3。可以看到,要想XML文件使用XSL来表现,在XML文件前面要加上一句:〈?xml-stylesheet href="URL" type="text/xsl" ?〉,和引用CSS是一样的,只不过是指定type="text/xsl"。

看看XSL文件,可以发现XSL文件的结构和XML文件的结构是一样的,因为XSL的规则是根据XML的规则制定的。一个XSL文件也必须是Well-Foemed的,因为XSL文件中所用的标记都是W3C定义好的。所以,XSL文件就不需要DTD了。另外,可以看到在XSL文件中可以插入一些HTML的标记,来帮助XML文件的显示,这些HTML的标记也必须是Well-Formed的,例如:必须要有正确的结束标记(不能像在HTML文件中那样可以偷懒了)。

XSL文件本身即是一份 XML文件,所以在XSL文件的开头,一样有和XML文件相同的声明。W3C为XSL定义了很多标记(元素),XSL文件就是这些标记和HTML标记的组合。在XSL文件中,必须有:〈xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"〉。

其中,xsl:stylesheet是XSL文件的根元素,在根元素中包含了所有的排版样式,样式表就是由这些排版样式组合成的;xmlns:xsl="http://www.w3.org/TR/WD-xsl"这一句主要用来说明该XSL样式表是使用W3C所制定的XSL,设定值就是XSL规范所在的URL地址。

XSL文件中,除HTML标记外,其他就是XSL自己的标记了。标记有不同的功能。下面介绍XSL中各种可用的标记,大家可以参照它们的功能说明与使用举例,来看看例3中XSL的源文件。

1. xsl:stylesheet:作为XSL样式表中的根元素,在每个XSL文件中都必须有。

属性:default-space:决定是否保留XML文件中的空白,仅当值为“default”时保留。

indent-result:决定是否保留XSL文件中的空白,值为“yes”时保留。

language:设定在XSL文件中使用的脚本语言。

例:〈xsl:stylesheet default-space="default"〉

2. xsl:template:指定XML文件中的特定标记来定义排版样式。

属性:language:指定使用哪种脚本语言。

match:设定从XML文件中哪个标记开始来读取信息,如果值为“/”那么表示从XML文件的根元素开始读取信息。

例:〈xsl:template mach="data/book"〉:表示从XML文件中的〈book〉标记开始读取信息。

3. xsl:value-of:从XML文件中的特定标记中将信息读出来。属性:select:设定读取哪一个标记中的信息。

例:〈xsl:template select="title"〉:表示要从〈title〉标记中将信息读出来。


图3

4. xsl:for-each:将排版样式应用到XML文件中相同的标记(类似于循环语句)。

属性:select:设定从哪一个标记中读取数据。

order-by:在读取信息完成之后,设定依据什么标记来进行排序,值为某一特定标记,如在标记名前用“+”号表示是由大到小的排序,反之用“-”号。例:〈xsl:for-each select="data/book" order-by="-price"〉:因为在XML文件中有多个〈book〉标记,这里设定重复地从〈book〉标记下的子元素中读取信息,将读出来的信息按照价格从小到大进行排序显示。

5.
xsl:comment:在此元素中的内容,XSL将它作为注释信息,并不显示在浏览器中。

6. xsl:apply-templates:指示XSL处理器在该XSL样式表中寻找合适的〈xsl:template〉中设定的样式来用。

属性:order-by和select:同xsl:for-each中的属性一样。

例:.......

〈tr〉〈xsl:apply-templates/〉〈/tr〉

..........

〈xsl:template match="book"〉

〈td〉〈xsl:value-of select="author"/〉〈/td〉

〈/xsl:template〉

.........



7. xsl:copy:从XML文件中拷贝标记中的信息到输出的文件中。无属性。

例:.......

〈xsl:template〉

〈xsl:copy〉

〈xsl:value-of /〉

〈/xsl:copy〉

〈/xsl:template〉

...........



此例首先使用〈xsl:copy〉将XML文件中的非标记的信息全部读取出来,然后通过〈xsl:value-of /〉将这些复制的信息显示出来。

8. xsl:if:与一般程序中的If...Then类似。

属性:script:设定script程序所表达的式子。

language:设定使用哪种脚本语言。

test:设定条件的叙述表达式。只有当script属性的设定值传回“true”时(或test属性设置的条件成立),〈xsl:if〉中的内容才会被XSL处理器处理。

例:

〈xsl:if test=".[@sex='男']"〉

〈td〉男〈xsl:value-of /〉〈/td〉

〈/xsl:if〉



9. xsl:choose、xsl:when、xsl:otherwise:这三个元素是用来设定较为复杂的条件式,一般共同配合使用。其中xsl:when有script、language、test三种属性,与前面xsl:if中的属性含义是一样的。

例:

〈xsl:choose〉

〈xsl:when test="wife"〉

〈td〉妻〈xsl:value-of /〉〈/td〉

〈/xsl:when〉

〈xsl:when test="husband"〉

〈td〉夫〈xsl:value-of /〉〈/td〉

〈/xsl:when〉

〈xsl:otherwise〉

〈td〉未婚〈/td〉

〈/xsl:otherwise〉

〈/xsl:choose〉



10.xsl:attribute和xsl:element:可以在标记中附加一个属性名称或新建一个标记。XSL样式表不但可以引用HTML标记,而且也可以建立新的标记和属性,然后一起结合XML文件中的信息来显示。其中,xsl:attribute是在标记中新增一个属性,xsl:element是新建一个标记。它们有共同的属性。

属性:name:为新建的属性指定属性名。

例:假如我们没有〈img〉这种显示图形文件的HTML标记,现在我们在XSL文件中要新增一个这样的标记,名为〈img〉,具有src属性。

〈xsl:template match="image"〉

〈xsl:element name="img"〉

〈xsl:attribute name="src"〉

〈xsl:value-of /〉

〈/xsl:attribute〉

〈/xsl:element〉



XSL是显示XML文件的最好的方法,因为它符合XML文件的标准,一切XML有的优点,XSL都具备,而且在功能上也有比CSS更强的地方,所以我们在想要将XML文件内容显示出来的时候,最好优先考虑使用XSL——为了将来的扩展。



例2 2.xml源文件

〈?xml version="1.0" encoding="GB2312" ?〉

〈?xml-stylesheet href="first.xsl" type="text/xsl" ?〉

〈data〉

〈book〉

〈title〉XML入门精解〈/title〉

〈author〉张三〈/author〉

〈price unit="人民币"〉20.00〈/price〉

〈/book〉

〈book〉

〈title〉XML语法〈/title〉

〈!-- 即将出版 --〉

〈author〉李四〈/author〉

〈price unit="人民币"〉18.00〈/price〉

〈memo〉此书是著名计算机科学专家编著,

极具权威性。在书中又穿插许多精彩的例

子,所以可读性又极强。

〈/memo〉

〈/book〉

〈/data〉

First.xsl源文件

〈?xml version="1.0" encoding="GB2312" ?〉

〈xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"〉

〈xsl:template match="/"〉

〈html〉〈body〉

〈center〉〈h2〉书籍信息〈/h2〉〈/center〉

〈div align="center"〉〈center〉

〈table border="1" cellpadding="5" bgcolor="#4EB7DE"〉

〈tr〉

〈th〉书名〈/th〉〈th〉作者〈/th〉〈th〉价格(人民币)〈/th〉

〈th〉备注〈/th〉

〈/tr〉

〈xsl:for-each select="data/book" order-by="title"〉

〈tr〉

〈td〉〈xsl:value-of select="title"/〉〈/td〉

〈td〉〈xsl:value-of select="author"/〉〈/td〉

〈td〉〈xsl:value-of select="price"/〉〈/td〉

〈td width="150"〉〈xsl:value-of select="memo"/〉〈/td〉

〈/tr〉

〈/xsl:for-each〉

〈/table〉

〈/center〉〈/div〉

〈/body〉〈/html〉

〈/xsl:template〉

〈/xsl:stylesheet〉



表1 常用的文字相关属性

属性名称

功能描述

设置值

color

文字的颜色

颜色的英文名或十六进制的rgb色

color:red color:#f00f01

font-family

文字字型

字型名称

font-family:宋体

font-size

文字大小

pt、in、cm、px、xx-small、x-small、small、medium、large、x-large、xx-large

font-size:x-large font-size:1cm

font-weight

文字粗细

extra-light、light、demi-light、medium、demi-bold、bold、extra-bold

font-weight:light

font-style

字型样式

normal、italic

font-style:italic

text-align

文字位置

center、right、left

text-align:left

text-indent

文字缩排

pt(点)in(英寸)cm(厘米)px(像素)

text-indent:20pt

text-transform

大小写转换

capitalize、uppercase、lowercase

text-transform:uppercase

text-decoration

文字加线设置

underline、ouerline、line-through

text-decora:underline


表2 常用的版面排列属性

属性名称

功能描述

设置值与单位

display

组件的显示状态

none、block、inline

width

组件的宽度

pt、in、cm、px

background-color

组件的背景颜色

颜色英文名或十六进制rgb

padding

组件与四边的距离

pt、in、cm、px

padding-left

组件与左边的距离

pt、in、cm、px

padding-right

组件与右边的距离

pt、in、cm、px

padding-top

组件与上边的距离

pt、in、cm、px

padding-bottom

组件与下边的距离

pt、in、cm、px

border

方形边框

border-left

方形的左边框

border-right

方形的左边框

border-top

方形的上边框

border-bottom

方形的下边框

border-color

方形边框的颜色

颜色的英文名或十六进制rgb

border-wide

方形边框的宽度

thin 、medium、thick、pt、in、cm、px

border-style

方形边框的样式

none、dotted、solid、double

你可能感兴趣的:(技术文章)