XML教程——XSL样式

什么是样式单

对于一批XML数据,应用处理程序要综合XML文档、文档类型说明(Dtd/Schema)以及样式单三方面要素来处理和显示它。

在XML文档中只包含了数据信息,并没有涉及文档如何显示。不错,制定XML标准的目的是要使数据结构化,赋予其明确的语意,使之易于进行数据交换。XML早已不再把目光局限在文字图象的显示上,而是要建立它们之间的内在关系。可以说,XML文档本身是重内容而不重形式。

可是,XML结构化地组织信息固然好,但如果不加修饰地把一大堆枯燥的数据摆在那里,也足以令人眼花头痛。

样式单(StyleSheet)是一种专门描述结构文档表现方式的文档,它既可以描述这些文档如何在屏幕上显示,也可以描述它们的打印效果,甚至声音效果。样式单一般不包含在XML文档内部,而以独立的文档方式存在。

样式单可以实现非常复杂的显示效果,但由于样式描述与数据描述相分离,显示细节的描述并不影响文档中数据的内在结构。

样式单的最大优点是:XML关于文档浏览的基本思想是将数据与数据的显示分别定义。这样一来,XML格式文档不会重蹈某些HTML文档结构混杂、内容繁乱的覆辙,XML的编写者也可以集中精力于数据本身,而不受显示方式的细枝末节的影响。不仅如此,样式单还带来另一个好处,即定义不同的样式表可以使相同的数据呈现出不同的显示外观,从而适合于不同应用,甚至能够在不同的显示设备上显示。这样,XML数据就可以得到最大程度上的重用性,满足不同的应用需求。


XSLT

W3C已经给出了两种样式单语言的推荐标准,一种是层叠样式单CSS(Cascading Style Sheets),另一种是可扩展样式单语言XSL(eXtensible Stylesheet Language)。本章讲的是XSL。

XSL本身就是一个XML文档,它是通过XML进行定义的,遵守XML的语法规则,是XML 的一种具体应用。因此系统可以使用同一个XML解释器对XML文档及其相关的XSL文档进行解释处理。XSL由两大部分组成:第一部分描述了如何将一个XML文档进行转换,转换为可浏览或可输出的格式;第二部分则定义了格式对象FO(fomatted object)。由于到目前为止,W3C还未能出台一个得到多方认可的FO,因此本章主要XML变换--XSL transformations(XSLT)。现在一般所说的XSL大都指的是XSLT。


XSLT的应用

XSLT主要的功能就是转换,它将一个没有形式表现的XML内容文档作为一个源树,将其转换为一个有样式信息的结果树。在XSLT文档中定义了与XML文档中各个逻辑成分相匹配的模板,以及匹配转换方式。它可以很好地描述XML文档向任何一个其它格式的文档作转换的方法,例如转换为另一个逻辑结构的XML文档、HTML文档、 XHTML文档、VRML文档、SVG文档等等,不一而足。

使用XSL定义XML文档显示方式的基本思想是:通过定义转换模板,将XML源文档转换为带样式信息的可浏览文档。

限于目前浏览器的支持能力,大多数情况下是转换为一个HTML文档进行显示。

在XML中声明XSL样式单的方法为:< xml-stylesheet type=”text/xsl” href=”mystyle.xsl” >
至于具体的转换过程,既可以在服务器端进行,也可以在客户端进行。


XSLT样式单文档举例

下面是一个具体的xslt样式单文档:

 < xml version="1.0" encoding="gb2312"  > 
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/WD-xsl"> 
 <xsl:template match="/"> 
	 <HTML> 
		<HEAD> 
		<TITLE>学生花名册</TITLE> 
			<STYLE> .title{font-size:15pt; font-weight:bold; 
				color:blue } .name{color:red}
			</STYLE> 
		</HEAD> 
		<BODY> 
			<P class="title" >学生花名册</P> 
			<xsl:apply-templates select="学生花名册"/> 
		</BODY> 
	</HTML> 
 </xsl:template> 
 
 <xsl:template match="学生花名册"> 
	 <table BORDER="1"> 
		<THEAD> 
		  <td> <B>姓名</B> </td>
		  <td> <B>籍贯</B> </td> 
		  <td> <B>年龄</B> </td> 
		  <td> <B>电话</B> </td> 
		</THEAD>
		<xsl:for-each select="学生" order-by="名字"> 
		<tr> 
		  <td><B><xsl:value-of select="名字"/></B></td> 
		  <td><xsl:value-of select="籍贯"/></td> 
		  <td><xsl:value-of select="年龄"/></td> 
		  <td><xsl:value-of select = "电话号码"/></td> 
		</tr>
		</xsl:for-each>
	   </table> 
 </xsl:template> 
 </xsl:stylesheet>

 


模板在XSLT中的应用

将上例的XML文档用XSL样式转换为HTML文档的步骤是:先用XML解释器将XML文档解释成DOM对象,相当于建立了原文档的一个节点树。然后用XML解释器解释XSL文档,用模板匹配的方法去遍历XML节点树,将树中的节点按模板的设定转换为模板指示的显示语言,即HTML语言。

要了解这段程序,就要先了解模板。xsl:template是模板元素,用于定义模板,通常每个xsl:template有一个节点匹配属性,由”match=”指定。在对模板进行匹配时使用”xsl:apply-templates”,用”select”属性选择要匹配的模板,相当于一个调用的过程。比如在
<xsl:apply-templates select=”学生花名册”/>
这段语句中用到了xsl:apply-templates,于是系统就跳到了用<xsl:template match=”学生花名册”>括起的“函数”中生成HTML代码。

如果在xsl:apply-templates语句中没有指定select属性,那么就调用所有可以调用的模板。

接着介绍xslt常用的几条语句。

  • 介绍一下XSL的几条主要语句:
  • xsl:stylesheet 声明语句
  • xsl:for-each select = “” 循环语句,遍历与引号中的属性值相同的节点
  • xsl:value-of select = “” 赋值语句,取出引号中指定的属性值

分析XSLT代码执行过程

在作过XML声明和XSL声明之后,系统最先匹配XML源树的根节点。根节点用”/”表示,它的匹配方法在一对<xsl:template match=”/”>括起的源码中声明。按照这段代码,首先生成带有样式信息的HTML文档的开头一段代码:

 <HTML> 
  <HEAD> 
    <TITLE>学生花名册</TITLE> 
    <STYLE> .title{font-size:15pt; font-weight:bold; color:blue }
	.name{color:red}
    </STYLE> 
  </HEAD> 
  <BODY> 
    <P class="title" >学生花名册</P>  

 

接着,系统看到了<xsl:apply-templates select=”学生花名册”/>的指示,于是,它在XML源树中寻找标记为“学生花名册”的节点进行匹配。就象函数调用一样,现在系统跳到了用<xsl:template match=”学生花名册”>括起的“函数”中继续生成下面的 HTML代码:

  <table BORDER="1"> 
     <THEAD> 
       <td> <B>姓名</B> </td>
       <td> <B>籍贯</B> </td> 
       <td> <B>年龄</B> </td> 
       <td> <B>电话</B> </td> 
      </THEAD> 

 

现在,系统又接到了新的指示 <xsl:for-each select=”学生” order-by=”名字”>。这条指示要求系统寻找标记为“student”的子节点,并按照“名字”下的内容将这些节点排序,然后一一处理。

对于每一个“学生”子树中的内容,系统为其生成表中一行的内容。每一行包含四列,分别把标记为“名字”、“籍贯”、“年龄”、“电话号码”的子节点的内容填进去。其中“名字”下的内容还是粗体显示。对应到本例中的XML数据,生成的HTML代码为:

    <tr> 
      <td><B>李华</B></td> 
      <td>河北</td> 
      <td>15</td> 
      <td>62875555</td> 
    </tr> 
    <tr> 
      <td><B>张三</B></td> 
      <td>北京</td> 
      <td>14</td> 
      <td>82873425</td> 
    </tr>

 

处理完<xsl:for-each select=”学生” order-by=”名字”>中的内容,系统继续生成HTML代码:

</table> 

 

至此,系统已处理完<xsl:template match=”学生花名册”>中的所有内容,可以“函数返回”了。系统返回到<xsl:template match=”/”>括起的源码中,完成HTML最后两行代码的生成:

	</BODY>
	</HTML> 

 

把上面的HTML代码串起来,就是生成的转换结果文件。


XSLT文件文档结构

前面说过,XSLT文档本身是XML文档,因此文档的第一句自然是:

< xml version="1.0" encoding="gb2312" > 

 

接下来是样式单部分:

  <xsl:stylesheet version="1.0" 
       xmlns:xsl="http://www.w3.org/tr/WD-xsl">
	... ...
  </xsl:stylesheet>

 

xmlns:xsl指示了XSL的命名空间,在XSLT标准中,定义了XSLT的命名空间为 http://www.w3.org/1999/XSL/transform,然而在ie5中不支持这个名字空间,需要用到微软自己的名字空间http://www.w3.org/tr/WD-xsl。

XSLT在进行转换时,首先遍历XML源文档树,找到要处理的节点,然后将定义好的模板信息施加到该节点中。
下面将要介绍xslt样式单的语法。


样式单模板xsl:template

xsl:template元素有一个mode属性,可以根据需要去匹配不同模式的模板。若将前例作如下修改:

	<xsl:template match="/" mode="blue"> 
		...
	<TITLE>学生花名册</TITLE> 
	<STYLE> .title{font-size:15pt; font-weight:bold; color:blue }
		...
	<xsl:template match="/" mode="red"> 
		...
	<TITLE>学生花名册</TITLE> 
	<STYLE> .title{font-size:15pt; font-weight:bold; color:red }

 

如果要将TITLE输出为蓝色,则用下面语句匹配:
<xsl:apply-templates select=”/” mode=”blue”/>

如果要将title输出为红色,则写为:
<xsl:apply-templates select=”/” mode=”red”/>

此外,模板总是与节点相对应的,一个节点可能对应于不同的模板,那么如何确定各模板匹配的先后次序呢?XSLT中可为xsl:template设置优先级,写法是:
<xsl:template match=”student” priority=”n”> //n为优先级数


xsl:value-of计算节点值

在使用XSLT进行转换时,常常需要获取节点值,使用xsl:value-of元素可达到这个目的,如下例:
<xsl:value-of select=”籍贯”/>

得到的是学生原籍的值,select属性指定要获取的是哪一个节点的节点值。


xsl:for-each循环处理

使用xsl:for-each可对所选节点依次进行处理,如例中在生成表格处理中,就是利用循环将各个学生的信息取出放入表格中的,写法是:

	<xsl:for-each select="student" order-by="name"> 
		... 
	</xsl:for-each> 

 

可以认为<xsl:for-each select=””>能实现多个 <xsl:apply-templates select=””>的功能。


xsl:sort排序处理

对于用xsl:for-each或xsl:apply-templates匹配的节点,可使用xsl:sort将所选节点内容进行排序

  1. 按大小写排序
    <xsl:sort case-order=”upper-first” select=”@id”/> 以id为关键字按大写优先排序
    <xsl:sort case-order=”lower-first” select=”@id”/> 以id为关键字按小写优先排序
  2. 按字母顺序排序
    <xsl:sort order=”ascending” select=”@id “/> 以id为关键字按字母升序排序
    <xsl:sort order=”descending” select=”@id “/> 以id为关键字按字母降序排序
  3. 按数据类型排序
    <xsl:sort data-type=”text” select=”@id”/> 以id为关键字按文本类型排序,如对于一组id数据101,2,44,305 来说,排序结果是101,2,305,44
    <xsl:sort data-type=”number” select=”@id”/> 以id为关键字按数据类型排序,上面一组数据的排序结果是2,44,101,305
    另外,还有一种指定排序的方法,就是在前面学生花名册例中所使用的order-by: <xsl:for-each select=”student” order-by=”name”> 也可使得输出学生时按名字排序。

元素与属性创建

XSLT是一个动态的样式单,在处理过程中可产生新的元素或元素属性,方法如下:

内 容 元 素 举 例 转换结果
创建元素 xsl:element <xsl:element name=”TITLE”>学生花名册</xsl:element> 学生花名册
创建属性 xsl: attribute <TITLE><xsl:attribute name=”style”>color:blue </xsl:attribute>学生花名册</TITLE > <TITLE style=”color:blue”>学生花名册</TITLE>
创建文本 xsl:text (可以保护文本中的空白字符) <xsl:text> 这是学生花名册 </xsl:text > 这是学生花名册
创建处理指令 xsl:processing-instruction <xsl:processing-instruction name=”xml-stylesheet”> href=”book.css” type=”text/css” </xsl:processing-instruction> < xml-stylesheet href=”book.css” type=”text/css” >
创建注释 xsl:comment <xsl:comment> 以下是学生花名册,请勿删改! </xsl:comment> <!– 以下是学生花名册,请勿删改!–>

节点拷贝

在对XML文档进行处理时,XSLT还可以通过拷贝的方式复制节点,方法是利用 xsl:copy和xsl:copy-of。其中xsl:copy只拷贝当前节点,不包括子节点和属性;而xsl:copy-of的拷贝内容则包括当前节点、子节点和属性。例如对于:
<p id=”p1″>A <B>is a char</B> </p>

如果样式单写为如下形式:

	<xsl:stylesheet version="1.0" 
	xmlns:xsl="http://www.w3.org/1999/XSL/transform"> 
	<xsl:template match="p"> 
	  <DIV>
		<xsl:text> copy-of : </xsl:text> 
		<xsl:copy-of select="."/> 
	  </DIV> 
	  <DIV>
		<xsl:text> copy : </xsl:text> 
		<xsl:copy/> 
	  </DIV> 
	</xsl:template> 
	</xsl:stylesheet> 

 

转换后生成如下代码:

	<DIV> 
	  copy-of : <p id="p1">A <B>is a char</B> </p>
	</DIV>
	<DIV> 
	  copy : <p/>
	</DIV> 

 

由此可见,两种拷贝方式结果大相径庭。


输出格式与编码问题

XSLT是一个转换语言,它的目的是将XML源文档转换为另一种格式文档,它的输出结果可以是HTML文档,也可以是带CSS的XML文档。具体的输出格式由xsl:output 指定。如果要输出为HTML文档,则写为: <xsl:output method=”html”/>

同样,要输出XML文档写为: <xsl:output method=”xml”/>

如果文档中不出现xsl:output,将缺省输出为XML文档,但如果在匹配模板时使用了 <HTML>标记,则输出为HTML文档。输出为HTML文档时系统都会自动加上下面语句: <!DOCTYPE html PUBLIC “-//W3C//Dtd HTML 4.0 transitional//EN”>

此外,还可以利用xsl:output指定编码方式,如UTF-8,UTF-16,GB2312等。例如: <xsl:output method=”html” encoding=”GB2312″/> 它指定了该XSLT的输出结果是HTML格式,编码方式为中文。

<!– CMA ID: 162351 –><!– Site ID: 10 –><!– XSLT stylesheet used to transform this file: dw-article-6.0-beta.xsl –>

以上例子,个人感觉有点问题,现给一个我已经调通了的例子,首先是XML文件:

 

< xml version="1.0" encoding="gb2312" >
< xml-stylesheet type="text/xsl" href="myStyle.xsl"  > 

<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>

  <cd>
    <title>my Test</title>
    <artist>xiaoxin</artist>
    <country>CHINA</country>
    <company>CXT</company>
    <price>10.90</price>
    <year>1983</year>
  </cd>
  
</catalog>

 

 

然后,给出一个对应的样式文件,命名myStyle.xsl,注意:该文件和上面的XML文件放在同一个目录下。

< xml version="1.0" encoding="gb2312" >
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!-- 深入学习XSL的网址:http://www.w3school.com.cn/xsl/xsl_for_each.asp -->

<xsl:template match="/">
  <html>
  <body>
    <h2>My CD Collection</h2>
    <table border="1">
      <tr bgcolor="#9acd32">
        <th>Title</th>
        <th>Artist</th>
      </tr>
      <xsl:for-each select="catalog/cd">
      <tr>
        <td><xsl:value-of select="title"/></td>
        <td><xsl:value-of select="artist"/></td>
      </tr>
      </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

 

最后,在浏览器上打开以上XML文件,则可看出经过样式修饰的页面。

 

样式深入学习网址:http://www.w3school.com.cn/xsl/xsl_for_each.asp

td中的nowrap

转载自:http://www.zzlabs.com.cn/
本文解释了nowrap是什么意思,以及在td中nowrap的使用,并提供了一个详细的完整代码来具体演示教学。

nowrap是什么意思

HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。
但使用时要注意的是,td元素noWrap属性的行为与td元素的width属性有关。td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。

nowrap详细解说
nowrap表示是否允许表格中的文本换行
nowrap=true的时候不能换行
nowrap=false可以换行

nowrap实例演示

 

<html>
<head>
<title>wrap属性研究</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p>测试字符串:</p>
<p>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</p>
<p>单元格未设置nowrap属性的空表:</p>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>
<p>加入测试字符串:</p>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>
</tr>
</table>
<p>单元格设置了nowrap属性,未设置width属性:</p>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td nowrap>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>
</tr>
</table>
<p>单元格设置了nowrap属性,也设置了width属性:</p>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="120" nowrap>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

补存1
在css中控制强制换行或不换行的写法为:
语法:
white-space : normal | pre | nowrap |inherit
取值:
normal   : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre   : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap   : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

补存2

网页设计排版的时候遇到了这样一个问题,就是我的网页是分块的,每块有不同的内容,今天发现,有块输入内容时,把别的块都撑的不成样子了,下面列出来的是我通过baidu检索的解决方案,现摘录到这里,方便以后查阅!

强制不换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行
div{
word-break:break-all;
}


CSS设置不转行:
overflow:hidden 隐藏
white-space:normal 默认
              pre 换行和其他空白字符都将受到保护
              nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
设置强行换行:
word-break:
            normal: 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
            break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
            keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行
    CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果
建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。
示例:
div {word-break : break-all; }

下面的是多浏览器支持CSS 容器内容超出(溢出)支持自动换行完美代码
<style type="text/css">
.linebr {
clear: both; /* 清除左右浮动 */
width: 100px; /* 必须定义宽度 */
word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}

virtualboxsharefolderusage

today,i finally find how to use share folder with the virtual os is windows,you should open the network neighbor,double click virtualbox newwork,in this folder there is a folder named //Vboxsvr

<style type=”text/css”> p, li { white-space: pre-wrap; } </style>

<!–StartFragment–>Then, you can mount the shared folder from inside a VM the same way as you would mount an ordinary network share:

  • In a Windows guest, starting with VirtualBox 1.5.0, shared folders are browseable and are therefore visible in Windows Explorer. So, to attach the host’s shared folder to your Windows guest, open Windows Explorer and look for it under “My Networking Places” -> “Entire Network” -> “VirtualBox Shared Folders”. By right-clicking on a shared folder and selecting “Map network drive” from the menu that pops up, you can assign a drive letter to that shared folder.
  • Alternatively, on the Windows command line, use the following:

<span style="font-family: 'Courier New,courier';">net use x: \\vboxsvr\sharename</span>

While vboxsvr is a fixed name (note that vboxsrv would also work), replace “x:” with the drive letter that you want to use for the share, and sharename with the share name specified with VBoxManage.

  • In a Linux guest, use the following command:
  • <span style="font-family: 'Courier New,courier';">mount -t vboxsf [-o OPTIONS] sharename mountpoint</span><!--EndFragment-->

    博客网址

    全面认识Flex六大要素

      在学习Flex应用程序的过程中,Flex应用程序的组成元素是必须要掌握的知识,这里和大家分享一下,一个典型的Flex应用程序包括六大元素,请看下文详细介绍。

      Flex是如何工作的

      该部分文档的内容是为用户提供关于Adobe Flex工作机制的一个快速综述。通过本章节的学习,你可以创建你的第一个Flex应用程序,并将它与你以前所熟悉的Web开发技术进行比较,以领会Flex的内涵和精髓。

      一个典型的Flex应用程序包括元素:

      1.Flexframework

      Adobe Flex2framework包含了创建RIA所需要的所有组件,它们是:用于应用程序布局规划的容器;针对用户界面和从用户处获取数据的控制(例如文本框和按钮);广泛支持的数据绑定、数据格式化、以及有效值验证;事件驱动的开发模式。Flexframework被包含在公用组件库(SWC)文件中。

      2.MXML

      每个Flex应用程序至少包含有一个MXML文件,它被作为该程序的主文件。MXML是一种标记语言,它是基于XML的一种实现,用来创建Flex应用程序。你可以使用它去声明程序中所使用的标签结构的定义。

      3.ActionScript3.0

      你可以使用ActionScript3.0为应用程序添加动态行为,它是基于ECMAScript的一种实现,类似于JavaScript。你可以将ActionScript作为一个脚本块,在MXML文件中直接进行添加;或者创建一个单独的ActionScript文件,然后将它们导入到MXML文件中。

      4.CSS

      你可以通过设置组件的属性(properties)来改变组件(按钮、列表框等)的视觉样式。
      例如,按钮组件有一个fontFamily属性,你可以使用它来进行字体的设置。样式的属性通常有四种方法来进行控制:通过主题(theme);在CSS文件中进行定义;在MXML文件中的样式块中进行定义;在组件的实例中进行设置。

      5.图形资源

      与很多Flex应用程序一样,Flex包含了各种各样的图形资源,如图标和图象。

      6.数据

      一些组件被使用来进行数据显示(combobox或者datagrid)的工作。同时,你还可以使用各种方式来将这些组件与数据联系起来,如使用数组、收集对象、数据模型、以及外部XML数据资源,等等。

      转自51CTO

    css样式教程8、CSS的Class以及ID选择器

    前面的学习我们仅仅使用HTML选择器(在HTML页面里为html标签,如P)
      现在我们学习使用clss和id定义属于自己的选择器。
      这样,同样的html元素可以通过class或ID使用不同的表现。
      在CSS里,使用点号(.)创建class选择器,使用hash符号(#)创建ID选择器。
      例子:

    程序代码 程序代码
    #top{
    background-color:#ccc;
    padding:1em
    }

    .intro{
    color:red;
    font-weight:bold;
    }

      html页面通过id和class属性调用CSS,像下面这样:

    程序代码 程序代码
    <divid=”top”>
    <h1>Chocolatecurry</h1>
    <pclass=”intro”>Thisismyrecipeformakingcurrypurelywithchocolate</p>
    <pclass=”intro”>Mmmmmmmmmm</p>
    </div>

      id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用。
      同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素,比如p.jam{值}将作用到带有’jam’class属性的段落。

    FF下使用CSS3实现圆角效果

        以前在页面上实现圆角效果的时候,一直使用的是圆角背景图片来实现.当 OpenCms官方网站 改版以后,也有了好看的圆角效果.
       
        不过发现也是使用了圆角背景图片.

        而我在使用 OpenCms 的时候发现,在页面发生错误的时候,错误页面上竟然也是圆角效果.如下这样:

        而这里的效果,发现是用 CSS 实现的呢.于是把这里的 CSS 代码拿到别的地方,修改参数,就看到了如下效果:
       
        这样看起来是不是比那个方方正正的角看起来舒服多了呢  🙂

        实现这个效果的代码如下:
            border-radius: 20px;
            -moz-border-radius: 20px;
        查看了 W3C 的文档,看到解释如下:

    ========================================
    The ‘border-radius’
    properties

    Name:

    border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius

    Value:

    <length> <length> 

    Initial:

    0

    Applies to:

    all elements, except table element when ‘border-collapse’ is ‘collapse’

    Inherited:

    no

    Percentages:

    N/A

    Media:

    visual

    Computed value:

    specified values

    The two length values of the ‘border-radius’ properties define the radii
    of a quarter ellipse that defines the shape of the corner (see the diagram
    below). The first value is the horizontal radius (or vertical if the ‘writing-mode’ is
    vertical). If the second length is omitted it is equal to the first (and the
    corner is thus a quarter circle). If either length is zero, the corner is
    square, not rounded. The border radius also causes the element’s background
    to be rounded, even if the border is ‘none’.
    Negative values are not allowed.

    Diagram of the inscribed ellips

    The two values of ‘border-top-left-radius’ define the
    curvature of the corner.

    All border styles (‘solid’,
    ‘dotted’, ‘inset’, etc.) follow the curve of the border.
    Border images specified with ‘border-image’, however, are clipped at the
    outer edge of the curve. Or are they not affected at
    all 

    ========================================

        很有意思,看来随着 CSS 的发展,是越来越细化了.看来以后很多效果都会有更好的实现方式了.

        不过不好的消息就是,据说这个效果只是在支持最新的 CSS 的浏览器上才有.否则嘛,这个属性和没有设置是一样的,譬如说刚才看到的圆角效果,在 IE6 下看到就依然是直愣愣的:
       
        总之,不知道浏览器的标准什么时候才能统一.这样的话,开发的时候就不会为了兼容性费脑筋了.祈祷吧…

    CSShack

     什么是CSS hack
    来源:http://www.div-css.com
    什么是CSS hack

    由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

    这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

    这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

    CSS Hack的原理是什么 
    由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

    比如 IE6能识别下划线_和星号*,IE7能识别星号*,当不能识别下划线_,而firefox两个都不能认识。等等

    书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
    如何写CSS Hack

    比如要分辨IE6和firefox两种浏览器,可以这样写:

       1. <style> 
       2. div{ 
       3.     background:green; /* for firefox */ 
       4.     *background:red;  /* for IE6 */ 
       5. } 
       6. </style> 
       7. <div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div> 

    <style> div{ background:green; /* for firefox */ *background:red; /* for IE6 */ } </style> <div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>

    解释一下:
    上面的css在firefox中,它是认识不了后面的那个带星号*的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
    在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。

    CSS hack:区分IE6,IE7,firefox
    区别不同浏览器,CSS hack写法:

    区别IE6与FF:
           background:orange;*background:blue;

    区别IE6与IE7:
           background:green !important;background:blue;

    区别IE7与FF:
           background:orange; *background:green;

    区别FF,IE7,IE6:
           background:orange;*background:green !important;*background:blue;

    注:IE都能识别*;标准浏览器(如FF)不能识别*;
    IE6能识别*,但不能识别 !important,
    IE7能识别*,也能识别!important;
    FF不能识别*,但能识别!important;

     IE6  IE7  FF
    *  √  √  ×
    !important  ×  √  √

    另外再补充一个,下划线”_”,
    IE6支持下划线,IE7和firefox均不支持下划线。

    于是大家还可以这样来区分IE6,IE7,firefox
    : background:orange;*background:green;_background:blue;

    注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

    9、CreatingLinks

    1、链接地址分三种:absolute/document relative/site-root relative。absolute链接包括协义、域名全路径。document relative是以../、文件夹名、文件名开头,路径相对于当前页面。site-root relate是以/开头的相对于应用根路径。

     

    2、在dw中可以从insert面版或菜单insert中插入hyper link。另外也可以选中文本后在属性面版点击html标签栏后填写link地址,这样会自动把文字转化为link。

     

    3、在图片中以alt,在a标签中以title显视提示信息。

     

    4、地图搜索引擎搜索某地址后,在地图上方一般有一个link的按钮或链接,点击后会弹出url/frame。此时复制到你的网页中即可显视地图。

     

    5、符号#+元素ID出现在链接后叫描(anchor)。用户点击后会导航到该链接地址并滚动页面到该ID的元素处。该ID可以为任意元素的ID,也可以是一个拥有id和name属性,但没有href属性的a元素。

     

    6、在css中定义伪类时要注意顺序,:lover必需位于:link/:visited之后。