XML学习笔记（二）xml与css

来源：互联网发布：怎样读古书知乎编辑：程序博客网时间：2024/05/21 00:15

1..........CSS定議節點的方法:小鞋.xml
----------------------------------------------------------------
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="1.css"?>這裏如果你連接不同的樣式表請修改.
<books>
   <book>
      <author>lisongtao</author>
      <name>the application of ASP</name>
   </book>
</books>
---------------------------------------------------------
1.css        顯示結果:BOOK節點的字的樣式,背景浅蓝色
-----------------------------------------------------------
books
{
   display:block;
}
book
{
   display:block;
   background-color:#aabbcc
}

---------------------------------------------
心得:以上的定义方法和重定义HTML的标签样式一样,如对CSS不熟者,推荐用DW生成后再对应一下效果.很易就可以学会的.

样式类的定义XML显示方法.
小鞋.xml
---------------------------------------------------------
<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="3.css"?>
<list class="listclass">
<sublist class="listsmall">lisongtao</sublist>
<sublist>zhongguo</sublist>
</list>
----------------------------------------------------------
3.css
.listclass {color: red; font-size:26pt}
.listsmall {color:blue; font-size:15pt}

类的ID引用样式方法.
小鞋.xml
------------------------------------
<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="ID.css"?>
<school>
<class id="list">lisongtao</class>
<monitor id="list1">lisongtao</monitor>
</school>
---------------------------------
ID.CSS
--------------------------------------------------
#list {font-size:28pt; color:red; display: block}
#list1 {font-size:14pt; color:blue display: block }

在XML中直接使用CSS的方法
<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="sevil.txt"?>
<FOO STYLE="font-weight: bold;color:red">
Hello XML!
</FOO>
中文名字在这里也可以，需要在第一行加入encoding="gb2312"

在一个样式表中合并引用另一个样式表的方法
@import url("sevil.css");

用CSS定制个节点的块状显示
XML.XML
--------------------------------------------------------------------------------
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="CSS.css"?>
<books xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
<HTML:style>
    books
    {
     display:block;
     width:30em;
    }
</HTML:style>
   <book>
         <author>list </author>
         <name> ASP及其应用</name>
         <publisher>Tsinghua University</publisher>
         <price>12.30</price>
   </book>
   <book>
         <author>James </author>
         <name> XML及其应用</name>
         <publisher>Tsinghua University</publisher>
         <price>15.30</price>
   </book>
   <book>
         <author>John </author>
         <name> CSS及其应用</name>
         <publisher>Peiking University</publisher>
         <price>16.30</price>
   </book>
</books>
---------------------------------------------------------------
CSS.CSS
---------------------------------------------------------------
book
    {
      display:block;
      background-color:#AABBCC;
      padding:1.2em;
      margin-bottom:1em;
    }
    author
    {
      display:block;
      font-size:16pt;
      color:red;
    }

在同一个XML文件内引用多个CSS样式表的方法
<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="1.css"?>
<?xml-stylesheet type="text/css" href="2.css"?>

在XML中使用HTML标记的方法,例插入图片
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"?>
<books xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
   <book>
         <author>list </author>
         <name> ASP及其应用</name>
         <publisher>Tsinghua University</publisher>
         <price>12.30</price>
         <HTML:img src="suzh1.jpg" />
   </book>
</books>

在XML中使用HTML标记的方法(2),使用超连接
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"?>
<books xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
   <book>
         <author>list </author>
         <name> ASP及其应用</name>
         <publisher>Tsinghua University</publisher>
         <price>12.30</price>
         <from><HTML:a href="http://www.263.net">263中国在线</HTML:a></from>
   </book>
</books>

在XML中使用HTML标记(3),使用<BR><p>等标记
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"?>
<books xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
   <book>
         <HTML:P>
         <author>list </author>
         </HTML:P>
         <name> ASP及其应用</name>
         <publisher>Tsinghua University</publisher>
         <HTML:br/>
         <price>12.30</price>
   </book>
</books>

在XML中使用HTML标记的方法(4),使用表格标签
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"?>
<books xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
   <book>
<HTML:TABLE border="1.0" align="center">
   <HTML:TR>
       <HTML:TD>LIST</HTML:TD>
      <HTML:TD>ASP PROGRAMING</HTML:TD>
      <HTML:TD>TSINGHUA UNIVERSITY</HTML:TD>
   </HTML:TR>
</HTML:TABLE>
   </book>
</books>

在XML中使用HTML标记的方法(5),使用表单
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"?>
<books xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
   <book>
   <HTML:TABLE border="0" align="center">
   <HTML:TR>
      <HTML:TD>NAME</HTML:TD>
      <HTML:TD><HTML:INPUT TYPE="TEXT"/></HTML:TD>
   </HTML:TR>
   <HTML:TR>
    <HTML:TD>NAME</HTML:TD>
    <HTML:TD><HTML:INPUT TYPE="TEXT"/></HTML:TD>
   </HTML:TR>
   <HTML:TR>
      <HTML:TD>NAME</HTML:TD>
      <HTML:TD><HTML:INPUT TYPE="TEXT"/></HTML:TD>
   </HTML:TR>
   </HTML:TABLE>
<HTML:CENTER>
   <HTML:INPUT TYPE="SUBMIT"/>
   <HTML:INPUT TYPE="RESET"/>
</HTML:CENTER>
   </book>
</books>

在XML中使用HTML标记的方法(6),使用JS脚本
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"?>
<books xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
<HTML:SCRIPT language="JavaScript">
var fRunning = 0
function startTrans()
{
if (fRunning == 0)
{
fRunning = 1
SampleID.filters.revealTrans.Apply();
SampleID.src = "suzh1.jpg";
SampleID.filters.revealTrans.Play()
}
else
{
fRunning = 0
SampleID.filters.revealTrans.Apply();
SampleID.src = "suzh2.jpg";
SampleID.filters.revealTrans.Play()
}
}
</HTML:SCRIPT>
<HTML:IMG id="SampleID" src="suzh2.jpg" width="200" height="200" style="filter:revealTrans(duration=3)" onclick="startTrans()" />
<HTML:BR />
Click image for Transition Filter: Blend
</books>

总结:其实在XML里面调用CSS来显示统一的样式很简单,主要通过一个
<?xml-stylesheet type="text/css" href="1.css"?>
这样的方法来联系起来.最好能先学学CSS的语法这样对大家很有好处.如果不太会的话,也可以用DW来自动生成CSS样式表后再联起来.呵.

致于调用HTML标记可以用<HTML:标记>这样的方法来实现.但一定要注意记他合乎XML的规则就行了.

books是文档元素（Document Element）,
xmlns:HTML = "..." 的存在和books没有必然关系。其作用是声明命名空间前缀HTML

以下是引用cool-co在2004-8-23 5:56:46的发言：
我想问一下，如果我的是这样的，应该怎么加？
test.asp
<Club>
        <Info>
              <CssPath>http://127.0.0.1/Css</CssPath>
        </Info>
</Club>
如果我要连接1.css应该怎么连接？谢谢，我刚学xml,对这个很感兴趣。

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css"?>
<Club xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
        <Info>
              <CssPath><HTML:a href="http://127.0.0.1/Css">http://127.0.0.1/Css</HTML:a></CssPath>
        </Info>
</Club>

应该是这样的吧?不知对不对?
<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css" href="http://127.0.0.1/Css"?>
<Club xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
         <Info>
               <CssPath><内容></CssPath>
         </Info>
</Club>