Модуль @namespace в css предназначен для создания стилей, которые применяются только к определенным пространствам имен. Это особенно полезно для применения стилей CSS к документам XML. Вы также можете использовать его с xhtml и html5, чтобы применять стили только к документам и элементам с определенными пространствами имен xml (определенными атрибутом xmlns, обычно в теге html).
Например, взгляните на следующий XML-документ:
<!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" сделает абзац черным и курсивом. Однако кажется, что все браузеры, поддерживающие @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. html выглядит так:
http://i56.tinypic.com/2zeca44.png
И namespacetest. xml выглядит так:
http://i52.tinypic.com/foq5o3.png
Первое правило стиля в namespacecss.css применяется только к xhtml, поэтому абзац xhtml имеет красный цвет. Второе правило стиля применяется только к нашему пользовательскому пространству имен, «article», поэтому абзац в файле xml имеет синий цвет. И третье правило применяется ко всем пространствам имен, поэтому в обоих примерах текст равен 20pt.
Дальнейшее чтение:
Спасибо, что задали этот вопрос! Я многому научился, отвечая на него.