|
|
|
|
|
|
XML 文档的CSS格式 |
2008/12/22 21:10:00 |
1、CSS简介
1 CSS基本概念
CSS即层叠样式表或级联样式表，是目前在浏览器上按一定格式显示XML文档内容的主要方法之一。
CSS样式表中包含了一组设置元素显示样式的规则，最初被用来控制HTML文档内容的显示格式，同样能够用来控制XML文档内容的显示格式。
XML和HTML所采用的CSS语法是相通的，都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的元素显示属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、背景、下划线等等。
创建专门的样式表文件，把控制元素显示格式的相关指令放在其中，使其与XML文档的数据内容分开，可以大大提高控制XML文档显示方式的灵活性，并可使得样式表本身更加容易维护。相对于XSL（可扩展样式表语言）技术而言，采用CSS技术来显示XML文档的做法还是有局限性的。
2 CSS的创建与应用
1．建立XML文档
例如，可建立一个如书中所示的XML范例文档book_01.xml。
2．创建样式表文件
CSS样式表是一个以.css为文件扩展名的纯文本文件，可以使用“记事本”等文本编辑器来建立CSS样式表文件。
例如，可创建一个名为book_01.css的简单CSS样式表文件，用来设置上述book_01.xml文档的显示格式。
3．链接样式表到XML文档
为了引用创建好的样式表文件来格式化显示XML文档的内容，必须将相应的样式表文件链接到这个XML文档中。对于上面的范例，只需在book_01.xml文档中增加下面的链接语句即可：
<?xml:stylesheet type="text/css" href="/blog/book_01.css" ?>
2、CSS基本语法
1 CSS语法概述
1．CSS语句的基本格式
CSS语句的基本格式如下：
选择符 {属性1:属性值1[;属性2:属性值2 …]}
其中：选择符（selector）用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成；紧跟其后的是用花括号“{ }”括起来的若干对属性名与相应的属性值，用来对选择符所指定的元素设置具体的显示样式。
注意：花括号中的每一个属性名与相应的属性值之间须用冒号“:”分隔；而各对属性之间则须用分号“;”隔开。
2．CSS中的注释
样式表文件也可以包含注释语句，添加注释文字有助于样式表更具可读性。注释语句由斜线加上星号“/*”作为开始，以星号加斜线“*/”作为结束，在这两个特定标记之间可以输入任何想要说明的文字。
3．CSS中字母的大小写
对于IE 浏览器而言，CSS中字母的大小写是不加区分的。但当CSS应用于XML文档时，忽略字母的大小写将会带来一定的问题。如果想使用CSS来显示XML文档，就应该让文档中各种元素的名称都完全不同，而不仅仅是字母大小写的不同。
4．CSS中属性的继承
通常情况下，在CSS中为某个元素所设置的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素重新设置了不同的格式属性。
5. 在CSS使用中文
由于CSS1在支持多种字符集方面表现不佳，在CSS2中针对此问题作了改进。如果要在CSS中使用中文简体字符集，需要在CSS文件的第一行加上如下指令：
@charset "gb2312";
2. CSS选择符
1．使用多个元素与多个规则
2．使用CLASS属性
3．使用ID属性
4．使用STYLE 属性
5．使用上下文选择符
3. CSS属性与属性值
1．属性关键字
2．色彩属性值
（1）使用英文色彩名称
（2）使用各种RGB表示方式
3．尺寸属性值
（1）绝对尺寸值
（2）相对尺寸值
（3）百分比尺寸值
4．URL属性值
3、CSS属性的设置
1 设置显示属性
元素的display属性控制了浏览器显示该元素文字的基本方法。可为display属性指定下面4种属性值中的任何一种。
block 将元素以块方式显示，通过换行与其他元素分开显示；
inline 在同一行显示元素；
none 隐藏元素，使元素在页面中不可见；
list-item 以列表方式显示元素。
2 设置字型属性
1．font-family属性
2．font-size属性
3．font-style属性
4．font-weight 属性
5．font-variant 属性
6．font 属性
3 设置色彩属性
与色彩设置有关的属性包括color、background-color和border-color等，其中应用最多的是color属性。可以使用英文的颜色名称，也可以使用任何一种RGB 格式来作为色彩属性值。
4 设置边框属性
1．border-style属性
2．border-color属性
3．border-width属性
4．border属性
5 设置布局属性
1．设置元素位置与大小
2．margin属性
3．padding属性
6 设置背景属性
1．background-color属性
2．background-image属性
3．background-repeat属性
4．background-position属性
5．background-attachment属性
7 设置文本属性
1．letter-spacing属性
2．word-spacing属性
3．vertical-align属性
4．text-align属性
5．text-indent属性
6．line-height属性
7．text-transform属性
8．text-decoration属性
4、CSS的链接
1 使用一般链接指令
一般可以在XML文档的开头使用xml:stylesheet处理指令将指定的CSS样式表链接进来。其格式为：
<?xml:stylesheet type="text/css" href="/blog/url" ?>
其中：
<?xml:stylesheet 表示当前XML文档在显示时需要使用样式单；
type="text/css" 表示使用CSS类型的样式单；
href="/blog/url ";用来指定样式单文件的URL。
2 使用@import指令
允许在样式表中使用 @import 指令来引入一个或多个独立保存的样式表，即将这些样式表包含的规则添加到当前样式表中来。其格式为：
@import url(/blog/StyleSheetURL);
其中StyleSheetURL 表示想要引入的样式表文件的URL，可以是本地或网络上样式表文件的绝对路径或相对路径。
注意：本指令必须放置在CSS样式表的开头，且尾部的分号“；”不能少。
3 样式应用说明
如果XML文档中的某些元素添加了STYLE属性，则浏览器将根据这个STYLE属性设定的属性值来显示这些元素，而不管在CSS样式表中作了何种设置。
在CSS中的上下文选择符，比一般的选择符具有更高的优先权。
如果没有为子元素设置特定的样式规则，将会自动继承父元素的规则。
如果在样式表中并没有为某个元素设置样式规则，也没有父元素的样式规则可以继承，则浏览器将使用自己设定的规则。
如果在同一个层级中，某个元素的属性被赋予了冲突的属性值，则浏览器将会采用所处理的最后属性设定。
可以使用 !important 关键字来特别声明该规则是重要的和必需使用的。 |
|
| 阅读全文 | 回复(0) | 引用通告 | 编辑 | By: 皮皮爸爸 |
|
发表评论：
|
|
|
|
