- Existe una pequeña diferencia entre CSS en XHTML y CSS en XML
- Los atributos style, class y los elementos <STYLE> O <LINK> no tienen significado en XML
-
La instrucción de procesamiento para asignar estilos es:
<?xml-stylesheet type="text/css" href=urlhojaestilo?>
- En XML no se precisa el atributo class, los objetos ya estan definidos por medio de las propias etiquetas
En el siguiente ejemplo al fichero clase-con-estilo.xml le hemos añadido la instrucción
<?xml-stylesheet type="text/css" href="clase.css"?>
que contiene los estilos que aplicaremos a cada etiqueta.
Ejemplo de css y XML
Fichero xml sin formato clase-sin-estilo.xmlFichero xml con formato clase-con-estilo.xml¡Atención! Si no puedes ver el fichero xml con los estilos en tu navegador, seguramente tienes activada la extension XML.Deshabilítala. Actívala de nuevo, cuando termines las actividades.Fichero css clase.css
Aquí podemos observar un pequeño fragmento de clase.css
clase {
font-size: 12pt;
font-family: Helvetica,Arial,sans-serif;
background-color: rgb(10,10,250);
}
id {
display: block;
background-color: rgba(80%,50%,0%, 0.9);
font-family: Helvetica,Arial,sans-serif;
}
curso:before {
Content: "Curso: ";
}
curso,letra {
font-size: 22pt;
}
anios:before {
Content: " (";
}
anios:after {
Content: ") ";
}
anios {
font-size: 20pt;
display: inline;
}
|
Actividades
Actividad: Dos hojas de estilos
Utilizando el fichero clase-sin-estilo.xml, asóciale dos hojas de estilo, una llamada a.css y otra llamada b.css.
Incluye el siguiente código en cada una de ellas:
a.css
============
* {
font-size: 120%;
display: block;
}
b.css
============
* {
background-color: yellow;
display: inline;
}
Comprueba el resultado en el navegador.
A continuación, modifica el fichero clase-sin-estilo.xml intercambiando el orden en que se cargan las hojas, es decir, primero b.css y luego a.css. Compara el nuevo resultado en el navegador.
Actividad: Hoja de estilos (Párrafos)
Dado el siguiente documento XML,
<?xml version="1.0" encoding="UTF-8"?>
<biblioteca>
<libro>
<titulo>XML Curso de inciación</titulo>
<autor>David Hunter</autor>
<fechaPublicacion>2005</fechaPublicacion>
</libro>
<libro>
<titulo>Lenguajes de Marcas y SGI</titulo>
<autor>Javier S. Zurdo</autor>
<fechaPublicacion>2001</fechaPublicacion>
</libro>
<libro>
<titulo>Desarrollo WEB con PHP y MySQL</titulo>
<autor>Luke Welling</autor>
<fechaPublicacion>2005</fechaPublicacion>
</libro>
</biblioteca>
escribe las hojas de estilo externas que permitan verlo en el navegador como se muestra a continuación:
FORMATO A)
FORMATO B)
FORMATO C)
FORMATO D)
Actividad: Crear una hoja de estilos libre
Añadir al documento cd2.xml, creado anteriormente en Instrucciones de Procesamiento, una hoja de estilos externa para una presentación en el navegador lo más adecuada posible.