La magia de los CSS

¿Te gustaría controlar el aspecto de todo tu sitio desde un sólo archivo? ¿Hacer el efecto de los links que cambian al pasarle el mouse? ¿O poner la bendita barra de desplazamiento con colores, la cual no has encontrado por ningún lado como se hace?

No busques más. Aquí esá tu respuesta.

Bienvenidos a otro artículo más de la serie Código Fuente, en el cual queremos facilitar a los webmasters ejemplos claros de efectos que se pueden lograr con javascript, html, etc.

En esta ocasión, el tema que nos ocupa son los cascading style sheets, o CSS. También conocidos como hojas de estilo, los CSS son una de las mejores invenciones en materia de páginas web.

La idea básica, es conseguir una separación entre el contenido y el estilo. De esta manera, el html se encarga de proveer el contenido, con tags comunes sin los atributos tradicionales, y los CSS se encargan de proveer los colores, fonts, estilo de links.

Hay tres maneras de introducir los estilos, en el mismo tag, al principio de cada pagina web y como un archivo central, el cual se enlaza desde cada hoja html y gobierna a cualquier hoja que este enlazada.

Partamos del principio de que los dos primeros eliminan el objetivo inicial de los CSS, que es poder separar estilo de contenido, al tener que meter los códigos de estilo en cada página (los que han estudiado CSS avanzado saben que hay ocasiones en que son útiles estas técnicas). De manera que nos concentraremos en las hojas de estilo que gobiernan todo el sitio desde una sola hoja.

La principal ventaja de esto es muy sencilla, como todas las páginas html que estén enlazadas a este CSS mostrarán el mismo estilo en los componentes especificados, todo tu sitio tendrá un “look and feel”, o un estilo homogéneo, dándole una uniformidad que hará que tu visitante sienta que es un sitio y no una colección de paginas unidas por un archivo index.

Otra ventaja muy importante es que si te cansaste del tipo de letra de tu site, cambias esa definición en la hoja de estilo todo tu sitio cambiará al mismo tiempo, y seguirá teniendo un look unificado. Genial, no te parece?

Veamos ahora los temas que vamos a desarrollar en este artículo:

  • Método de enlace de el archivo externo.
  • Links modificados, sin la rayita inferior.
  • Diferentes estilos de link en la misma página.
  • El scrollbar (barra de desplazamiento) con color que ves en algunas páginas si tienes Internet Explorer 5.5+

Enlace del archivo externo

Quizás ya hayas usado estilos CSS, pero desde la misma página. Aquí te diremos como hacer un archivo externo.

Primero que todo, el archivo es un archivo de texto, que puedes hacer con Notepad, pero al salvarlo, le cambias la terminación a .css como por ejemplo estilo.css. Un truco, por si se te dificulta salvarlo asi, o si Notepad insiste en salvarlo como estilo.css.txt, al salvarlo ponle que los salve como “estilo.css” incluídas las “”

Luego, en cada hoja html que hagas, pones esto en algun lugar entre <head> y </head>:

<link rel=”stylesheet” type=”text/css” href=”/estilo.css”>

Es muy importante que pongas bien la ruta. Si no, no sirve. El truco es este: la / significa el comienzo de tu web, el mismo lugar donde pones el index.html. Esto es muy importante si tienes subdirectorios en tu web, porque si tienes un archivo en un subdirectorio y linkeas asi:

<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

El buscará el archivo estilo.css dentro de su propio directorio, pero si pones el /, el buscará desde el principio del web. En NugBar, por ejemplo, nosotros metemos los css en /main/style/, o sea que si quisieramos verlo desde el web, pondriamos http://www.nugbar.com/main/style/ de manera que el link en NugBar sería:

<link rel=”stylesheet” type=”text/css” href=”/main/style/estilo.css”>

¿Me expliqué? Excelente.

Ahora, veamos un ejemplo de lo que podemos hacer desde ese archivo central. Para eso, pasemos a la siguiente página cuando oigas las campanitas…

(nah, que campanitas, eso solo sale en los cuentos de Disney, presiona el link a la página siguiente)

** Nota: El sistema de linkear con / es útil y solo funciona si tienes tu propio dominio, como en el caso de NugBar.com. Si intentas hacerlo en páginas como geocities, no funcionará porque significaría que la imagen está en el nivel superior del servidor de geocities y no en el directorio que te otorgaron.

Pages: 1 2 3 4

Deja un comentario

A %d blogueros les gusta esto: