XML入门:CSS样式表

样式表可帮我们解释XML文档中各元素的具体意思,所以通过样式表可直接在浏览器上显示XML文档。目前主要的样式表语言有:
1)CSS1(Cascading Stylesheets Level 1,层叠式样式表1)

2)CSS2(Cascading Stylesheets Level 2,层叠式样式表2)

3)XSLT(XSL Transformations 1.0 XSL 转换 1.0)

在XML文档在序言部分通过xml-stylesheet处理指令可指定关联的样式表。xml-stylesheet指令必须有一个href属性和type属性。href指向样式表的URL,type指定样式表的MIME类型:对CSS为text/css,对于XSLT为text/xml或application/xml。下面是一个简单的使用样式表的XML文档:

<?xml version=”1.0″?>
<?xml-stylesheet href=”test.css” type=”text/css”?>

除以上两个必须的属性外,还有4种可选属性:

1)media,标识该样式应用于什么媒体,如报纸(paper)、计算机监视器(screen)、电视(tv)或所有(all)。

2)charset,指明样式表采用字符集编码方式,如:utf-8。

3)alternate,指明是否有可选的样式表,默认为no,表明是主样式表,如果为yes,则是备用样式表。

4)title,在有alternate的前提下,title用于指定不同样式表的标题。如:

<?xml-stylesheet href="big.css" type="text/css" alternate="yes" title="Large fonts"?>
<?xml-stylesheet href="small.css" type="text/css" alternate="yes" title="Small fonts"?>
<?xml-stylesheet href="medium.css type="text/css" title="Normal fonts"?>       #默认的主样式表

样式表现在已成为Web应用中的一个关键技术,它的作用主要体现在以下三个方面:

1)设计一个样式表可以应用于多个文档。样式表可以存在于XML文档外,XML文档可通过链接使用样式表。这意味着如果你有几千个文档,都可以链接到同一个样式表中,改变一个样式表等于改变几千个文档的显示效果。

2)实现内容和表现的分离,增强文档的一致性和可维护性。通过单一的样式表,实现所有文档显示的一致。如果显示样式有变动,我们只需维护有限的几个样式表就可以了。

3)实现一个文档,多个样式。通过样式表,可把一篇文档以HTML形式、PDF形式或文本形式显示出来。

CSS2

CSS2是层叠样式表,它是一种排版技术,能让元素按特定的样式显示,如字体大小,颜色、布局等。在网页中有三种使用方法:
1)用<style>标记声明,如

<style>
div {font-size: 12pt;}
div {color: blue;}
</style>

2)在元素中用style属性指定,如:

<div style="font-size: 12pt;color: blue">CSS测试</div>

3)用LINK标记链接一个外部CSS文件,如:

<link rel="stylesheet" type="text/css" href="mycss.css">

按作用域来分,有三类的样式表,分别是网页解释器样式表、作者样式表和浏览者样式表。网页解释器样式表也叫默认的样式表,当没有另外的样式表加载时使用。作者样式表就是网页设计师设计的样式表。浏览者样式表是浏览网页的用户在浏览器上另外设置的样式表。

CSS的基本数据类型

1)integer,表示整数,可取正负值。如:12,-24。

2)number,表示数字,可取正负值和小数。如:12.1,-14.3。

3)lenght,表示距离长度,可取正负值和小数,后跟一个单位,如:12em,12cm。单位又分相对单位和绝对单位,相对单位有:em,ex,px。绝对单位有:in(英寸),cm(公分),mm(公厘),pt(等于1/72英寸),pc(等于12pt)。

4)percentage,表示百分比值,可取正负和小数。如:20%,-40%。

5)uri,表示网络资源。如:http://www.ringkee.com。

inherit参数值

<style>
body {width: 600px;}
.div1 {width: 120%;}
.div2 {width: inherit;}
说明:
div1的宽度是600px*120%
div2的宽度继承父元素body的参数,是600px

选择符的作用是指定哪些元素使用哪些样式。选择符可以分为简单选择符和复合选择符两类,简单选择符是类型选择符、通用选择符加上零个或多个属性选择符、ID选择符、伪类等组成。复合选择符是用”>”和”+”号结合多个简单选择符组成。”>”和”+”号两边要加上空格。

下面介绍各种选择符:

1)通用选择符,用”*”号表示,可用于所有标记。如:

<style>
* {font-size: 14pt;}
*.EM {color: red;}
</style>
<div>应用字体样式</div>
<em>应用红色样式</em>

2)类型选择符,与标记名一样,只作用已该标记上。如:

<style>
div {font-size: 14pt;}
</style>
<div>应用样式</div>

3)子代选择符,HTML标记是可嵌套的,子代选择符可把样式表应用于子嵌套的子标记上,如:

<style>
div p b {font-size: 14pt;}
</style>
<div>
<p>没有应用样式</p>
<p><b>应用样式</b></p>
</div>

4)子选择符,与子代选择符类似,但它只调用第一层子元素。如:

<style>
div > b {color: red;}
div p > em {color: green;}
</style>
<div><b>当b标记是div标记的子标记时应用红色样式</b></div>
<div><p><em>当em是p的子标记且p是div的子标记时应用绿色样式</em></p></div>

版权所有:为网站而疯狂-给站长一个五星级的家转载请注明来源,谢谢!

还不快抢沙发       我也不甘寂寞

我看不过去了,也来两句 返回»  

友情提示:
1、请勿发表色情、违法、商业广告等信息,谢谢。
2、留言想要有头像?请看 “我” 的。