Anterior | Indice | Siguiente

Aprendiendo a usar clases

Otro sistema para definir CSS es usar clases personalizadas. La norma para una clase personalizada tiene este aspecto:

<STYLE>
.textrojo { FONT-SIZE: 12px; COLOR: red }
</STYLE>

Para aplicar este estilo a una etiqueta, simplemente tendrías que llamarlo desde la etiqeuta en la que lo vayas a aplicar. Por ejemplo, si quisiera usarlo en un encabezado y en el párrafo siguiente, escribiría:

<H1 class="textrojo">este texto sería rojo y de 12 píxeles de altura</H1>
<P class="textrojo">Y lo que fuera en este párrafo, también</P>

El navegador se saltaría el formato por defecto de estas etiquetas y aplicaría tu clase personalizada.

Pero incluso se podría conseguir no tener que declararlo en cada una de las etiquetas. Utilizando la etiqueta <SPAN>...</SPAN>, todo lo que vaya entre su apertura y su cierre tendría el estilo. El ejemplo anterior podría ser:

<SPAN class="textrojo">
<H1>este texto sería rojo y de 12 píxeles de altura</H1>
<P>Y lo que fuera en este párrafo, también</P>
</SPAN>

Vamos a añadir algo más:

<STYLE>
.enlaces { FONT-SIZE: 11px; COLOR: #003399; FONT-FAMILY: Arial;TEXT-DECORATION: none }

a:hover { COLOR: #cc3333; TEXT-DECORATION: underline }

H1 { font-family: Verdana; font-size: 16px; color: #CC0000; font-weight: bold}

H2 { font-family: Arial; font-size: 13px; font-weight: bold; color: #000099}

</SYTLE>

Aquí tenemos ya 4 clases:
- Una clase personalizada : .enlaces (o "custom class" en Dreamweaver. ¡no olvidar el punto!)
- 2 etiquetas redefinidas: H1 y H2 (en Dreamweaver: "Redefine HTML tag")
- 1 Pseudo-clase: a. hover, de la que hablaremos más adelante (y que en Dreamweaver aparece como "Use CSS Selector")

Ya se empieza a ver la verdadera fuerza de las clases: Todas las etiquetas H1 de tu sitio tendrían 16 píxeles y serían de color rojo, sin añadir nada de código en el cuerpo del documento. Conseguirías que en vez de tener que escribir:

<H1><font face="Verdana"color="#CC0000" size="2">El texto iría aquí</font></H1>

Usando CSS, quedaría en:

<H1>El texto iría aquí</H1>

Esto reduciría el tamaño de tus páginas, haría más fácil realizar cambios, y tus páginas cargarían más rápido. Si en vez de rojo quisiera que mis encabezados <H1> fueran azules, sólo tendría que modificar el archivo .css, en vez de tener que ir abriendo página por página y cambiando la etiquta <FONT>

Recuerda que cualquier etiqueta HTML puede ser redefinida. Esto significa que podrías cambiar el tamaño de tus textos en negrita (redefiniendo la etiqueta <B>). También podrías hacer que tus listas utilizaran una fuente diferente que el resto del texto simplemente redefiniendo la etiqueta <LI>. Lo que se te ocurra.

E incluso puedes definir varias etiquetas a la vez. Si quieres que todos tus encabezados sean rojos, sólo tendrías que poner:

<STYLE>
...
H1, H2, H3, H4, H5 { COLOR: #CC0000 }
...
</STYLE>

Y ahora, para terminar...las pseudo-classes.

Anterior | Indice | Siguiente