Webmasters v2.0 - Código HTML: CSS

Desarrollo: Código HTML: CSS

Cascading Style Sheets

Seguramente ya han escuchado hablar de las hojas de estilo o CSS. Estas nacieron hace ya un buen tiempo y fueron recomendadas por la W3 Consortium con el propósito de ayudar al creador de sitios web, y mejorar la presentación de las paginas web. Pero, no lo solo mejorarlas, si no también facilitar la creación de las mismas.

El uso de las hojas de estilo se puede aplicar a varios efectos, por lo que en este articulo solo tocaremos los mas utilizados.

Hemos recibido varias consultas de como hacer para agregar un link, pero sin que aparezca subrayado. Este no es mas que una modificación en el código de CSS, que incluimos mas abajo:

<style type="text/css">
</style>

El código que mostramos más arriba permite al webmaster presentar enlaces sin subrayado y estos afectan a todos los enlaces. Si queremos presentar solamente algunos enlaces debemos clasificar a estos enlaces por clases, y luego asignar la clase al enlace que se desee. Como ven es algo un poco mas complicado que discutiremos mas adelante.

Respecto al código proporcionado mas arriba,la etiqueta <style type="text/css"> demuestra al browser que el tipo a tratar es texto específicamente CSS. Luego a:link { color: black; text-decoration: none } nos indica que es un link, de color negro (black) y NO posee decoración de texto, es decir, sin subrayado. La tercera línea a:visited { color: black; text-decoration: none indica la misma cosa solo que lo hace para un link ya visitado. Con la etiqueta </style> se cierra el código de CSS.

Otro efecto bastante utilizado en los sitios web, es el efecto "hover". Este nos permite hacer un efecto, sea cual fuere (cambio de color, agrandamiento de letra, cambio de fuente, etc) sobre el enlace.

Con el siguiente ejemplo demostramos uno de los tantos usos del hover:

<style type="text/css">
</style>

Vemos que, la única diferencia con respecto al código presentado anteriormente es la inserción de una nueva línea ( la de hover )
a:hover { color: navy; text-decoration: underline }. Esta línea nos permite crear un efecto de subrayado sobre el enlace que no se encuentra subrayado.Vemos entonces que el hover puede ser aplicado a cualquier cambio de propiedad de la fuente.

En la continuación de este articulo, veremos como aplicar efectos mas avanzados a realizar con las hojas de estilo, así también nos encontramos desarrollando un tutorial para entender como funcionan y para que pueden ser utilizados, ya que, estos efectos son una de las tantas propiedades del CSS.

1) Diferentes formas de vincular hojas de estilo en cascada a su sitio web:

Las hojas de estilo en cascada involucran el uso de tres diferentes tipos de definiciones:

a) Estilos en línea

Estos pueden ser atribuidos a etiquetas individuales en el BODY o cuerpo del sitio web. Aunque esto no es parte de una hoja de estilo en cascada, es llamada así porque esta hecha "como una hoja de estilo". Por ejemplo:

<p style="font-size=12pt; font-style=Verdana,Arial"> Copyright</p>

Esta etiqueta modifica todo el párrafo con tamaño de letra de 12 puntos del tipo Verdana por defecto y Arial como sustituto.

b) Estilos enlazados:

Este tipo de estilo puede adjuntar un tipo de estilo separado el cual es vinculado a través de la siguiente etiqueta ubicada en la cabecera del sitio. <LINK HREF="archivo.css" REL=STYLESHEET> Como ejemplo:

<LINK HREF="/files/developy.css" REL=STYLESHEET>

Aquí llamo a un archivo de nombre developy.css ubicado en la carpeta files dentro del directorio principal o public_html del servidor.

c) Estilos encerrados:

Los estilos encerrados son aquellos que van "encerrados" entre las etiquetas <style> </style> Por ejemplo:

<style type="text/css">
</style>

2) Clases para ubicar diferentes tipos de enlaces en su página:

Para poder tener diferentes tipos de efectos realizados con hojas de estilo en el mismo sitio, debes crear distintas clases y luego asignar estas a los links deseados.

Por ejemplo:

Y después debe referirlos en el cuerpo de su documento como:

<a href="loquesea.html" class="azul">Link</a>

En este caso el enlace se verá azul porque el tipo de clase es azul, y esta clase se encuentra definida mas arriba como azul.

Artículo sobre CSS cedido por Nicolás Escobar J.
Webmaster del Sitio Developy http://www.developy.com/