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; 
  padding-top: 21px;
}
director:before {
  content: "Director: "; 
  font-size: medium; 
  font-weight: bold; 
}
actor {
  display: block; 
  font-size: medium; 
  font-weight: normal; 
}
actor:before {
  content: "Protagonista: "; 
  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-02.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-03.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-04.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://www.impawards.com/1985/posters/brazil.jpg)
    no-repeat center center;
  height: 300px;
  width: 198px;
  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-05.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.