我试图获取用外部 css 编写的命名空间(实际上是两个单独的文件)。当我在浏览器上运行该文件时,它不会使用声明的名称空间。我认为该文件正在调用 css 文件,但它没有应用命名空间样式
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:act="http://www.superstarmovies.com/actors"
xmlns:mov="http://www.superstarmovies.com/movies"
xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Superstar Movies: Stars of the Month</title>
<link rel="stylesheet" href="movies.css" type="text/css" ?>
<link rel="stylesheet" href="actors.css" type="text/css" ?>
<link rel="stylesheet" href="superstar.css" type="text/css" />
</head>
<body>
<div id="heading"><img src="logo.gif" alt="Superstar Movies" /></div>
<div id="main">
<h1>Stars of the Month</h1>
<h3>Movies by Our Featured Stars!</h3>
<act:actors>
<act:actor>
<act:name>Halle Berry</act:name>
<act:date>August 14, 1966</act:date>
<act:birthplace>Cleveland, Ohio</act:birthplace>
<mov:movie genre="action" star="Halle Berry">
<mov:name>Catwoman</mov:name>
<mov:date>(2004)</mov:date>
<mov:length>104 minutes</mov:length>
</mov:movie>
<mov:movie genre="horror" star="Halle Berry">
<mov:name>Gothika</mov:name>
<mov:date>(2003)</mov:date>
<mov:length>98 minutes</mov:length>
</mov:movie>
<mov:movie genre="drama" star="Halle Berry">
<mov:name>Monster's Ball</mov:name>
<mov:date>(2001)</mov:date>
<mov:length>111 minutes</mov:length>
</mov:movie>
<mov:movie genre="fantasy" star="Halle Berry">
<mov:name>X-Men</mov:name>
<mov:date>(2000)</mov:date>
<mov:length>104 minutes</mov:length>
</mov:movie>
<mov:movie genre="romance" star="Halle Berry">
<mov:name>Jungle Fever</mov:name>
<mov:date>(1991)</mov:date>
<mov:length>132 minutes</mov:length>
</mov:movie>
</act:actor>
<act:actor>
<act:name>Tom Hanks</act:name>
<act:date>July 9, 1956</act:date>
<act:birthplace>Concord, California</act:birthplace>
<mov:movie genre="drama" star="Tom Hanks">
<mov:name>Catch Me If You Can</mov:name>
<mov:date>(2002)</mov:date>
<mov:length>141 minutes</mov:length>
</mov:movie>
<mov:movie genre="adventure" star="Tom Hanks">
<mov:name>Cast Away</mov:name>
<mov:date>(2000)</mov:date>
<mov:length>143 minutes</mov:length>
</mov:movie>
<mov:movie genre="action" star="Tom Hanks">
<mov:name>Saving Private Ryan</mov:name>
<mov:date>(1998)</mov:date>
<mov:length>170 minutes</mov:length>
</mov:movie>
<mov:movie genre="adventure" star="Tom Hanks">
<mov:name>Apollo 13</mov:name>
<mov:date>(1995)</mov:date>
<mov:length>140 minutes</mov:length>
</mov:movie>
<mov:movie genre="comedy" star="Tom Hanks">
<mov:name>Forrest Gump</mov:name>
<mov:date>(1994)</mov:date>
<mov:length>142 minutes</mov:length>
</mov:movie>
<mov:movie genre="drama" star="Tom Hanks">
<mov:name>Philadelphia</mov:name>
<mov:date>(1993)</mov:date>
<mov:length>125 minutes</mov:length>
</mov:movie>
<mov:movie genre="comedy" star="Tom Hanks">
<mov:name>Big</mov:name>
<mov:date>(1988)</mov:date>
<mov:length>104 minutes</mov:length>
</mov:movie>
</act:actor>
</act:actors>
</div>
<address>
Superstar Movies · 123 Moviestar Lane · Hollywood, FL 12345
</address>
</body>
</html>
CSS
@namespace act "http://www.superstarmovies.com/actors";
act|actor {display: block; font-family: Arial, Helvetica, sans-serif;
margin-bottom: 20pt}
act|name, act|date {display: block}
act|name {font-size: 14pt; color: DarkRed; font-style: bold}
act|date, act|birthplace {display: inline; font-style: italic; color: DarkRed}
act|birthplace {padding-left: 0.5em}
@namespace mov "http://www.superstarmovies.com/movies";
mov|movie {display:block; font-family: Arial, Helvetica, sans-serif}
mov|name, mov|date, mov|length {display: inline}
mov|name {font-style: bold; color:#003;}
mov|length {font-style: italics; padding-left: 0.5em}
想法?
在您的 XHTML 中:
-
您的标记格式不正确:
-
您的 XML 声明应该首先出现,然后是您的 doctype 声明:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
你的一些<link />
标签没有正确关闭,它们应该是:
<link rel="stylesheet" href="movies.css" type="text/css" />
<link rel="stylesheet" href="actors.css" type="text/css" />
-
您的页面必须作为application/xhtml+xml
由服务器。典型的服务器不知道您正在提供 XHTML,因此它们将其发送为text/html
反而。浏览器将无法处理text/html
文件作为 XML,因此它们不会将 CSS 应用于您的自定义 XML 元素。
如果您使用 PHP,只需将其添加到 XHTML 文件的最顶部即可:
<?php header('Content-Type: application/xhtml+xml'); ?>
或者在 ASP 中添加以下内容:
<% Response.ContentType = "application/xhtml+xml"; %>
您还应该有一个附带的元标记,但您的页面不需要验证,并且浏览器无论如何都会忽略它:
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
您可以在以下位置找到关于 UA 将 XHTML 视为 HTML 标签汤的简短历史课程:这个答案 https://stackoverflow.com/a/8871965/106224为了更好地理解这一点。
在你的 CSS 中:
It's font-weight: bold
, not font-style: bold
.
It's font-style: italic
, not font-style: italics
.
-
确保您的@namespace
语句放置在样式表的开头。来自spec http://www.w3.org/TR/css3-namespace/#syntax:
Any @namespace
规则必须遵循所有 @charset 和 @import 规则,并位于样式表中所有其他非忽略的 at 规则和规则集之前。
但话虽如此,为什么不将演员和电影放入他们自己的 XML 文件中,然后使用 XSLT 将它们转换为熟悉的、实际的XHTML?
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)