UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA
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>