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

Los documentos XML se pueden ver en los navegadores web aunque no tengan asociada una hoja de estilo CSS. Los navegadores simplemente muestran el documento (etiquetas y texto en Fierfox 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 con la etiqueta <link />.

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.

Cuando un documento XML se visualiza en un navegador web, los navegadores muestran el documento XML aplicando la hoja de estilo y ya no se muestran las etiquetas. Por supuesto, el resultado dependerá de las limitaciones de los navegadores aplicando las propiedades CSS (sobre todo en versiones antiguas de Internet Explorer).

Los ejemplos siguientes muestran ejemplos de instrucciones de procesamiento <?xml-stylesheet ... ?> en documentos XML equivalentes a las etiquetas <link /> de documentos html.

El ejemplo siguiente enlaza a una hoja de estilo que simplemente aumenta el tamaño de letra.

Enlace a ejemplo 2-1 (xml)

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Ejemplo con link</title>
  <link rel="stylesheet" href="ejemplo.css"/>
 </head>
 <body>
  <p>Ejemplo</p>
 </body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Ejemplo con xml-stylesheet</title>
 </head>
 <body>
  <p>Ejemplo</p>
 </body>
</html>

El ejemplo siguiente enlaza a dos hojas de estilo, la primera aumenta el tamaño de letra y la segunda subraya el texto .

Enlace a ejemplo 2-2 (xml)

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Ejemplo con link</title>
  <link rel="stylesheet" href="ejemplo.css"/>
<link rel="stylesheet" href="ejemplo2.css" title="Estilo"/> </head>
 <body>
  <p>Ejemplo</p>
 </body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css"?>
<?xml-stylesheet href="ejemplo2.css"?><html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Ejemplo con xml-stylesheet</title>
 </head>
 <body>
  <p>Ejemplo</p>
 </body>
</html>

El ejemplo siguiente enlaza a una hoja de estilo que simplemente aumenta el tamaño de letra y además el title de la hoja de estilo se muestra en el menú de selección de la hoja de estilo del navegador (no disponible en todos los navegadores).

Enlace a ejemplo 2-3 (xml)

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Ejemplo con link</title>
  <link rel="stylesheet" href="ejemplo.css" title="Estilo"/>
 </head>
 <body>
  <p>Ejemplo</p>
 </body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css" title="Estilo"?>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Ejemplo con xml-stylesheet</title>
 </head>
 <body>
  <p>Ejemplo</p>
 </body>
</html>

El ejemplo siguiente enlaza a una hoja de estilo que simplemente aumenta el tamaño de letra pero también permite elegir una hoja de estilo alternativa que subraya el texto (no disponible en todos los navegadores).

Enlace a ejemplo 2-4 (xml)

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Ejemplo con link</title>
  <link rel="stylesheet" href="ejemplo.css" title="Estilo"/>
  <link rel="alternate stylesheet" href="ejemplo2.css" title="Otro estilo"/>
 </head>
 <body>
  <p>Ejemplo</p>
 </body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="ejemplo.css" title="Estilo"?>
<?xml-stylesheet alternate="yes" href="ejemplo2.css" title="Otro estilo"?>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Ejemplo con xml-stylesheet</title>
 </head>
 <body>
  <p>Ejemplo</p>
 </body>
</html>

Hay que tener en cuenta que al mostar un documento XML con una hoja de estilo CSS asociada, los navegadores no muestran los atributos de las etiquetas, sino que únicamente muestran el texto contenido en las etiquetas.

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 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 párrafos (<p>), encabezados (<h1>, <h2>, ...). El elemento ocupa toda la ventana en horizontal y ocupa el espacio vertical necesario para alojar el contenido de la etiqueta.
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 por 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 tarte 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: decimal, 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) ". ";
  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: 31 de marzo de 2011

Esta obra está bajo una licencia de Creative Commons.