CO-07_M3AA1L2_Hojas Versión: Septiembre 2013 Revisor: En lista
Introducción a Hojas de Estilo Por Héctor Hugo Luna Miranda
Conociendo las hojas de estilo De inicio, te presento un par de preguntas cuyas respuestas se obtendrán siguiendo los lineamientos de Vázquez (2006):
¿Qué es una hoja de estilo y en qué te ayuda en la creación de sitios Web? Las hojas de estilo o también conocidas como código CSS son la mejor manera de personalizar el aspecto visual de nuestras páginas de forma sencilla, rápida y eficaz. Se trata de un método de codificación complementaria al HTML, basada en este lenguaje, que permite crear estilos visuales para aplicar a las diversas etiquetas que puede contener una página. Es así que podremos crear estilos individuales para los párrafos, los textos, las tablas, etc. Mediante las hojas de estilo podremos controlar y personalizar márgenes, alineaciones, colores, formatos, fuente, espesores, altos, anchos e infinidad de opciones más, todo ello sin la necesidad de modificar individualmente cada elemento de la página (Vázquez, 2006, p. 136).
¿Cómo identificas que en tu página Web se está haciendo uso de Hojas de Estilo? Puedes aplicar hojas de estilo a un documento HTML de dos formas: 1. Especificándolo en cada etiqueta HTML por medio del atributo “style”. 2. Utilizando la etiqueta dentro del encabezado de la página () que permite escribir código CSS directamente dentro de ella.
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito de la Universidad Virtual del Estado de Guanajuato.
1
CO-07_M3AA1L2_Hojas Versión: Septiembre 2013 Revisor: En lista
Ejemplo 1. Aplicación de hoja de estilo directamente en la etiqueta
Figura 1. Aplicación de hoja de estilo directamente en una etiqueta HTML.
Como puedes observar en el ejemplo anterior, hay dos etiquetas
. A la primera de ellas se le ha agregado el atributo style. Dentro del atributo style se coloca el código color:red, el cual, en CSS indica que el color del texto será rojo. En la segunda etiqueta el atributo style tiene el siguiente valor border:1px solid, lo cual, significa que la etiqueta estará rodeada de un borde negro.
Ejemplo 2. Aplicación de hoja de estilo usando la etiqueta
Figura 2. Aplicación de hoja de estilo usando etiqueta .
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito de la Universidad Virtual del Estado de Guanajuato.
2
CO-07_M3AA1L2_Hojas Versión: Septiembre 2013 Revisor: En lista
Este ejemplo tiene el mismo efecto que el primero. La diferencia es que se hace uso de la etiqueta , la cual permite escribir código CSS dentro de la página HTML sin hacer uso del atributo style de las etiquetas. Hay dos párrafos que se muestran en color rojo y uno que tiene un borde negro. En CSS hay dos formas de asignar estilo a nuestras etiquetas, ya sea por el atributo class (pueden existir varias etiquetas con este atributo y el mismo valor), y el atributo id (el valor de este atributo debe ser único para cada etiqueta). Entonces, podemos observar que hay dos etiquetas
con el atributo “class=rojo” sobre las cuales va a tener efecto el código CSS. .rojo {color:red;} El ( . ) en este código indica que va a hacer referencia a todas las etiquetas que tengan en su atributo class (el valor después del punto) en este caso “rojo”, entonces, en todas las etiquetas que tengan como atributo class=rojo el color del texto será rojo. Referente al párrafo que tiene el borde de color negro, el código que le correspondería es: #borde{border:1px solid;} En este ejemplo vemos que cambia el ( . ) por un símbolo de ( # ). La diferencia es que en lugar de preguntar por el atributo class se está haciendo referencia al atributo id de la etiqueta. En este caso, a la etiqueta que tenga como atributo id=borde se le va a colocar un borde de color negro con ancho de un píxel. Con base a los ejemplos anteriores, se puede obtener la sintaxis de las Hojas de Estilo. Para que sea más ilustrativo, observa la figura 3
Figura 3.Sintaxis de código CSS.
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito de la Universidad Virtual del Estado de Guanajuato.
3
CO-07_M3AA1L2_Hojas Versión: Septiembre 2013 Revisor: En lista
Existe una gran variedad de Propiedades (modificadores) de CSS y cada una toma diferente valor para tener una amplia flexibilidad al momento de estar aplicando diseño a la página Web. A continuación, podrás observar algunas tablas con las propiedades más comunes y los valores que reciben.
Comando modificador
Función
Valor
margin-top, margin-right, margin-bottom, margin-left, margin:top right bottom left padding-top, padding -right, padding -bottom, padding left, padding:top right bottom left border-top-width, border right-width, border -bottomwidth, border -left-width, border-width:top right bottom left border-style border-color
Distancia entre un bloque y los restantes elementos-
Tamaño, porcentaje.
Distancia entre el border y el contenido de un bloque.
Tamaño, porcentaje.
Ancho de los diferentes bordes de un bloque.
Tamaño.
Estilo visual del borde del bloque. Color del borde.
width, height float
Ancho y largo del bloque. Alineación del contenido del bloque.
NONE, SOLID, 3D. Color (en código hexadecimal o nombre en inglés). Tamaño, porcentaje. NONE, LEFT, RIGHT.
Font-family
Tipo de letra.
Familias tipográficas genéricas.
Font-size
Tamaño de fuente
Tamaño.
Font-weight
Espesor de la letra.
NORMAL, BOLD, BOLDER, LIGHTER-
Font-style
Estilo de la fuente.
NORMAL, ITALIC, ITALIC SMALL-CAPS, OBLIQUE, OBLIQUE SMALL-CAPS, SMALL CAPS.
Figura 4. Propiedades básicas de CSS (Vázquez, 2006, p. 137).
Si deseas conocer más Propiedades (Modificadores) de CSS, te recomiendo visitar los siguientes enlaces:
• • •
Manual básico CSS: http://klingon.uab.es/carles/coses/manual_css.pdf Introducción a CSS: http://www.librosweb.es/css/ Referencias CSS 2.1 : http://www.librosweb.es/referencia/css/index.html
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito de la Universidad Virtual del Estado de Guanajuato.
4
CO-07_M3AA1L2_Hojas Versión: Septiembre 2013 Revisor: En lista
Resumen En este documento aprendiste el término de Hojas de Estilo y sus principales características, por medio de las cuales podrás identificar su uso en las páginas HTML. Con ello, serás capaz de crear, identificar y comprender el código en el que se haga uso de Hojas de Estilo para dar diseño a las páginas Web. Obteniendo así, páginas más atractivas y flexibles.
Referencias Vázquez, P. (2006). Manual de Usuarios. Argentina: Banfield, Gradi.
Bibilografía Aubry, C. (2009). Informática técnica. Barcelona: ENI. [Versión electrónica]. Disponible en: http://books.google.com.mx/books?id=5Dq8_SvbfUC&printsec=frontcover&dq=hojas+de+estilo&hl=es&ei=3yezTJu0 CY6msQP3-sk&sa=X&oi=book_result&ct=result&resnum=5&ved=0CEIQ6AEwBA#v=o nepage&q&f=false Codina, L. (2002, julio-agosto). Hojas de estilo. Disponible en: http://www.elprofesionaldelainformacion.com/contenidos/2002/julio/8.pd f Dreyfus, M. (2001). Hojas de estilo CSS HTML (Trad. Roberto Tato). Barcelona: Marcombo. [Versión electrónica]. Disponible en: http://books.google.com.mx/books?id=CpeR42YDoNoC&printsec=frontcover&dq=h ojas+de+estilo&hl=es&ei=3yezTJu0CY6msQP3-sk&sa=X&oi=book_result&ct=result&resnum=1&ved=0CC8Q6AEwAA#v= onepage&q&f=false Eguíluz, J. (2009). Introducción a CSS. España: Libros.es. [Versión electrónica]. Disponible en: http://www.librosweb.es/css/ Weinman, W. (2002). Diseño creativo HTML.2. Manual de diseño práctico para Internet (Trad. Sergio Kourchenko). México: Pearson Educación. [Versión electrónica]. Disponible en: http://books.google.com.mx/books?id=TE3Iay6pZagC&pg=PT303&dq= hojas+de+estilo&hl=es&ei=3yezTJu0CY6msQP3-sk&sa=X&oi=book_result&ct=result&resnum=8&ved=0CFEQ6AEwBw#v= onepage&q=hojas%20de%20estilo&f=false
©UVEG. Derechos reservados. Esta obra no puede ser reproducida, modificada, distribuida, ni transmitida, parcial o totalmente, mediante cualquier medio, método o sistema impreso, electrónico, magnético, incluyendo el fotocopiado, la fotografía, la grabación o un sistema de recuperación de la información, sin la autorización por escrito de la Universidad Virtual del Estado de Guanajuato.
5