新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> 本版讨论XSL,XSLT,XSL-FO,CSS等技术
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - XML技术『 XSL/XSLT/XSL-FO/CSS 』 → 书写CSS样式表来浏览XML文档 <转> 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 3673 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子 浏览下一篇主题
     * 贴子主题: 书写CSS样式表来浏览XML文档 <转> 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     宇宙人 帅哥哟,离线,有人找我吗?狮子座1981-8-20
      
      
      威望:4
      等级:大一新生
      文章:96
      积分:771
      门派:W3CHINA.ORG
      注册:2004/4/22

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给宇宙人发送一个短消息 把宇宙人加入好友 查看宇宙人的个人资料 搜索宇宙人在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 引用回复这个贴子 回复这个贴子 查看宇宙人的博客楼主
    发贴心情 书写CSS样式表来浏览XML文档 <转>

    下面的这个XML样例文档描述了一个饭店的考核评审.它包含了一些特定的章节对这
    个考核评审的不同类型的重要信息进行了描述.第一节包含了在一个名为
    r"restaurant"的元素重并提供了关于饭店的名称,地址,电话.第二节是"review"元
    素包含了考核的数据,考核人的名字,考核日期,得到的星数.第三节是考核的主体以
    及最后一节是一个饭店的菜单的摘要.

    <?xml version='1.0'?>
    <story>
    <restaurant>
    <name>Red Apple Inn</name>
    <address>
    <street>3100 Longview Lane</street>
    <city>Palabro</city>
    <state>Wyoming</state>
    </address>
    <phone>123-555-1212</phone>
    </restaurant>

    <review>
    <rating stars="4">****</rating>
    <date>December 29, 1998</date>
    <reviewer><person>Louis Framptenheimer</person></reviewer>
    </review>

    <body>
    <p><summary>The small town of <city>Palabro</city> seems like
    an unlikely place for a high-class culinary establishment, but
    the <self>Red Apple Inn's</self> Chef <person>Alex
    Choperoni</person> is earning a national reputation for innovative
    dishes.</summary> And rightly so, if this reviewer's recent
    culinary experience is any example.</p>

    <p>Within striking distance from the ski slopes at <city>Jackson
    Hole</city>, the <self>Red Apple Inn</self> is a completely
    restored Victorian hotel, and offers a warm and elegant atmosphere
    and
    gracious service. The upscale clientele includes regular
    appearances by movie stars <person>Drew Barrymore</person> and
    <person>Matthew Broderick</person>. Reservations are a must, and
    during the ski season it is not uncommon for the dining room to
    be booked solid six weeks in advance.</p>

    <p>It is hard to go wrong with a menu this packed with interesting
    choices. The crab cakes are especially fine with a thin crisp
    crust that opens with a gentle prod of a fork to reveal a light,
    moist, almost mousse-like interior with a rich nutty flavor.</p>

    <p>The <self>Red Apple Inn</self> boasts one of the finest wine
    cellars in the region. None of the dishes we sampled were less
    than
    outstanding. Here are a few of the selections from the daily menu.
    </p>
    </body>

    <menu>
    <appetizer>
    <description>Crab cakes with a creamy dill sauce served with
    crispy
    herbed daikon fries</description>
    <price>$23</price>
    </appetizer>
    <entree>
    <description>Braised jumbo sea scallops on a tomato beurre
    blanc</description>
    <price>$39</price>
    </entree>
    <entree>
    <description>Free-range chicken breast stuffed with morels in a
    brandy/green-peppercorn sauce</description>
    <price>$31</price>
    </entree>
    <entree>
    <description>Tarragon roast pork loin on a bed of ginger apple
    slaw
    and caramelized onions</description>
    <price>$34</price>
    </entree>
    </menu>

    </story>
    注意在这篇文当中的XML标记很少涉及到处理数据描述.没有任何关于格局排列,字
    符或则颜色的设定.这些信息会在样式表中传达.

    在 使用CSS 这篇文章中涵盖了怎样为一个HTML书写一个CSS样式表.这些样式增加
    或者重载了HTML中的默认的内建格式动作.对于XML,默认的格式动作为"display:
    inline.在书写XML的样式表的首要任务是对于大多数的元素设定display 属性为
    "block"或"none"

    下面显示了你如何开始为饭店考核的样例生成CSS的步骤.这个样式表为主要的小节
    指定了display属性为"block".

    story { display: block; }
    restaurant { display: block; }
    review { display: block; }
    body { display: block; }
    menu { display: block; }
    将它保存为 review.css.现在我们在XML文档的开的开始部分(在story元素之前)加
    入样式表指令以便它能定位到我们新建的样式表.

    <?xml-stylesheet type="text/css" href="review.css" ?>
    基于这样一个指针,当我们在一个浏览其中打开一个XML文档的时候将提供一个最基
    本的显示模式.附加的CSS属性能增强这些规则, 对于残留的XML元素将生成新增的
    规则.下面是一个菜单属性的和它的子属性的样式规则的增强集.

    menu
    {
    display: block;
    border: 2px solid black;
    padding: 1em;
    background-color: #888833;
    color: #FFFFDD;
    font-family: Times, serif;
    font-style: italic;
    text-align: center;
    }

    appetizer
    {
    display: block;
    margin-bottom: .4em;
    }

    entree
    {
    display: block;
    margin-bottom: .4em;
    }

    price
    {
    display: inline;
    font-weight: bold;
    font-style: normal;
    }

    description
    {
    display: inline;
    }
    为了完成这个样式表,附加的规则必须加入,以操纵在原文档的中的残留元素.

    在CSS中使用命名域

    当使用一个附加CSS样式表的XML的时候,名域(Namespaces)必须在文档元素中定义
    .局部范围的名域(Namespaces)会被正确的解析,但是CSS并没有提供一个解决名域
    前缀问题的机制,因此CSS规则在局部范围的名域中不能准确的与元素相对应.把所
    有的名域放在文档元素上申明,确保他们都是全局的;这样就不会有前缀的冲突.默
    认的名域不能被使用;所有带名域的元素必须有一个直接的前缀.另外,CSS选择器能
    够只通过前缀选定带名域的元素,因此前缀在XML和样式表中必须一致.

    下面是一个元素带有'HTML'前缀的样式表:

    HTML\:IMG {
    border: 2px solid black;
    }

    HTML\:A:visited HTML\:IMG {
    border-color: grey;
    }

    HTML\:A:active HTML\:IMG {
    border-color: red;
    }

    HTML\:A:link HTML\:IMG {
    border-color: blue;
    }
    注意 ":"这个命名域字符必须在前有一个"\"才能与一个pseudoclass区别开来

    使用HTML命名域(Namesapce)

    在用CSS浏览XML的时候HTML的Namespace必须特殊对待.HTML命名域中的元素将按照
    他们在HTML中的格式显示.这久允许访问那些没有赋予CSS的能力.例如一些很有用
    的HTML嵌入元素是 <TABLE>, , , <SCRIPT>, and <STYLE>.

    <story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional>
    ...
    <restaurant>
    <name>Red Apple Inn</name>
    <logo>
    <HTML:A href="javascript:alert('Visit the Red Apple Inn!')">
    <HTML:IMG src="red-apple.gif" height="50" width="200"/>
    </HTML:A>
    </logo>
    ...
    注意:在 Microsoft? Internet Explorer 5中的前缀必须保留"HTML"或者"html"以
    便解释HTML元素.

    <HTML:STYLE> 区,能被用于在XML文当中嵌入一个CSS样式表.这个区能加强任何用
    样式表指令指向的样式表.档没有一个可扩展样式表的时候,必须仍有一个样式表指
    令来指明XML文档是用CSS样式表,甚至可以没有"href"属性.

    下面的样例展示了如何使用HTML命名域将review.css嵌入到XMl文当中去,<HTML:
    STYLE>和样式表指令没有"href"属性.

    <?xml version="1.0"?>
    <?xml-stylesheet type="text/css"?>
    <story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional>
    <HTML:STYLE>
    story
    {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    width: 30em;
    }

    restaurant
    {
    display: block;
    padding: 1.2em;
    font-size: x-small;
    margin-bottom: 1em;
    }
    ...
    </HTML:STYLE>
    <restaurant>
    ...


       收藏   分享  
    顶(0)
      




    ----------------------------------------------
    对工作,我投入;对爱情,我专一。

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/5/27 12:50:00
     
     GoogleAdSense狮子座1981-8-20
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 XSL/XSLT/XSL-FO/CSS 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/5/12 23:45:31

    本主题贴数1,分页: [1]

    管理选项修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告
    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    62.500ms