Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » XSL » Ayuda con CSS y XSL

XSL - Ayuda con CSS y XSL

Volver
Nuevo Tema
<<>>
 
Vista:

Ayuda con CSS y XSL

Publicado por CybertowerS (1 intervención) el 24/04/2003 12:50:19
Hola:
Estoy intentando rescatar un valor de un atributo de un fichero XML, y asignarlo en mis estilos.
Si hago esto dentro del fichero XSL:
<!--
<xsl:template match="/">
<HTML>
<HEAD>
<STYLE>
P.Mayor { font-size: 25px;
color: <xsl:value-of select="//names/config/@colorMayor"/>
}
P.Menor { font-size: 18px;
color: <xsl:value-of select="//names/config/@colorMenor"/>
}
</STYLE>
</HEAD>
<BODY>
-->
si que me funciona, y me asigna a color el valor del atributo del XML.

Pero yo quiero sacar el estilo fuera, a un fichero .CSS, entonces la cosa me quedaría así:
XSL:
<!--
<xsl:template match="/">
<HTML>
<HEAD>
<LINK TYPE="text/css" REL="stylesheet" HREF="004.css" />
</HEAD>
<BODY>
-->
CSS:
<!--
P.Mayor { font-size: 25px;
color: <xsl:value-of select="//names/config/@colorMayor"/>
}

P.Menor { font-size: 18px;
color: <xsl:value-of select="//names/config/@colorMenor"/>
}
-->
Pero así no me anda.
¿Sabe alguien como poder asignar el valor de un atributo en XML a un fichero CSS?

Muchas gracias.
>>>CybertowerS<<< cybtow[at]yahoo.es
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro

Asignar valor de un atributo XML a un archivo CSS

Publicado por Alejandro (227 intervenciones) el 04/07/2023 23:31:14
Aquí tienes una solución para asignar el valor de un atributo XML a un archivo CSS:

XSL:
1
2
3
4
5
6
7
8
9
10
<xsl:template match="/">
  <html>
    <head>
      <link type="text/css" rel="stylesheet" href="004.css" />
    </head>
    <body>
      <!-- Contenido del cuerpo del documento -->
    </body>
  </html>
</xsl:template>

CSS (archivo 004.css):
1
2
3
4
5
6
7
8
9
P.Mayor {
  font-size: 25px;
  color: var(--color-mayor);
}
 
P.Menor {
  font-size: 18px;
  color: var(--color-menor);
}

En el archivo XSL, se incluye un enlace al archivo CSS externo utilizando la etiqueta `<link>`. Asegúrate de que la ruta y el nombre del archivo CSS sean correctos.

En el archivo CSS (004.css), se utilizan variables CSS para definir los valores de color. En lugar de asignar directamente el valor del atributo XML, se utiliza la sintaxis `var(--nombre-variable)` para hacer referencia a las variables. Estas variables serán definidas más adelante.

Después de esta configuración, puedes definir las variables CSS correspondientes en el archivo XSL:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<xsl:template match="/">
  <html>
    <head>
      <style>
        :root {
          --color-mayor: <xsl:value-of select="//names/config/@colorMayor" />;
          --color-menor: <xsl:value-of select="//names/config/@colorMenor" />;
        }
      </style>
      <link type="text/css" rel="stylesheet" href="004.css" />
    </head>
    <body>
      <!-- Contenido del cuerpo del documento -->
    </body>
  </html>
</xsl:template>

En el bloque `<style>`, se utiliza la pseudoclase `:root` para definir las variables CSS. Dentro de las variables, se utiliza la función `<xsl:value-of>` para asignar el valor del atributo XML correspondiente.

Con esta configuración, el archivo CSS externo (004.css) utilizará las variables definidas en el archivo XSL para establecer los valores de color.

Espero que esta solución te sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar