8 Acercamiento A Hojas de Estilo

8 Acercamiento a Hojas de Estilo
8-1 Introduccin
Las Hojas de Estilo son un mtodo que nos permite bsicamente modificar las caractersticas por defecto que tienen las etiquetas HTML y sus atributos. Como ejemplo podramos crear una hoja de estilo, que nos permita por defecto hacer que todos los archivos HTML que generemos posean la misma imagen de fondo, sin necesidad de escribir el atributo background de la etiqueta <BODY>. Tambin podramos modificar los atributos por defecto de las etiquetas <DIV> y </DIV> para que automticamente el texto encerrado entre ellas se vea de color azul en fuente Arial y tamao de 13 pxeles. La informacin sobre las nuevas caractersticas por defecto, se almacenan en un archivo externo a los documentos HTML, el cual se guarda con la extensin css.
8-2 Vinculacin de archivos HTML y CSS

A los archivos HTML que queramos posean las nuevas caractersticas por defecto definidas en un archivo CSS, les debemos agregar en el encabezado la etiqueta <LINK>. Su formato es: <LINK rel=stylesheet href="direccin URL" type="text/css"> type="text/css" y rel=stylesheet sin entrar en detalles sobre estos atributos solo diremos que son necesarios incluirlos tal cual estn aqu y que declaran el tipo de archivo al que se esta vinculando. href aqu se pone la ruta absoluta o relativa en la cual est el archivo CSS.
El archivo HTML anterior muestra en su cdigo que esta enlazado al archivo "estilo.css".
8-3 Ventaja del uso de archivos CSS

La ventaja principal es que podemos determinar el aspecto de un conjunto de archivos HTML (sitio web) y modificar sus caracterstica cuando queramos con la simplicidad de tener que cambiar un solo archivo, el archivo CSS.
8-4 Un ejemplo de Hojas de Estilo
/****************************** BODY *******************************/ BODY { /* Determina color e imagen de fondo */ background-color: #2f2f2f; background-image: url(fondo.gif); /* Determina los mrgenes inferior, izquierdo, derecho y superior */ /* para mostrar el contenido del archivo HTML en pxeles */ margin-bottom: 0px; margin-left: 5px; margin-right: 5px; margin-top: 0px; /* Determina: fuente, tamao en pxeles y color del texto */ font-family: verdana; font-size: 13px; color: #cc00ff; }
/**************************** LINKS ******************************/ A { /* Determina: fuente, tamao en pxeles y color de los links */ font-family: arial; font-size: 13px; color: #00cccc; /* Determina si el link tiene o no subrayado segn: */ /* tiene=underline no_tienen=none */ text-decoration: none; }
A:active { /* Determina: color, subrayado y fuente de los links activos */ color: #0099ff; text-decoration: underline; font-family: helvetica; }
A:visited { /* Determina: color, subrayado y fuente de los links visitados */ color: #990066; text-decoration: underline; font-family: sans-serif; }
/******************** OTRAS ETIQUETAS EN GENERAL *********************/ /* Determino el estilo que tendr el texto contenido entre <H1></H1> */ H1 { /* Tamao del texto puntos(pt), pulgadas(in), centmetros(cm), pxeles(px) */ font-size: 12pt; /* Nombre de la fuente */ font-family: courier; /* Espesor (light|medium|bold) */ font-weight: bold; /* Cursiva (normal|italic) */ font-style: italic; /* Color en sistema RGB hexadecimal */ color: blue; /* Subrayado (none|underline) */ text-decoration: underline; /* Alineacin (left|center|right) */ text-align: right; /* Color de fondo en sistema RGB hexadecimal */ background: #33CC00; /* Define el espacio entre lneas y la identacion del texto */ /* en puntos(pt), pulgadas(in), centmetros(cm), pxeles(px) */ line-height: 24pt; text-indent: 0.5in; /* Establece los mrgenes del texto: izquierdo, derecho, superior, inferior */ /* en puntos(pt), pulgadas(in), centmetros(cm), pxeles(px) */ margin-left: 1in; margin-right: 1in; margin-top: -20px; margin-bottom: 2 cm; } El ejemplo visto anteriormente, permitir que por analoga se pueda construir una hoja de estilo, la definicin para la etiqueta <H1> es genrica y se puede aplicar a otras etiquetas como por ejemplo <Hn>, <DIV>, <P>, etc.. Para cualquier etiqueta, los atributos descriptos no son obligatorios, es decir que si alguno se omite, tomara el valor que por defecto el HTML le otorga.

8 Acercamiento A Hojas de Estilo

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

8 Acercamiento A Hojas de Estilo

Transféré par

Droits d'auteur :

Formats disponibles

8 Acercamiento a Hojas de Estilo

8-2 Vinculacin de archivos HTML y CSS

8-3 Ventaja del uso de archivos CSS

8-4 Un ejemplo de Hojas de Estilo

Vous aimerez peut-être aussi