# Clases

En esta lección se trata cómo:

## Asignar clases a elementos: el atributo class

El número de etiquetas del XHTML es limitado. Se puede sortear esta limitación utilizando clases, que se pueden asignar a cualquier elemento. Por ejemplo, si se está escribiendo una página, pero se quiere resaltar algunos párrafos en particular. Una solución es crear la clase "aviso", como en el ejemplo siguiente:

p { font-style: oblique; } p. aviso { 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 "aviso" al párrafo, hay que situar el cursor en cualquier parte del párrafo, pulsar `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), marcar el atributo class en el panel de Atributos de la ventana de herramientas, escribir el nombre de la clase (en este caso, "aviso", sin las comillas) y pulsar `Intro` o el icono de confirmación . En el código fuente de la página se puede ver que la etiqueta <p> se ha convertido en <p class="aviso">.

Los nombres de las clases sólo pueden contener caracteres ingleses, números, guiones y subrayados, aunque el primer carácter no puede ser ni un número ni un guión.

El párrafo con clase "aviso" hereda las características de los párrafos (en el ejemplo, la cursiva), independientemente del orden en que se escriba las reglas en la hoja de estilo.

Para eliminar una clase, hay que seleccionar el elemento con `F2` y desmarcar el atributo class en el panel de Atributos de la ventana de herramientas. Para modificar una clase, hay que seleccionar el elemento con `F2`, marcar el atributo class en el panel de Atributos de la ventana de herramientas, modificar el nombre de la clase y pulsar `Intro` o el icono de confirmación .

Un error típico es escribir la etiqueta en el nombre de la clase, es decir, escribir "p.nombre_clase" en vez de "nombre_clase". Esa notación se emplea en las hojas de estilo, pero no en la página web (ni siquiera funcionaría escribiendo en la hoja de estilo p.p.nombre_clase, ya que el punto no puede formar parte del nombre de una clase).

Volver al índice

## Asignar clases a porciones de texto: la etiqueta <span>

También se puede aplicar clases a porciones de texto. Por ejemplo, si se quiere 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, hay que seleccionar el texto con el ratón (no con `F2`), marcar el atributo class en el panel de Atributos de la ventana de herramientas, escribir el nombre de la clase (en este caso, "aviso", sin las comillas) y pulsar `Intro` o el icono de confirmación . En el código fuente de la página se puede ver que el texto seleccionado aparece rodeado por las etiquetas <span class="autor"> ... </span>.

Para eliminar una etiqueta span, hay que situar el cursor en el interior del span (en la barra de estado tiene que verse la etiqueta span), pulsar `F2` hasta que se seleccione el span (en la barra de estado, la etiqueta span tiene que estar la primera), y desmarcar el atributo class en el panel de Atributos de la ventana de herramientas. Para modificar una etiqueta span, hay que seleccionar el elemento span con `F2`, marcar el atributo class en el panel de Atributos de la ventana de herramientas, modificar el nombre de la clase y pulsar `Intro` o el icono de confirmación .

Volver al índice

## Combinar varias clases simultáneamente

Un elemento puede tener asignado varias clases. Para asignar varias clases al elemento, hay que escribir los nombres de todas las clases que se quieren aplicar, separados por espacios. El orden en que escribas los nombres de las clases no es importante, aunque sí que es importante el orden en que están escritas las clases en la hoja de estilo (si varias clases definen la misma propiedad, se aplica la última que aparezca en la hoja de estilo).

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".
p.conborde { border: red 3px solid; } p.sinborde { border: none; } | Este párrafo tiene como clase "conborde sinborde". Este párrafo tiene como clase "sinborde conborde".
p.sinborde { border: red 3px solid; } p.conborde { border: none; } | Este párrafo tiene como clase "conborde sinborde". Este párrafo tiene como clase "sinborde conborde".

Volver al índice