FANDOM


Un sencillo ejemploEditar

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>

FuentesEditar

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ónEditar

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ágenesEditar

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 interesantesEditar

Puede que encuentre interesantes los siguientes enlaces:

El contenido de la comunidad está disponible bajo CC-BY-SA a menos que se indique lo contrario.