Hojas de estilo CSS en XML

CSS en XML
Documentos XML sin hojas de estilo
Documentos XML con hojas de estilo
Ejemplos de hojas de estilo para XML

CSS en XML

Las hojas de estilo CSS se desarrollaron para utilizarse junto con el lenguaje de marcas HTML, pero un documento XML también puede hacer referencia a una hoja de estilo CSS y visualizarse en el navegador.

El W3C aprobó en junio de 1999 la recomendación Associating Style Sheets with XML documents 1.0, editada por James Clark y en octubre de 2010 aprobó la recomendación Associating Style Sheets with XML documents 1.0 (2º edición), editada por James Clark, que definen cómo vincular documentos XML con hojas de estilo CSS.

Documentos XML sin hojas de estilo

Cuando un documento XML no enlaza a una hoja de estilo, los navegadores muestran el contenido del documento (etiquetas y texto en Firefox e Internet Explorer, sólo texto en Google Chrome).

Por ejemplo, el documento siguiente:

<?xml version="1.0" encoding="UTF-8"?>
<biblioteca>
  <libro>
    <titulo>La vida está en otra parte</titulo>
    <autor>Milan Kundera</autor>
    <fechaPublicacion año="1973"/>
  </libro>
  <libro>
    <titulo>Pantaleón y las visitadoras</titulo>
    <autor fechaNacimiento="28/03/1936">Mario Vargas Llosa</autor>
    <fechaPublicacion año="1973"/>
  </libro>
  <libro>
    <titulo>Conversación en la catedral</titulo>
    <autor fechaNacimiento="28/03/1936">Mario Vargas Llosa</autor>
    <fechaPublicacion año="1969"/>
  </libro>
</biblioteca>

se vería así: Enlace a ejemplo 1.

Volver al principio de la página

Documentos XML con hojas de estilo

De acuerdo con la recomendación Associating Style Sheets with XML documents 1.0 (2º edición), los enlaces a las hojas de estilo se realizan mediante la instrucción de procesamiento <?xml-stylesheet ?>. Esta instrucción permite enlazar hojas de estilo de forma similar a como se hace en una página web XHTML con la etiqueta <link />. En ambos casos el atributo href incluye el camino absoluto o relativo a la hoja de estilo CSS.

La diferencia es que la etiqueta <link /> forma parte del encabezamiento (etiqueta <head>), mientras que la instrucción de procesamiento <?xml-stylesheet ... ?> va al principio del documento, después de la declaración XML, como muestra el siguiente ejemplo:

Ejemplo de enlace a CSS en XHTML

Ejemplo de enlace a CSS en XML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>Ejemplo</title>
  <link href="ejemplo.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<libro>
  <titulo>La vida está en otra parte</titulo>
  <autor>Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>

Si un documento XML enlaza a una hoja de estilo, los navegadores ya no muestran las etiquetas, pero aplican la hoja de estilo.

Salvo si el documento XML utiliza el espacio de nombres del html (como se comenta más adelante), los navegadores no aplican la hoja de estilo predeterminada, por lo que en principio se verá todo el texto seguido (salvo que la hoja de estilo modifique la presentación, como se comenta en el apartado siguiente).

ejemplo.css

Enlace a ejemplo 2-1 (xml)

titulo {
  color: red; 
}

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<libro>
  <titulo>La vida está en otra parte</titulo>
  <autor>Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>

se vería así: Enlace a ejemplo 1.

Como ocurre en el HTML,

Un documento XML puede enlazar a varias hojas de estilo

ejemplo.css y ejemplo2.css

Enlace a ejemplo 2-2 (xml)

/* ejemplo.css */
titulo {
  color: red; 
}

/* ejemplo2.css */
autor {
   font-size: 200%; 
}

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<?xml-stylesheet href="ejemplo2.css"?>
<libro>
  <titulo>La vida está en otra parte</titulo>
  <autor>Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>

El enlace puede contener el atributo title, cuyo contenido se muestra en Firefox en el menú y en Internet Explorer mediante el menú .

ejemplo.css

Enlace a ejemplo 2-3 (xml)

titulo {
  color: red; 
}

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css" title="Estilo"?>
<libro>
  <titulo>La vida está en otra parte</titulo>
  <autor>Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>

Un documento XML puede enlazar a hojas de estilo alternativas, que en Firefox se pueden seleccionar mediante el menú y en Internet Explorer mediante el menú .

ejemplo.css

Enlace a ejemplo 2-4 (xml)

/* ejemplo.css */
titulo {
  color: red; 
}

/* ejemplo2.css */
autor {
   font-size: 200%; 
}

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css" title="Estilo"?>
<?xml-stylesheet alternate="yes" href="ejemplo2.css" title="Otro estilo"?>
<libro>
  <titulo>La vida está en otra parte</titulo>
  <autor>Milan Kundera</autor>
  <fechaPublicacion año="1973"/>
</libro>

Si el documento XML utiliza el espacio de nombres del html y utiliza etiquetas html, el navegador aplica la hoja de estilo predeterminada del navegador a esos elementos, como muestra el siguiente ejemplo:

	Enlace a ejemplo 2-5 (xml)
	<?xml version="1.0" encoding="UTF-8"?> <libro xmlns="http://www.w3.org/1999/xhtml"> <h1>La vida está en otra parte</h1> <autor>Milan Kundera</autor> <fechaPublicacion año="1973"/> </libro>

Pero si no se utiliza el espacio de nombres, no lo hace, como muestra el siguiente ejemplo:

	Enlace a ejemplo 2-6 (xml)
	<?xml version="1.0" encoding="UTF-8"?> <libro> <h1>La vida está en otra parte</h1> <autor>Milan Kundera</autor> <fechaPublicacion año="1973"/> </libro>

Volver al principio de la página

Ejemplos de hojas de estilo para XML

Al escribir una hoja de estilo para un documento XML hay que tener en cuenta que los navegadores no aplican generalmente la hoja de estilo predeterminada (salvo que se utilicen etiquetas html asociandolas al espacio de nombres del xhtml como en los ejemplos anteriores), así que al escribir una hoja de estilo para un documento XML hay que definir propiedades que normalmente no se suelen definir.

La más importante es la propiedad display, que establece el modo de visualización del elemento.

Los valores posibles de la propiedad display son none, block, compact, inline, inline-block, inline-table, list-item | marker^(-), run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row y table-row-group.

Los modos de visualización más utilizados son:

block (bloque), es el modo de visualización de los elementos de tipo bloque, como párrafos (<p>), encabezados (<h1>, <h2>, ...), etc. El elemento ocupa toda la ventana en horizontal y ocupa el espacio vertical necesario para alojar el contenido del elemento.
inline, (elemento en línea), es el modo de visualización de etiquetas como <strong>, <em>, <span>, <a>, etc. El elemento sólo ocupa el espacio necesario para alojar el contenido del elemento. En HTML los elementos en-línea tienen que estar contenidos dentro de elementos de bloque.
list-item (lista). Es el modo de visualización de elementos de listas como <li>, <dd>, <dt>.
table-XXX (tabla). Hay varios modo de visualización según que se trate de celdas, filas, etc.

Los ejemplos a continuación muestran el documento siguiente utilizando diferentes hojas de estilo

<?xml version="1.0" encoding="UTF-8"?>
<biblioteca>
  <libro>
    <titulo>La vida está en otra parte</titulo>
    <autor>Milan Kundera</autor>
    <fechaPublicacion>1973</fechaPublicacion>
  </libro>
  <libro>
    <titulo>Pantaleón y las visitadoras</titulo>
    <autor>Mario Vargas Llosa</autor>
    <fechaPublicacion>1973</fechaPublicacion>
  </libro>
  <libro>
    <titulo>Conversación en la catedral</titulo>
    <autor>Mario Vargas Llosa</autor>
    <fechaPublicacion>1969</fechaPublicacion>
  </libro>
</biblioteca>

El único elemento de bloque es <libro>:

	Enlace a ejemplo 3-1 (xml)
libro { display: block; }

Todos los elementos menos <biblioteca> son bloques:

	Enlace a ejemplo 3-2 (xml)
libro, titulo, autor, fechaPublicacion { display: block; }

Mostrando el documento como una lista no ordenada:

	Enlace a ejemplo 3-3 (xml)
titulo, autor, fechaPublicacion { display: list-item; list-style: disc inside; margin-left: 20px; }

Mostrando el documento como una lista ordenada (está hecho con contadores, se podría hacer con list-style-type: upper-alpha, pero en FIrefox no funciona como se comenta en la lección de diferencias entre navegadores)

Enlace a ejemplo 3-4 (xml)

biblioteca {
  counter-reset: contador;
}

titulo:before {
  content: counter(contador, upper-alpha) ". ";
  counter-increment: contador;
}

titulo, autor, fechaPublicacion {
  display: block;
  margin-left: 30px;
}

autor, fechaPublicacion {
  margin-left: 45px;
}

Mostrando el documento como una tabla:

	Enlace a ejemplo 3-5 (xml)
biblioteca { display: table; border-spacing: 10px; border: black 1px solid; } libro { display: table-row; } titulo, autor, fechaPublicacion { border: black 1px solid; display: table-cell; }

Volver al principio de la página

Esta página forma parte del curso "XML: Lenguaje de Marcas Extensible" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 11 de marzo de 2012

Esta obra está bajo una licencia de Creative Commons.