Clases ClasesEn esta lección se trata cómo:
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; } |
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).
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 .
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". |