Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

XML III

Estilo con CSS

Asociar un archivo CSS

Tenemos varias formas para poder presentar los archivos XML como páginas web. Una primera manera, es crearle un archivo CSS asociado. Para ello lo primero es incluir el enlace o link al archivo CSS.

Después de la primera línea o primera declaración pondremos todas las líneas de los links o archivos asociados. Para asociar un archivo CSS escribiremos:

<?xml-stylesheet type="text/css" href="ejemplo1.css"?>

Esta línea la escribiremos siempre igual cuando queramos asociar el XML a un archivo CSS. Lo único que debemos cambiar es la ruta hacia el archivo o href.

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet type="text/css" href="ejemplo1.css"?>
<animales>
  <nombre_grupo>Reptiles</nombre_grupo>
    <grupo>
      <tipo>Lagartos</tipo>
      <tipo>Cocodrilos</tipo>
      <tipo>Serpientes</tipo>
      <tipo>Tortugas</tipo>
  </grupo>
</animales>

Ahora creamos el archivo ejemplo1.css. Tal como ocurre en HTML los selectores son los nombres de las etiquetas.

animales { margin: 50px; }
nombre_grupo { display: block; font: bold 20px arial; }
grupo { display: block; }
tipo  { display: list-item; margin-left: 20px; }

El archivo XML lo veremos ahora como en el siguiente enlace:

Ejemplo XML_1

La propiedad display

La clave de la conversión del archivo XML es la propiedad display de CSS. Por defecto las etiquetas de XML (excepto la etiqueta o elemento raiz), son etiquetas en linea (propiedad display: in-line); mediante la propiedad display podemos convertirlas en etiquetas de bloque (valor block).

Pero la propiedad display tiene otra serie de valores que no suelen usarse en HTML, pero que aquí si pueden sernos útiles, por ejemplo:

De esta manera, y aplicando después las demás propiedades de CSS podemos hacer páginas con XML y CSS bastante completas, ya que podemos convertir los elementos en elementos de bloque, hacer tablas y listas.

Ejemplo de tabla con XML y CSS

Vamos a hacer un ejemplo de cómo se puede hacer una tabla con XML, ayudandonos de CSS. veamos el archivo XML al que le hemos puesto ya su correspondiente link hacia el CSS:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="ejemplo2.css"?>
<direcciones>
<titulo>Direcciones</titulo>
<cabecera>
<nombre>nombre</nombre>
<telefono>Telefono</telefono>
<email>E-mail</email>
</cabecera>
<contacto>
   <nombre>Jacinto Perez</nombre>
   <telefono>624153976</telefono>
   <email>jacipe@ymail.com</email>
</contacto>
<contacto>
   <nombre>Pepito Grillo</nombre>
   <telefono>654987321</telefono>
   <email>pepigri@hotmail.com</email>
</contacto>
<contacto>
   <nombre>Pablo Romanones</nombre>
   <telefono>912547393</telefono>
   <email>pablorom@gmail.com</email>
</contacto>
</direcciones>

El archivo consiste en una libreta de direcciones, ahora con CSS pondremos cada "contacto" en una fila de una tabla. Este es el archivo CSS:

direcciones { display: table; width: 500px; 
              border: 5px double black; margin: 10px 50px; }
titulo { display: table-caption; font: bold italic 20px verdana; 
         color: navy;text-align: center;  }
cabecera { display: table-row; font: bold 14px arial; 
           text-align: center;  }
contacto{ display:  table-row; font: normal 14px arial; 
          text-align: left; }
nombre, telefono, email { display: table-cell; 
        border: 1px solid black; border-collapse: collapse; 
        padding: 3px 5px;}

El resultado del ejemplo anterior podemos verlo en la página del siguiente enlace:

Ejemplo XML_2

Carencias de CSS en XML

Aunque con CSS se pueden visualizar los archivos XML en los navegadores, esta no puede ser la solución, ya que esta forma de visualizar las páginas tiene importantes carencias.

Utilizando sólo CSS no podemos poner en la página ni enlaces ni formularios, y tampoco podemos poner imágenes o contenido multimedia.

Otra carencia importante es no poder poner el título de la página en la pestaña del navegador, tal como hace HTML.

Por lo tanto CSS, aun siendo una herramienta importante para poder dar una forma adecuada a la página, no es suficiente para poder crear una página que tenga un mínimo de calidad.

Es por eso que aparte del archivo CSS, tenemos que utilizar otro tipo de archivo de estilo, los archivos XSL, que los veremos en la siguiente página.






En la siguiente página veremos los archivos XSL, que permiten visualizar un archivo XML como una página web.

Estilo con XSL



Manual XML

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo