Volver al índice Clases

En esta lección aprenderás:

El atributo class

El número de etiquetas del XHTML es limitado. Puedes sortear esta limitación utilizando clases, que puedes asignar a cualquier elemento. Por ejemplo, imagina que estás escribiendo una página, pero quieres resaltar los párrafos incompletos. Una solución es crear la clase incompleto, como en el ejemplo siguiente:

p { font-style: oblique; }
p. incompleto { color: red; }

1º. La parte contratante de la primera parte será considerada como la parte contratante de la primera parte.

2º. La parte contratante de la segunda parte será considerada como ...

Para asignar la clase incompleto al párrafo, pon el cursor en cualquier parte del párrafo, pulsa F2 para seleccionar todo el párrafo (al seleccionarlo, el párrafo completo cambiará de color y además en la barra de estado la primera etiqueta será p), abre el menú Atributos > Class y escribe el nombre de la clase (en este caso, incompleto). En el código fuente de la página puedes ver que la etiqueta <p> se ha convertido en <p class="incompleto">.

Fíjate en que el párrafo con clase incompleto hereda las características del párrafo (en el ejemplo, la cursiva).

Para eliminar la clase, selecciona el elemento con F2, abre el menú Atributos > Class y pulsa el botón "Eliminar atributo".

La etiqueta <span>

También puedes aplicar clases a porciones de texto. Por ejemplo, imagina que quieres resaltar los nombres de autores y obras en un texto, como en el ejemplo siguiente.

span.autor { font-style: oblique; text-decoration: underline; }
span.obra { font-weight: bold; }

Todavía recuerdo el día en que ella me recomendó leer La vida está en otra parte, de Milan Kundera. Creo que el único libro comparable que yo le pude recomendar, un año después, fue La guerra del fin del mundo, de Mario Vargas Llosa, pero no sé si estoy inventando ese recuerdo.

Para asignar clases a porciones de texto, selecciona el texto con el ratón (no con F2), abre el menú Atributos > Class y escribe el nombre de la clase (en este caso autor u obra). En el código fuente de la página puedes ver que el texto seleccionado aparece rodeado por las etiquetas <span class="autor"> ... </span>.

Para eliminar una etiqueta span, sitúa el cursor en el interior del span (en la barra de estado tiene que verse la etiqueta span), pulsa F2 hasta que se seleccione el span (en la barra de estado, la etiqueta span tiene que estar la primera), abre el menú Atributos > Class y pulsa el botón "Eliminar atributo".

Combinar varias clases

Un elemento puede tener asignado varias clases. Al asignar clase al elemento, escribe los nombres de todas las clases que quieres aplicar, separados por espacios. El orden en que escribas los nombres de las clases no es importante en Mozilla o Internet Explorer (aunque sí que lo es en Amaya 8.1b, error que será corregido en Amaya 8.2).

p.conborde { border: red 3px solid; }
p.atencion { font-weight: bold; }

Este párrafo tiene como clase "atencion".

Este párrafo tiene como clase "conborde".

Este párrafo tiene como clase "atencion conborde".

Autor: Bartolomé Sintes Marco
Última modificación: 24 de octubre de 2003