Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de XML

XML es un lenguaje para esructurar datos que puede emplearse en la web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

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:

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:

• list-item : convierte el elemento en una entrada de una lista.
• table : convierte el elemento en una tabla.
• table-row : convierte el elemento en una fila de una tabla.
• table-cell : convierte el elemento en una celda de una tabla.
• table-caption : convierte el elemento en el título de la tabla.
• table-header-group : convierte el/los elemento/s en la fila de cabecera de una tabla.
• table-footer-group : convierte el/los elemento/s en la fila final de una tabla.

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

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com