在XML中使用CSS和XSL

时间:2014-12-17 02:05:49

标签: html css xml xslt

我有一个项目,我需要使用XSLT将xml转换为html,并且还有一个css。我似乎无法让CSS影响文档,任何帮助都会很棒!

CSS只是对齐中心,因为我可以很容易地看到它是否正常工作,一旦我知道它正在工作,我就可以编辑它,这样我就可以了。但基本上XSL工作正常,但我不能让CSS影响xml

XML:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="BookDescription.xsl" type="text/xsl"?>
<?xml-stylesheet type="text/css" href="book_details.css"?>
<!--ORACLE BOOK-->
<Book>
    <bookID>0-07-882122-3</bookID>
    <bookTitle>Oracle: A Beginner's Guide</bookTitle>
    <bookCategory>database</bookCategory>
    <bookDescription>A beginner's guide to the complex and powerful Oracle database management system. Teaches you how to set up, query and manage your database, including principles of database design, how to manage data, generate reports and tune the system for optimal performance.</bookDescription>
    <bookPrice>30.00</bookPrice>
    <bookAuthor>Michael Abbey</bookAuthor>
    <bookImage>images/Oracle.JPG</bookImage>
    <bookInfo>Oracle.xml</bookInfo>
</Book>

XSL

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
    <xsl:template match="Book">
        <h3>
            <xsl:value-of select="bookTitle"/>
        </h3>
        <img alt="">
            <xsl:attribute name="src"><xsl:value-of select="bookImage"/></xsl:attribute>
        </img>
        <div>
            <xsl:text>ISBN: </xsl:text>
            <xsl:value-of select="bookID"/>
        </div>
        <div>
            <xsl:text>Author: </xsl:text>
            <xsl:value-of select="bookAuthor"/>
        </div>
        <div>
            <xsl:text>Category: </xsl:text>
            <xsl:value-of select="bookCategory"/>
        </div>
        <div>
            <xsl:text>Description: </xsl:text>
            <xsl:value-of select="bookDescription"/>
        </div>
        <div>
            <xsl:text>Price: </xsl:text>
            <xsl:value-of select="bookPrice"/>
        </div>

    </xsl:template>

    <xsl:template match="/">
        <html>
            <body>
                <xsl:apply-templates select="Book"/>
            </body>
        </html> 
    </xsl:template>
</xsl:stylesheet>

CSS

div{
    text-align: center;
}

bookID{
    text-align: center;
}

1 个答案:

答案 0 :(得分:2)

您必须在CSS文件中添加link

<xsl:template match="/">
    <html>
        <head>
            <link rel="stylesheet" href="path/to/your/css/file.css">
        </head>
        <body>
            <xsl:apply-templates select="Book"/>
        </body>
    </html> 
</xsl:template>

或者:

<xsl:template match="/">
    <html>
        <head>
            <style>
                /* Your CSS here */ 
            </style>
        </head>
        <body>
            <xsl:apply-templates select="Book"/>
        </body>
    </html> 
</xsl:template>