Question

在CSS文件中，使用Eclipse IDE添加标题：

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

应该让eclipse检查元素是否有错误？（因为它没有这样做）。

如果没有，添加标题有什么区别？

Answer 1

css中的@namespace模块用于创建仅适用于某些名称空间的样式。它对于将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。但请注意，文本 NOT 斜体。为什么？斜体段落的样式规则应用于不同的命名空间：

<!-- 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的虚构命名空间，因此忽略了此样式规则。

现在，您可能会认为将html标记中的xmlns更改为值“http://www.w3.org/20X6/superxhtml”会使该段落变为黑色和斜体。但是，似乎所有支持@namespace CSS声明的浏览器都假设所有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。

进一步阅读：

感谢您提出这个问题！我在回答的过程中学到了很多东西。

将命名空间添加到css应该使IDE验证代码？

1 个答案: