docUNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA
download 
Demanda Transcripción
UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA
UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA
Facultad de Ingeniería
Campus Mexicali
Ing. Navarro Álvarez Pablo Martin
Materia: Desarrollo de Aplicaciones para Internet
PRACTICA # 4
Hojas de Estilo ( CSS: Cascading Style Sheets )
Una hoja de estilo permite aumentar el control del diseñador sobre cómo se verán sus páginas Web,
asociando un conjunto de propiedades de formato físico a los elementos estándard del lenguaje HTML, de
esta forma, el resultado final que observa la persona en su browser es una mezcla entre las características
predefinidas para cada comando HTML y la hoja de estilo:
Una característica importante de esta técnica es que permite lograr una presentación muy uniforme, ya
que basta definir un estilo una sola vez para que éste se aplique a todos los elementos del mismo tipo que
existan en una página.
VENTAJAS
Si bien puede parecer engorroso al principio escribir una serie de instrucciones en código para lograr
nuestros propósitos, la idea que está detrás es que uno escriba este set de instrucciones una sóla vez, en
un archivo separado, y esta hoja de estilo sea usada por una serie de páginas (por ejemplo, por todas las
páginas de un mismo servicio Web). De este modo, conseguimos una presentación uniforme con un
mínimo de esfuerzo, ya que en el caso de que deseemos cambiar algo, basta editar un solo archivo y este
cambio se aplicará a todas las páginas que utilicen ese estilo.
El uso de hojas de estilo evita el uso excesivo de imágenes, que además de que cuesta mucho hacerlas y
mantenerlas a lo largo de las actualizaciones, ocupan bastante más tiempo de transferencia que unas
cuantas líneas de código extra.
USO DE LAS HOJAS DE ESTILO
Existen varias formas alternativas de asociar una hoja de estilo a un documento:
Por ejemplo:
1.- Se utiliza el elemento STYLE dentro del encabezamiento del documento, como en el ejemplo.
2.- Se usa el elemento LINK para referenciar a una hoja de estilo puesta en un archivo aparte.
3.- Se invoca a una hoja de estilo con el comando de CSS "@import ...".
4.- Se agrega el atributo STYLE a un elemento dentro del cuerpo del documento.
Este último método listado, mezcla la hoja de estilo con el contenido del documento y es por lo tanto
una mala opción para establecer estilo para las páginas, aunque es eleccion del diseñador.
EJEMPLO
Veamos a continuación un ejemplo combinado, en el cual se muestran varias formas de llamar a hojas de
estilo:
<HTML>
<HEAD>
<TITLE>Demostración</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool.css" TITLE="Cool">
<STYLE TYPE="text/css"> @import url(http://style.com/basic.css); H1 { color: blue } </STYLE>
</HEAD>
<BODY> <H1>Los encabezamientos son azules</H1>
<P STYLE="color: green">Y los párrafos verdes.</P> </BODY> </HTML>
Universidad Católica los Ángeles de Chimbote
ING CIP EDGAR CRUZ
