好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5教程-了解:使用CSS namespace进行分隔

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

&nbs p;

关于 CSS 命名空间模块,有兴趣可以直接参考W3C 官方 内容:CSS names paces module。

命名空间
根据维基 百科 的定义,命名空间(n am espace)可以让 XML文档 可能包括来自多个 XM L词汇表的元素或属性彼此间没有冲突。

例如常见的X HTML 文档的命名空间:

<ht ML  xmlns="http://www.w3. org /1999/xhtml">

上面代码中的 url地址 就是个 简单 的命名空间名称,其并不指向之一实际的在线地址。浏览器不是使用或处理这个URL。当某个人阅读这里的文档代码的时候可以轻松理解命名空间所指。

CSS 命名空间
在2007年的时候,Bert Bos曾解释过为何CSS命名空间要引入:

命名空间模块很小,很简单,大概很少需要,但是正因为其小巧,所以添加到CSS中并没有什么负担。事实上,很多浏览器很早的时候就支持了。

它定义的唯一的事情就是在CSS中如何声明一个XML命名空间的前缀。当你使用的选择器仅匹配特定命名空间下的元素,则这东西就很管用。

举个例子,SVG使用了和HTML一样的元素和 CSS属性 。如果你为SVG文档和HTML文档同时应用了个样式文件的话,最好对SVG和HTML做样式分离以避免出现样式覆盖的情况。

使用

声明你的XHTML 文档类型 :

<!DOCTY PE  html P ub LIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -s trict.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

在你的样式文件中,为CSS规则定义默认命名空间:

@namespace "http://www.w3.org/1999/xhtml";  @namespace svg "http://www.w3.org/2000/svg"; 

有了上面的声明。你就可以只为SVG 原因 应用CSS规则啦:

svg|a { color: wh IT e; }

而其他规则默认会应用到HTML上。

和HTML5一起使用
HTML5允许行内SVG和MathML,这就意味着,你可以使用同一个样式文件定义行内SVG、MathML元素的样式。

HTML5的解析的好处是,如果文档是HTML(而非XHTML),HTML5的 解析器 可以暗中分配命名空间到已知的词汇(到目前为止,SVG, XML和MathML)。这就意味着你无需使用xmlns为您的HTML5文档中的SVG或MathML元素 明确 指定命名空间。

坏消息是目前貌似仅Firefox Nightly在 about: config 上设置 html5 .enabled = true 来解析和认知inline SVG或MathML.

这里有个demo页面,进去后会发现仅仅在火狐下左边是 圆 圆的,其他浏览器都是方的(包括Ch rom e浏览器):

上图中左边的SVG图片就是使用了SVG命名空间定义样式。

参考 文章
Spacing Out on CSS Namespaces

(本篇完)

觉得 可用,就经常来吧! 欢迎评论哦!  html5教程 ,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是 为你收集整理的 html5教程-了解:使用CSS namespace进行分隔 全部内容,希望文章能够帮你解决 html5教程-了解:使用CSS namespace进行分隔 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html5教程-了解:使用CSS namespace进行分隔的详细内容...

  阅读:48次