手机站
扫一扫访问手机站
学习笔记,脚本工具,源码下载

口号
当前位置:首页 > WEB前端 > XML/XSLT > 正文

XML入门教程:CSS样式表-XML/XSLT

发布时间:2018-04-14 23:40:59   


样式表可帮我们解释XML文档中各元素的具体意思,所以通过样式表可直接在浏览器上显示XML文档。在XML文档在序言部分通过xml-stylesheet处理指令可指定关联的样式表。xml-stylesheet指令必须有一个href属性和type属性。href指向样式表的URL,type指定样式表的MIME类型:对
样式表可帮我们解释XML文档中各元素的具体意思,所以通过样式表可直接在浏览器上显示XML文档。目前主要的样式表语言有:

    CSS1(Cascading Stylesheets Level 1,层叠式样式表1)
    CSS2(Cascading Stylesheets Level 2,层叠式样式表2)
    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种可选属性:

      media,标识该样式应用于什么媒体,如报纸(paper)、计算机监视器(screen)、电视(tv)或所有(all)。
      charset,指明样式表采用字符集编码方式,如:utf-8。
      alternate,指明是否有可选的样式表,默认为no,表明是主样式表,如果为yes,则是备用样式表。
      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应用中的一个关键技术,它的作用主要体现在以下三个方面:
      本文由脚本之家(https://www.uoften.com)整理发布!转载请注明出处,谢谢!

        设计一个样式表可以应用于多个文档。样式表可以存在于XML文档外,XML文档可通过链接使用样式表。这意味着如果你有几千个文档,都可以链接到同一个样式表中,改变一个样式表等于改变几千个文档的显示效果。
        实现内容和表现的分离,增强文档的一致性和可维护性。通过单一的样式表,实现所有文档显示的一致。如果显示样式有变动,我们只需维护有限的几个样式表就可以了。
        实现一个文档,多个样式。通过样式表,可把一篇文档以HTML形式、PDF形式或文本形式显示出来。

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

          用<style>标记声明,如
          <style> div {font-size: 12pt;} div {color: blue;} </style>
          在元素中用style属性指定,如:
          <div style="font-size: 12pt;color: blue">CSS测试</div>
          用LINK标记链接一个外部CSS文件,如:
          <link rel="stylesheet" type="text/css" href="mycss.css">
          按作用域来分,有三类的样式表,分别是网页解释器样式表、作者样式表和浏览者样式表。网页解释器样式表也叫默认的样式表,当没有另外的样式表加载时使用。作者样式表就是网页设计师设计的样式表。浏览者样式表是浏览网页的用户在浏览器上另外设置的样式表。
          CSS的基本数据类型

            integer,表示整数,可取正负值。如:12,-24。
            number,表示数字,可取正负值和小数。如:12.1,-14.3。
            lenght,表示距离长度,可取正负值和小数,后跟一个单位,如:12em,12cm。单位又分相对单位和绝对单位,相对单位有:em,ex,px。绝对单位有:in(英寸),cm(公分),mm(公厘),pt(等于1/72英寸),pc(等于12pt)。
            percentage,表示百分比值,可取正负和小数。如:20%,-40%。
            uri,表示网络资源。如:https://www.ringkee.com。
            inherit参数值
            <style> body {width: 600px;} .div1 {width: 120%;} .div2 {width: inherit;} 说明: div1的宽度是600px*120% div2的宽度继承父元素body的参数,是600px
            选择符的作用是指定哪些元素使用哪些样式。选择符可以分为简单选择符和复合选择符两类,简单选择符是类型选择符、通用选择符加上零个或多个属性选择符、ID选择符、伪类等组成。复合选择符是用">"和" "号结合多个简单选择符组成。">"和" "号两边要加上空格。
            本文由脚本之家(https://www.uoften.com)整理发布!转载请注明出处,谢谢!
            下面介绍各种选择符:

              通用选择符,用"*"号表示,可用于所有标记。如:
              <style> * {font-size: 14pt;} *.EM {color: red;} </style> <div>应用字体样式</div> <em class="EM">应用红色样式</em>
              类型选择符,与标记名一样,只作用已该标记上。如:
              <style> div {font-size: 14pt;} </style> <div>应用样式</div>
              子代选择符,HTML标记是可嵌套的,子代选择符可把样式表应用于子嵌套的子标记上,如:
              <style> div p b {font-size: 14pt;} </style> <div> <p>没有应用样式</p> <p><b>应用样式</b></p> </div>
              子选择符,与子代选择符类似,但它只调用第一层子元素。如:
              <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>
              邻近选择符,当两个元素位于同一层且在位置是前后关系时,可以使用邻近选择符。两个选择符用" "号分开,如果A位于B之前,则B可应用样式。如:
              <style> div p {color: red;} </style> <div>没有应用样式</div> <p>应用红色样式。</p>
              属性选择符,HTML标记有属性,我们可为特定的属性指定样式。有四种写法,分别是:

                [属性],样式只应用于指定的属性。
                [属性=值],样式只应用于指定的属性与值都相同的情况
                [属性~=值],样式只应用于指定的属性且属性值包含指定值的情况,属性值是用空格分隔的字符串。
                [属性|=值],样式只应用于指定的属性且属性值是的第一个字符串是指定值的情况,属性值是用"-"分隔的字符串。
                <style> [href] {color: red;} A[href="https://www.ringkee.com"] {color: green;} table[summary~="table"] {color: black;} table[summary|="this-is-a-table"] {color: blue;} </style> <a href="https://www.python.org">应用红色样式</a> <a href="https://www.ringkee.com">应用绿色样式</a> <table summary~="This is a table> <tr> <td>应用黑色样式</td> </tr> </table> <table summary|="This-is-a-table> <tr> <td>应用蓝色样式</td> </tr> </table>
                类选择符,与属性选择符类似,但它只指对class属性应用样式。类选择符用"."语法,如.value与[class~=value]是一样的。
                <style> .myid {color: red;} </style> <div class="myid">应用红色样式</div>
                ID选择符,与属性选择符类似,但它只指对ID属性,用"#"语法。
                <style> #myid {color: red;} </style> <div id="myid">应用红色样式</div>
                :first-child伪类,当标记是另一个标记的第一个子标记时,应用样式。
                <style> p:first-child {color: red;} </style> <p>p是body的第一个子标记,应用红色样式</p> <div>测试</div> <p>p标记是body的第三个子标记,不应用红色样式</p>
                :link和:visited伪类只作用于a标记,在指定href属性的前提下,:link表示a标记还没被点击时的样式,:visited表示被当点后的样式。
                <style> a:link {color: blue;} a:visited {color: red;} </style> <a href="https://www.ringkee.com">链接没点击前是蓝色的,点击后是红色的</a>
                :hover,:active和:fouce伪类也只能作用于a标记,且也要指定href属性。:hover指定当用户把鼠标移到a标记上并且指针变成手型时应用的样式。:active指定点击a链接并放开鼠标时所显示的样式。:fouce指定用户点击a标记瞬间,即链接成为焦点时所显示的样式。:hover要放在:link和:visited之后,否则:hover的样式会覆盖:link和:visited的样式。
                <style> a:link {color: blue;} a:visited {color: red;} a:haover {color: green;} a:focus {color: black;} a:active {color: white;} </style> <a href="https://www.ringkee.com">应用样式</a>
                :left及:right伪类只作用于页面内容。当页面在左边时应用:left指定的样式,当页面在右边时应用:right指定的样式。
                :first-line只对div和p标记不效,样式只应用于这两个标记内的第一行内容。
                <style> :first-line {color: red;} </style> <div width:50px;> 该元素内的第一行内容应用红色样式。 </div>
                :first-letter伪类也只能作用于div和p标记,与:first-line不同的是它只作用于标记内的第一个字符。如果我们想要每一行的开头字符大一点就可使用该伪类。
                <style> :first-letter {font-size: 40pt;} </style> <p>这行文字开头第一个字符的大小是40pt</p>
                :before和:after伪类可在内容的前面或后面增加特定的内容或指定样式。
                <style> p:before {content: "("; color: red;} p:after {content: ")"; color: green;} </style> <p>这行文字前后会增加一对括号,前括号为红色</p> <p>这行文字前后会增加一对括号,后括号为绿色</p>
                层叠选择符是指当有多个选择符的样式都应用于同一个标记时的选择规则。该规则利用一个三位数来确定,数字最大的就可选中。这三位数的确定规则的这样的,如果选择符中有ID选择符,则百位数加1,否则为0。如果有属性选择符、类选择符或伪类选择符,则十位数加1,否则为0。如果有类型选择符,则个位数加1,否则为0。如果选择符是#div div,这三位数则是101。让我们分析一下,#div是ID选择符,所以在百位数上加1,div是类型选择符,所以个位数上加1变成101。"*"表示0,优先级最低。
                样式表的主要功能是指定同一个文件在不同媒体上按不同的样式显示。通过在种方式可指定不同媒体

                  @media方式
                  <style> @media screen {div{color:red;}} @media print {div{color:green;}} </style> <div>不同媒体显示不同颜色</div>
                  @import是另一种指定不同媒体的方式,它可引入外部的css文档。它的语法格式是:
                  <style> @import url("simple.css") screen; </style>
                  在HTML4.0中,可以用LINK标记的media属性为不同媒体类型指定样式表。
                  <LINK rel="stylesheet" href="import.css" type="text/css" media="print">
                  !important规则会改变应用样式的优先级,有!important参数样式的优先级最高,会优先显示。
                  <style> h1 {color:red;} h1 {color:green !important;} </style> <h1>字体为绿色</h1>

C#读写xml文件应用 深入解析XML中的字符实体与字符数据

相关文章

  • [XML/XSLT] XML模式:FIXML和SVG

    FIXML FIX 是众多企业间数据交换格式之一,用于在商业活动中交换信息。此类交换信息通常很重要,比如交易支付数据、股票价格和商业 2018-04-14

  • [XML/XSLT] XML模式:Dublin Core

    Dublin Core 标准是一种信息分类方法,常用于图书馆。Dublin Core 标准有一个 XML Schema 定义了如何使用 XML 描述这类信息。Dub 2018-04-14

  • [XML/XSLT] XML:OpenSearch 应用

    很多现代的浏览器在地址栏的右边有个搜索框,默认的安装有 Google 搜索等。如下图所示: 其实这是 OpenSearch 的一个应用,只要编 2018-04-14

  • [XML/XSLT] 网页制作关于代码的18个小技巧

      1、xml文件尽量以utf-8编码,gb2312有些字是存储不了的,如?,就算能存也需要转换,比较麻烦,utf-8也符合国际规范。   2、CSS中:ho 2018-04-14

  • [XML/XSLT] XML模式:RDF

    语义 Web(Semantic Web)和语义网格(Semantic Grid)技术都依赖于资源描述框架(Resource Description Framework,RDF)这种灵活的 2018-04-14

  • [XML/XSLT] XML加ASP实现网页“本地化”

    想让你的站点能被来自多个国家的冲浪者看明白吗?无疑,这就需要提供多个语言版本的页面内容,也就是所谓的 “ 2018-04-14

  • [XML/XSLT] XML模式:FIXML和SVG

    FIXML FIX 是众多企业间数据交换格式之一,用于在商业活动中交换信息。此类交换信息通常很重要,比如交易支付数据、股票价格和商业 2018-04-14

  • [XML/XSLT] XML模式:Dublin Core

    Dublin Core 标准是一种信息分类方法,常用于图书馆。Dublin Core 标准有一个 XML Schema 定义了如何使用 XML 描述这类信息。Dub 2018-04-14

  • [XML/XSLT] XML:OpenSearch 应用

    很多现代的浏览器在地址栏的右边有个搜索框,默认的安装有 Google 搜索等。如下图所示: 其实这是 OpenSearch 的一个应用,只要编 2018-04-14

  • [XML/XSLT] 网页制作关于代码的18个小技巧

      1、xml文件尽量以utf-8编码,gb2312有些字是存储不了的,如?,就算能存也需要转换,比较麻烦,utf-8也符合国际规范。   2、CSS中:ho 2018-04-14

  • [XML/XSLT] 在XSLT样式表中声明命名空间小结

    考虑以下两段代码: 复制代码代码如下: <urlset> <url> <loc>http: www caixw com archives 1 html< loc> <lastmod>2010-05-20T16:3 2018-04-14

  • [XML/XSLT] XML入门的常见问题(四)

      在 XML 对象模型中如何处理空白字符?   有些时候,XML 对象模型将显示包含空白字符的 TEXT 节点。 2018-04-14

  • [XML/XSLT] XML入门问答

    什么是置标语言? ----------------------   我们日常书写的语言,被称为书面自然语言。如果在书面自然语言 2018-04-14

  • [XML/XSLT] XML入门精解之结构与语法

     现在我们暂且使用“记事本”来创建我们的XML文件吧。先看一个XML文件:   例1   〈?xml version= "1 0 2018-04-14

  • [XML/XSLT] XML入门的常见问题(三)

    作者:AngelGavin 出处:CSDN  如何加载有外国和特殊字符的文档?   文档可以包含外国字符,例如:  for 2018-04-14

  • [XML/XSLT] XML入门的常见问题(二)

    作者:AngelGavin 出处:CSDN  Internet Explorer 5 0 对 XML 提供哪个级别的支持?   Internet Exp 2018-04-14

  • [XML/XSLT] XSL简明教程(1)XSL入门

    一 XSL入门1 XSL---XML的样式表 HTML网页使用预先确定的标识(tags),这就是说所有的标记都有明确的含义,例如 2018-04-14

  • [XML/XSLT] XSL简明教程(2)XSL转换

    原著:Jan Egil Refsnes 翻译:阿捷 二 XSL的转换 1 将XML转换成HTMLXSL是如何将XML文档转换成HTML文件的呢 2018-04-14

  • [XML/XSLT] XSL简明教程(3)在客户端的实现

    原著:Jan Egil Refsnes 翻译:阿捷 三 XSL--在客户端的实现1 JavaScript解决方案在上面的章节中我们已经 2018-04-14

  • [XML/XSLT] XSL简明教程(4)在服务器端的实现

    原著:Jan Egil Refsnes 翻译:阿捷 四: XSL --- 在服务器端的实现 1 兼容所有的浏览器在上面一章我们介 2018-04-14

  • [XML/XSLT] XSL简明教程(5)XSL的索引

    原著:Jan Egil Refsnes 翻译:阿捷 五 XSL 的索引 如果我需要将元素的显示按一定的顺序排列,应该如何 2018-04-14

文章分类

本类排行榜

相关更新

悠悠之家集编程技术、手机软件与游戏、各种素材、字体下载, 还有大量的学习笔记,编程工具,源码下载,编程技术教学资源。

本站为非营利性网站,悠悠之家的资源均来自网络收集整理,个人纯属学习交流之用,如有侵犯您的版权请与我联系,我们会马上改正请在下载24小时内删除!

Copyright © 2021 悠悠下载(uoften.com) All Rights Reserved.