/ / Zastosuj styl do wartości atrybutu xml - css, xml, xslt

Zastosuj styl do wartości atrybutu xml - css, xml, xslt

Próbuję zastosować styl do poniższego kodu XML dla atrybutu Label

<NavItem Description="" id="client1" Label="My Information"  SequenceNumber="3" ></NavItem>

Oto kod XSL

<h3 title="{@Description}">
<a href="#">
<img src="/images/{$imgSrc}" />
<xsl:value-of select="@Label"/>
</a>

W powyższym kodzie XSLT otrzymuję wartość z etykiety jako wynik, ale nie mam pojęcia, jak zastosować CSS do etykiety.

Proszę mi pomóc

Dziękuję i pozdrawiam Mahadevan

Odpowiedzi:

1 dla odpowiedzi № 1

Musisz zawinąć wartość w element HTML, np.

<span class="label"><xsl:value-of select="@Label"/></span>

Następnie możesz dodać odpowiedni link element (odnoszący się do zewnętrznego arkusza stylów CSS) lub a style element w head część, używając normalnego CSS, np.

<style>
.label { font-size: 80%; font-family: Calibri, sans-serif }
</style>

Jako mniej ustrukturyzowane podejście, czasami odpowiednie w najprostszych przypadkach, można alternatywnie użyć arkusza stylów CSS osadzonego w style atrybut:

<span style="font-size: 80%"><xsl:value-of select="@Label"/></span>

0 dla odpowiedzi nr 2

Prosty przykład „Hello XSLT”: hello.xml

<?xml version="1.0"?>
<?xml-stylesheet href="hello.xsl" type="text/xsl"?>
<page>
<title>Hello</title>
<content>Here is some content</content>
<comment>Written by DKS.</comment>
</page>

Poszukiwany dokument wynikowy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Hello</title>
</head>
<body bgcolor="#ffffff">
<h1 align="center">Hello</h1>
<p align="center"> Here is some content</p>
<hr><i>Written by DKS</i>
</body>
</html>

Arkusz stylów XSLT

hello.xslt

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="page">
<html>
<head>
<title> <xsl:value-of select="title"/>
</title>
</head>
<body bgcolor="#ffffff">
<xsl:apply-templates/>
</body>
</html>
</xsl:template>

<xsl:template match="title">
<h1 align="center"> <xsl:apply-templates/>  </h1>
</xsl:template>

<xsl:template match="content">
<p align="center"> <xsl:apply-templates/> </p>
</xsl:template>

<xsl:template match="comment">
<hr/> <i><xsl:apply-templates/> </i>
</xsl:template>
</xsl:stylesheet>

Po więcej informacji. Spójrz tutaj ..http://edutechwiki.unige.ch/en/XSLT_Tutorial_-_Basics

Aktualizacja:

Aby połączyć plik XML z CSS, używasz tego kodu:

Następnie wpisz swój kod css do yourstyle.css: na przykład:

label {
display: block;
font-weight: bold;
margin: 5px;
width: 225px;
text-align: right;
background: #dedede;
}