Question

好的，我的第一个XML项目遇到了麻烦，所以我转向你们。我正在尝试使用包含联系人数据的XML文件生成一个地址簿，然后在XSLT中进行转换。 XML和XSLT文件都能正常工作，但是当我尝试将我的CSS文件实现到XSLT中时，问题就出现了，所以我可以格式化页面以匹配网站的其余部分。实现CSS后，我的表只显示XSLT中给出的第一行并停止。下面给出了我的三个文件的代码，以及包含CSS文件的给定响应。

XML：

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="contactdata.xsl"?>

<!DOCTYPE addressbook [
<!ELEMENT addressbook (contact)>
<!ELEMENT contact (fname,lname,mi,staddress,city,state,zip,phone,email,twitter)>
<!ELEMENT fname (#PCDATA)>
<!ELEMENT lname (#PCDATA)>
<!ELEMENT mi (#PCDATA)>
<!ELEMENT staddress (#PCDATA)>
<!ELEMENT city (#PCDATA)>
<!ELEMENT state (#PCDATA)>
<!ELEMENT zip (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT twitter (#PCDATA)>
]>
<addressbook>
<contact>
<fname>Peyton</fname>
<lname>Manning</lname>
<mi>Z</mi>
<staddress>123 Go Vols</staddress>
<city>Denver</city>
<state>CO</state>
<zip>12345</zip>
<phone>1-800-youwish</phone>
<email>pmanning@broncos.com</email>
<twitter>peyton_manning</twitter>
</contact>

<contact>
<fname>Eric</fname>
<lname>Berry</lname>
<mi>P</mi>
<staddress>123 Arrowhead Stadium</staddress>
<city>Kansas City</city>
<state>MO</state>
<zip>34567</zip>
<phone>816-213-4452</phone>
<email>eberry@chiefs.com</email>
<twitter>eric_berry</twitter>
</contact>
</addressbook>

XSLT：

<?xml-stylesheet type="text/css" href="sitetemplate.css"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>


 <xsl:template match="/*">
    <html>
        <body>
            <table>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Middle Initial</th>
                    <th>Street Address</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Zip</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Twitter</th>
                </tr>
                <xsl:apply-templates/>
            </table>
        </body>
    </html>
 </xsl:template>

 <xsl:template match="contact">
  <tr><xsl:apply-templates/></tr>
 </xsl:template>

 <xsl:template match="contact/*">
  <td><xsl:value-of select="."/></td>
 </xsl:template>
</xsl:stylesheet>

CSS：

.text {font-family: Helvetica, Times, serif; color:white;}

.center {text-align:center;}

body {background-image:url('wallpaper.jpg'); font-family: Helvetica, Times, serif;}

hr {border: 0; width: 50%; color:white;}

table, th, td {border:10px white; background-color:blue; color:white;} 


a:link {color:#75B8FA; text-decoration:none;}
a:visited {color:#75B8FA; text-decoration:none;}
a:hover {color:#75B8FA; text-decoration:none;}
a:active {color:#FFFFFF; text-decoration:none;}

尝试运行时浏览器上显示的内容：http://i144.photobucket.com/albums/r171/jmock89/giventable.png （对不起，这是一个外部链接，我不能在StackOverflow上发布图像，直到我有10个代表。）

Answer 1

如果您的CSS样式表位于：http://myUrl.com/myCSS.css 然后在<html>之后立即在转换中包含以下内容：

        <head>
          <link rel="stylesheet"
                type="text/css"
                href="http://myUrl.com/myCSS.css"/>
        </head>

或者，生成内联样式：

        <head>
          <style>
                    .text {font-family: Helvetica, Times, serif; color:white;}

                    .center {text-align:center;}

                    body {background-image:url('wallpaper.jpg'); font-family: Helvetica, Times, serif;}

                    hr {border: 0; width: 50%; color:white;}

                    table, th, td {border:10px white; background-color:blue; color:white;}


                    a:link {color:#75B8FA; text-decoration:none;}
                    a:visited {color:#75B8FA; text-decoration:none;}
                    a:hover {color:#75B8FA; text-decoration:none;}
                    a:active {color:#FFFFFF; text-decoration:none;}
          </style>
        </head>

另一种选择：

生成必要的处理指令：

<?xml-stylesheet type="text/css" href="sitetemplate.css"?>

为此，请添加此项（紧接在<html>之前）：

 <xsl:processing-instruction
 name="xml-stylesheet">type="text/css" href="sitetemplate.css"</xsl:processing-instruction>

使用CSS显示XSL表

1 个答案: