| Menú principal |
|
|
|
|
|
| Noticias |
|
|
|
|
|
| Canales |
|
|
|
|
|
|
|
|
|
|
|
|
|
| Servicios |
|
|
|
|
|
|
|
|
|
|
|
|
Las hojas de estilo |
Casi todo el que dasarrolla webs ha oido hablar de las hojas de estilo pero son muy
pocos webmasters quienes las utilizan en la creación de sus páginas. La razón de este
poco uso debe ser el simple desconocimiento porque, como ahora veremos, son una
herramienta sencillísima de manejar pero muy potente a la hora de diseñar y modificar
una página.
Una hoja de estilo es simplemente un fichero de texto en el que definimos formatos,
tamaños, fuentes, separaciones, etc. que luego aplicaremos en toda la página. Por ejemplo,
para varios párrafos alineados a la derecha, con fuente arial negrita de 10 puntos de
color azul podemos hacer los siguiente:
<P ALIGN=right><FONT FACE=arial SIZE=10 COLOR=#0000FF>Párrafo</FONT></P>
<P ALIGN=right><FONT FACE=arial SIZE=10 COLOR=#0000FF>Párrafo</FONT></P>
<P ALIGN=right><FONT FACE=arial SIZE=10 COLOR=#0000FF>Párrafo</FONT></P>
<P ALIGN=right><FONT FACE=arial SIZE=10 COLOR=#0000FF>Párrafo</FONT></P>
O bien, colocamos entre las entiquetas <HEAD> y </HEAD> de nuestra página lo siguiente:
<style>
<!--
P.normal {font-family:arial; font-size:10pt; text-align:justify; color : #0000FF}
-->
</style>
Y en el los párrafos
<P CLASS=normal>Párrafo</P>
<P CLASS=normal>Párrafo</P>
<P CLASS=normal>Párrafo</P>
<P CLASS=normal>Párrafo</P>
El ahorro de trabajo hasta ahora no parece excesivo pero ¿y si en una página ya hecha
queremos cambiar la letra a 12 puntos? En el primero de los casos tendremos que ir
párrafo por párrafo cambiando el tamaño de la letra. Si usamos una hoja de estilo sólo
tendremos que cambiar la propiedad font-size:10pt en el estilo que queramos cambiar y ya
tendremos automáticamente cambiados todos los párrafos.
Pero esto no es todo; si tu web tiene cuatro o cinco páginas puedes dedicar sin problema
unos minutos a cambiar los estilos de cada página pero, por ejemplo, este portal tiene
hasta la fecha unas 1.300 páginas. ¿Cómo se haría para cambiar algo así?
La solución es muy sencilla. Basta con crear una única hoja de estilo en cualquier
directorio de la web y decirle a todas las páginas que vayan a tomar sus estilos de
esta página. Para ello colocaremos entre las etiquetas <HEAD> y </HEAD>
de nuestra página lo siguiente:
<link rel=stylesheet href="http://www.tudireccion.com/estilo.css" type="text/css">
Este tag, como vemos, apunta a un archivo "estilo.css" que tendremos que crear nosotros
mismos con el Bloc de notas de Windows y cuyo contenido será:
<style>
P.normal {font-family:arial; font-size:10pt; text-align:justify; color : #0000FF}
</style>
Además de ahorrar un montón de trabajo, con las hojas de estilo se pueden hacer muchas
cosas que nos ayudarán a mejorar el aspecto de la web. Por ejemplo, si lo que queremos es
que los links no están subrayados y sólo aparezcan subrayados al poner el cursor sobre
ellos, nuestra hoja de estilo tendrá el siguiente contenido:
<style>
A:LINK {text-decoration : none; color : #0000FF}
A:VISITED {text-decoration : none; color : #0000FF}
A:HOVER {text-decoration : underline; color : #007FFF;}
A:ACTIVE {text-decoration : none; color : #FF0000}
</style>
Por supuesto, podemos cambiar los colores, los tamaños y cuantos caracteres deseemos en
el texto. Pero no sólo en el texto, también se puede cambiar el color de las barras de
desplazamiento del navegador simplemente añadiendo esto al estilo de nuestra página:
<STYLE>
BODY {scrollbar-face-color: #808080; scrollbar-highlight-color: #808080; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color:#DDDDDD; scrollbar-shadow-color: #808080; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #DDDDDD; }
</STYLE>
Los colores están expresados en su valor hexadecimal. Si quieres saber qué número
hexadecimal corresponde a cada color, pincha aquí.
Y, para teminar, aquí tienes un ejemplo real de hoja de estilo. Concretamente, esta es la que
se usa en la web www.LexurEditorial.com
<style>
A:LINK {font-family: verdana; text-decoration : none; color:#264F8C;}
A:VISITED {font-family: verdana; text-decoration : none; color:#042D61;}
A:HOVER {font-family: verdana; text-decoration : underline; color : #007FFF;}
A:ACTIVE {font-family: verdana; text-decoration : none; color:#264F8C;}
P {font-family: verdana; font-size: 10pt; text-align: justify; color:#000000;}
P.fondo {font-family: verdana; font-size: 10pt; text-align: center; color:#000000;}
P.titulo {font-family: verdana; font-size: 10pt; font-weight:bold; text-align: justify; color:#000000;}
P.texto {font-family: verdana; font-size: 8pt; text-align: justify; color:#000000;}
P.indent1 {font-family: verdana; font-size: 8pt; text-align: justify; margin-left: 0.5in}
P.indent2 {font-family: verdana; font-size: 8pt; text-align: justify; margin-left: 1in}
P.indent3 {font-family: verdana; font-size: 8pt; text-align: justify; margin-left: 1.5in}
P.indent4 {font-family: verdana; font-size: 8pt; text-align: justify; margin-left: 2in}
H1 {font-family: verdana; font-size: 12pt; font-weight:bold; text-decoration : none; color:#000000;}
H2 {font-family: verdana; font-size: 11pt; font-weight:bold; text-decoration : none; color:#000000;}
H3 {font-family: verdana; font-size: 9pt; font-weight:bold; text-decoration : none; color:#000000; text-align=justify;}
BODY {font-family: verdana; font-size: 8pt;}
</style>
|
|
|
  |
|
|
|
|
| Ver tu correo |
|
| Boletín gratuito |
 |
|