Stylowanie XML xsl przez zewnętrzny plik CSS

Odpowiedz Nowy wątek
2018-11-28 14:59
0

Witam:)
Na początek chciałem się przywitać :) To mój pierwszy post tutaj i na wstępie powiem , że mega się cieszę, że trafiłem na to forum :)

Problem mój polega na tym , iż zostałem wrzucony do zadania ostylowania pliku wynikowego XML .wraz z nim dostałem plik XSL , który ma w sobie styowanie inline i cokolwiek bym nie robił nie potrafię ostylować pliku XML. W plikach jest zestawienie faktur i związanych z nimi danych w formie tabel. Moim zadaniem jest zaprojektować layout i ostylowania tego żeby było "biznesowo" . Szukałem juz w wielu miejscach ale nigdzie nie mogłem znaleźć rozwiązania jak ostylować to przez zewnętrzny plik CSS mając już to stylowanie inline.
Z góry dziękuję za pomoc
Maciek

Pozostało 580 znaków

2018-11-28 15:26
0

Za szybko, masz plik xml i xsl.
Czyli ty tego xml przekształcasz za pomocą xsl do html w którym podpinasz css:

plik dane.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="template.xsl"?>
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Unchain my heart</TITLE>
        <ARTIST>Joe Cocker</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>EMI</COMPANY>
        <PRICE>8.20</PRICE>
        <YEAR>1987</YEAR>
    </CD>
</CATALOG>

plik template.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" encoding="UTF-8" indent="yes"/>
    <xsl:template match="/">
        <html>
            <head>
                <link rel="stylesheet" href="tabela.css" type="text/css" />
            </head>
            <body>
                <h2>Tabela</h2>
                <table border="1">
                    <tr bgcolor="#9acd32">
                        <th>Title</th>
                        <th>Artist</th>
                    </tr>
                    <xsl:apply-templates/>
                </table>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="CD">
        <tr>
            <td>
                <xsl:value-of select="TITLE"/>
            </td>
            <td>
                <xsl:value-of select="ARTIST"/>
            </td>
        </tr>
    </xsl:template>
</xsl:stylesheet> 

plik tabela.css

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

wynik przekształcenia:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="tabela.css" type="text/css">
</head>
<body>
<h2>Tabela</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
    <tr>
<td>Empire Burlesque</td>
<td>Bob Dylan</td>
</tr>
    <tr>
<td>Unchain my heart</td>
<td>Joe Cocker</td>
</tr>
</table>
</body>
</html>

Uruchomienie pliku w ie da wynik:
screenshot-20181128152534.png

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0