Stylowanie XML xsl przez zewnętrzny plik CSS

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

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

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