Tom*_*ito 4 css xml namespaces
在CSS文件中,使用Eclipse IDE添加标头:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
应该让eclipse检查元素是否有错误？(因为它没有这样做).
如果没有,添加标题有什么区别？
@namespacecss中的模块用于创建仅适用于某些名称空间的样式.它对于将CSS样式应用于XML文档特别有用.您也可以将它与xhtml和html5一起使用,仅将样式应用于具有某些xml命名空间的文档和元素(由xmlns属性定义,通常在html标记中).
例如,看看下面的xhtml文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>@namespace examples</title>
<!-- This stylesheet defines an namespace prefix called "xhtml", and uses it to style all p elements in that namespace -->
<style type="text/css">
@namespace xhtml "http://www.w3.org/1999/xhtml";
xhtml|p
{
color: Red;
}
</style>
<!-- This stylesheet defines style that apply to an imaginary "superhtml" namespace. It shouldn't work for xhtml elements -->
<style type="text/css">
@namespace "http://www.w3.org/20X6/superxhtml";
p
{
font-style: italic;
}
</style>
<!-- This stylesheet uses a namespace URL with no namespace prefix, so all its styles apply to that namespace. -->
<style type="text/css">
@namespace xhtml "http://www.w3.org/1999/xhtml";
p
{
text-decoration: underline;
}
</style>
<!-- This stylesheet uses no namespace declaration, it applies to any document that includes it. -->
<style type="text/css">
p
{
font-size: 20pt;
}
</style>
</head>
<body>
<p>If this text is red, underlined, and 20pt, then you're using the http://www.w3.org/1999/xhtml namespace.</p>
</body>
</html>
在Firefox 4中加载它,它看起来像这样:
http://i51.tinypic.com/295pt86.png
注意开头的html标签:<html xmlns="http://www.w3.org/1999/xhtml" >.它有一个xmlns属性.因此,与该命名空间匹配的CSS规则在本文档中起作用.文字是红色,带下划线和20pt.但请注意,文本不是斜体.为什么？斜体段落的样式规则应用于不同的命名空间:
<!-- This stylesheet defines style that apply to an imaginary "superhtml" namespace. It shouldn't work for xhtml elements -->
<style type="text/css">
@namespace "http://www.w3.org/20X6/superxhtml";
p
{
font-style: italic;
}
</style>
由于html标记xmlns在http://www.w3.org/20X6/superxhtml中没有指向伪造命名空间的属性,因此忽略了此样式规则.
现在,您可能会认为xmlns将html标记更改为值" http://www.w3.org/20X6/superxhtml "会使该段落为黑色和斜体.但是,似乎所有支持@namespaceCSS声明的浏览器目前都假设所有xhtml/html文档都在http://www.w3.org/1999/xhtml命名空间中,并相应地设置它们的样式,即使您尝试更改它.
正因为如此,@namespace似乎没有什么用处,但它是如果你是共享一个样式表多个XML文档之间,或XHTML文档和XML文档之间,并且要为每个不同的风格非常有用.
为了演示,我将创建3个文件:
首先,namespacecss.css:
@namespace xhtml "http://www.w3.org/1999/xhtml";
@namespace article "http://www.example.com/namespaces/article";
xhtml|p
{
color: Red;
}
article|p
{
color: Blue;
}
p
{
font-size: 20pt;
}
接下来,namespacetest.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>@namespace examples</title>
<link type="text/css" href="namespacecss.css" rel="Stylesheet" />
</head>
<body>
<p>If this text is red, then you're using the http://www.w3.org/1999/xhtml namespace.</p>
</body>
</html>
最后,一个XML文件,namespacetest.xml:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="namespacecss.css"?>
<document xmlns="http://www.example.com/namespaces/article">
<p>This should be blue</p>
</document>
现在,将最后2个文件加载到Firefox 4. namespacetest中.HTML看起来像这样:
http://i56.tinypic.com/2zeca44.png
和namespacetest.xml看起来像这样:
http://i52.tinypic.com/foq5o3.png
namespacecss.css中的第一个样式规则仅适用于xhtml,因此xhtml段落为红色.第二个样式规则仅适用于我们的自定义命名空间"article",因此xml文件中的段落为蓝色.第三条规则适用于所有名称空间,因此两个示例中的文本都是20pt.
进一步阅读:
谢谢你提出这个问题!我回答的时候学到了很多东西.
| 归档时间： |
|
| 查看次数： |
1165 次 |
| 最近记录： |
