Manual Imprescindible XML 2011/Capítulo 5: CSS

Un sencillo ejemplo

De nuevo, un documento XML con detalles de la película Brazil, de Terry Gilliam:

<?xml version="1.0"?>
<pelicula>
	Brazil
	<director>Terry Gilliam</director>
</pelicula>

Sólo con incluir una referencia a un archivo CSS es posible cambiar la apariencia del documento anterior. Éste sería el contenido del archivo CSS:

pelicula
{
	display: block;
	font-size: xx-large;
	font-weight: bold;
	margin-top: 8px;
	margin-left: 8px;
}

director
{
	display: block;
	font-size: medium;
	font-weight: normal;
	top: 21px;
	position: relative;
}

director:before
{
	content: "Director: ";
	font-size: medium;
	font-weight: bold;
}

El documento XML tendría que ser modificado para incluir una referencia a la hoja de estilos anterior:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="filmoteca.css"?>
<pelicula>
	Brazil
	<director>Terry Gilliam</director>
</pelicula>

Fuentes

Entre muchas otras cosas, CSS puede utilizarse para las características del tipo del letra del texto. Es el caso del siguiente ejemplo:

pelicula
{
	font-family: courier;
	font-size: xx-large;
	font-style: italic;
	font-weight: bold;
	text-decoration: underline;
}

El siguiente documento XML hace uso de la anterior hoja de estilos:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="filmoteca.css"?>
<pelicula>Brazil</pelicula>

Posición

Si lo considera necesario puede cambiar la ubicación de los elementos. La siguiente hoja de estilos sirve para tal fin:

pelicula
{
	font-size: xx-large;
	font-weight: bold;
	margin-top: 8px;
	margin-left: 8px;
}

director:before
{
	content: "Director: ";
	font-size: medium;
	font-weight: bold;
}

director
{
	display: block;
	font-size: medium;
	font-weight: normal;
	top: 21px;
	position: relative;
}

Compruebe los resultados obtenidos en el siguiente documento XML:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="filmoteca.css"?>
<pelicula>
	Brazil
	<director>Terry Gilliam</director>
</pelicula>

Imágenes

La siguiente hoja de estilos permite incluir una imagen en el documento XML:

pelicula
{
	font-size: xx-large;
	font-weight: bold;
	margin-top: 8px;
	margin-left: 8px;
}

director:before
{
	content: "Director: ";
	font-size: medium;
	font-weight: bold;
}
director
{
	display: block;
	font-size: medium;
	font-weight: normal;
	top: 21px;
	position: relative;
}

cartel
{
	background:
		url("http://upload.wikimedia.org/wikipedia/en/3/3e/Brazilposter.jpg")
		no-repeat center center;
	width: 224px;
	height: 350px;
	float: left;
	top: 21px;
	position: relative;
}

Fíjese en que el documento XML al que se aplica no contiene referencia alguna a dicha imagen:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="filmoteca.css"?>
<pelicula>
	Brazil
	<director>Terry Gilliam</director>
	<cartel/>
</pelicula>

Enlaces interesantes

Puede que encuentre interesantes los siguientes enlaces:

• La norma CSS se encuentra descrita aquí.
• Una hermosa demostración de lo que puede lograrse utilizando CSS.