Cómo asociar un archivo CSS a un documento XML

03/07/2023

5. Cómo asociar un archivo CSS a un documento XML

Para asociar un archivo CSS (Cascading Style Sheets, Hojas de estilo en cascada) a un documento XML, se utiliza la declaración de procesamiento llamada xml-stylesheet. Esta declaración se coloca en la parte superior del documento XML, después de la declaración XML.

Contenidos del artículo

Ejemplo de cómo se realiza la asociación:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="estilos.css"?>
<root>
  <!-- Contenido del documento XML -->
</root>

En el ejemplo anterior, se utiliza la declaración xml-stylesheet para indicar que se debe aplicar un archivo CSS al documento XML. La declaración tiene dos atributos:

type: Especifica el tipo de archivo de estilo, que en este caso es «text/css» para un archivo CSS.
href: Indica la ubicación del archivo CSS que se debe aplicar al documento XML. En este ejemplo, el archivo CSS se encuentra en el mismo directorio que el documento XML y se llama «estilos.css«.

Ejemplo de un documento XML con un CSS asociado:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="estilos.css"?>
<root>
  <element attribute="value">Text Content</element>
</root>

/* Estilos CSS */
root {
  font-family: Arial, sans-serif;
  color: red;
}
element {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

En este ejemplo, el documento XML tiene un elemento raíz llamado <root> que contiene un elemento llamado <element>. El atributo attribute del elemento tiene el valor «value». El texto «Text Content» se encuentra dentro del elemento.

El CSS asociado al documento XML define estilos para el elemento <root> y el elemento <element>. Estos estilos incluyen la fuente, el color del texto, el fondo, el relleno y el borde.

5.1. ¿Por qué es tan necesario usar CSS?

Las etiquetas HTML tienen funcionalidades bien definidas y los navegadores tienen una hoja de estilo predefinida. Así por ejemplo la etiqueta <h1> suele corresponderse en el navegador con una fuente Times New Roman de tamaño 24 puntos. Sin embargo, para XML el navegador no sabe cómo tiene que representar cada etiqueta, ya que son definidas por el programador o programadora.

Además, las etiquetas como <title>, <head> y <body> pueden ser interpretadas erróneamente como etiquetas HTML por el navegador.

El uso de CSS en XML es importante por varias razones:

Separación de preocupaciones: CSS permite separar el estilo visual de la estructura y contenido del documento XML. Esto facilita la mantenibilidad del código, ya que los cambios en la apariencia no afectarán la estructura ni el contenido del documento.
Consistencia visual: Con CSS, se pueden definir estilos consistentes en todo el documento XML. Esto asegura que todos los elementos se vean de la misma manera, lo que mejora la experiencia del usuario y ofrece una apariencia coherente.
Flexibilidad y personalización: CSS ofrece una amplia gama de propiedades y selectores que permiten personalizar la apariencia de los elementos XML. Esto ofrece flexibilidad para adaptar el diseño a diferentes dispositivos, tamaños de pantalla o preferencias de los usuarios.
Mantenibilidad y reutilización: Al utilizar CSS, es posible definir estilos una vez y aplicarlos a múltiples elementos en el documento XML. Esto promueve la reutilización de estilos y simplifica la tarea de mantenimiento, ya que los cambios en el diseño se pueden realizar de forma centralizada en la hoja de estilos CSS.
Mejora de la accesibilidad: CSS ofrece características para mejorar la accesibilidad del documento XML, como el ajuste del tamaño del texto, el contraste de color y la navegación mediante el uso de estilos visuales claros y consistentes.

5.2. Ejercicio propuesto

Catálogo de libros de programación en XML con estilos CSS personalizados

Crea un documento XML llamado programmingCatalogYourName.xml que represente un catálogo de libros sobre programación e informática. Además, diseñarás una hoja de estilo CSS (styles.css) para presentar el contenido de manera elegante.

Parte 1: Creación del documento XML

Nombre del archivo: programmingCatalogYourName.xml (en YourName incluye tu nombre completo).
Contenido del XML: El documento debe contener un catálogo de libros. Cada libro debe incluir título, autor, año de publicación y editorial. Ejemplo de estructura:

   <?xml version="1.0" encoding="UTF-8"?>
   <?xml-stylesheet type="text/css" href="styles.css"?>
   <catalog>
       <book>
           <title>Clean Code</title>
           <author>Robert C. Martin</author>
           <year>2008</year>
           <publisher>Prentice Hall</publisher>
       </book>
       <!-- Agrega al menos tres libros más siguiendo este formato -->
   </catalog>

Parte 2: Creación de la hoja de estilo CSS

Nombre del archivo: styles.css
Estilos CSS:

General del catálogo:
- Color de fondo: #f2f2f2
- Fuente: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif
- Color de texto: #333
- Padding: 20px
Estilo para cada libro:
- Borde: 1px sólido #ccc
- Sombra: 2px 2px 4px rgba(0,0,0,0.1)
- Margin-bottom: 15px
- Padding: 15px
- Border-radius: 8px
- Fondo: #fff
Título del libro:
- Fuente: 20px, negrita
- Color: #007bff
Autor:
- Fuente: 18px, cursiva
- Color: #555
Año y editorial:
- Fuente: 16px
- Color: #666

Instrucciones:

Crea los archivos programmingCatalogYourName.xml y styles.css con el contenido y estilos detallados.
Asegúrate de incluir al menos tres libros adicionales en tu catálogo.
Visualiza el archivo XML en un navegador para comprobar la correcta aplicación de los estilos CSS. Pudes visualizarlo con botón derecho del ratón sobre el archivo / Abrir con y seleccionando el navegador preferido.

Visualización aproximada:

5.3. Ejercicio propuesto

Crea un documento XML que represente una tabla de datos sobre componentes de hardware de computadoras y aplícale una hoja de estilo CSS para mejorar su presentación.

Tabla de Datos:

ID	Tipo	Marca	Modelo	Especificaciones
1	Procesador	Intel	Core i7-9700K	8-Core, 3.6 GHz
2	RAM	Corsair	Vengeance LPX 16GB	DDR4, 3200MHz
3	Tarjeta Gráfica	NVIDIA	GeForce RTX 3080	10GB GDDR6X
4	Disco Duro	Western Digital	WD Blue 1TB	SATA, 7200 RPM
5	Placa Base	ASUS	ROG Strix Z390-E	Socket LGA1151, ATX

Instrucciones:

Nombre del Archivo XML: hardwareCatalogYourName.xml (cambia YourName por tu nombre completo).
Nombre del Archivo CSS: styles.css.
Estructura del Documento XML:
- Declaración XML estándar al inicio.
- Elemento raíz: <hardwareCatalog>.
- Cada fila de la tabla debe representarse como un <item> dentro del catálogo.
- Cada <item> debe contener elementos para id, type, brand, model, y specifications.
Asociar la Hoja de Estilo CSS:
- Agrega una instrucción de procesamiento al inicio del documento XML para vincular la hoja de estilo CSS.
- Ejemplo: <?xml-stylesheet type="text/css" href="styles.css"?>.
Estilos CSS:

El fondo del documento (hardwareCatalog) debe ser color gris claro (#f0f0f0).
Utiliza Arial como la fuente predeterminada.
Cada elemento <item> debe tener un borde sólido de 1px, color gris claro (#ddd), un margen inferior de 10px, un padding de 5px y ser de tipo bloque.
El <id> de cada elemento debe mostrarse en tamaño de fuente 1.2em y en negrita.
El <type> debe mostrarse en color azul.
La marca (<brand>) en color verde.
El modelo (<model>) en color lila.
Las especificaciones (<specifications>) deben estar en cursiva.

En la siguiente sección descubrirás cómo utilizar las secciones CDATA en XML para incluir contenido especial sin problemas de interpretación por el parser.

Cómo asociar un archivo CSS a un documento XML

¡Invítanos a un café!

Servicios

Suscríbete a la newsletter