| Para
estructurar el lenguaje HTML aparecieron las denominadas hojas
de estilos (CSS) en un intento de separar contenido de formato
en las páginas web. Las reglas CSS son definiciones
del aspecto con que se presenta un documento al usuario. Esto
permite
independizar
el contenido de una página web de su estructura y de
entrada nos da la posibilidad de alterar su aspecto sin necesidad
de modificar la página, sino tan sólo su estilo.
En el siguiente ejemplo vemos el uso de estilos aplicado a
un párrafo en una página web
<p class="titulo">Este es el titulo de una
pagina</p>
El atributo class del párrafo contiene como valor
el nombre de un estilo, titulo, que está definido
usando CSS en la sección HEAD de la página:
<style type="text/css">
<
!--
.titulo = { font-size: 20; font-.family: Verdana; font-color:
#FFCC00 }
.cuerpo = {font-size: 10; font-family: Arial; font-color:
black}
-->
<
/style>
Pensemos que en nuestro sitio web tenemos cientos de páginas
que comparten los mismos formatos para el encabezado y el
cuerpo. Al usar CSS para describir este formato si en un
momento dado necesitamos cambiar el aspecto del encabezado
tan sólo debemos modificar la definición de
su estilo (.titulo en nuestro ejemplo), no tenemos que editar
una por una esos cientos de páginas. Las CSS nos permiten
crear estilos propios o modificar
los ya existentes, así puedo
redefinir el elemento body para que incluya una imagen de
fondo, desde ese momento en todas las páginas que
tengan ligada esa redefinición, aparecerá esa
imagen de fondo ¡sin necesidad de tocar una sóla
línea del HTML!
Pero no es ésta la única
ventaja de las CSS, otra de sus múltiples ventajas
es que permite además describir bloques dentro del
documento que pueden ser situados en cualquier parte del
mismo, independientemente de donde lo hayamos escrito al
crear la página, es el llamado posicionamiento absoluto. ¿Y
si además pudieramos cambiar los estilos cuando la
página está cargada? Pues puedes hacerlo con
Javascript
|
