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 de una página web. Por ejemplo, si en una página se quieren resaltar algunos párrafos en particular, se puede 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 ...

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 asignar una clase a un elemento, hay que:

• seleccionar el elemento 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 la etiqueta seleccionada aparece con el atributo <p class="aviso">.

Las clases utilizadas en la página web y las clases definidas en la hoja de estilo enlazada se pueden ver en el panel "Aplicar clase" de la ventana de herramientas. Este panel se puede utilizar para asignar clases más rápidamente. Par ello, hay que:

• seleccionar el elemento con F2,
• hacer doble clic en la clase deseada en el panel "Aplicar clase" de la ventana de herramientas,

Un error típico es escribir el nombre de 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).

Para eliminar el atributo clase hay que:

• seleccionar el elemento con F2 (en la barra de estado tiene que verse la etiqueta) y
• desmarcar el atributo class en el panel de Atributos de la ventana de herramientas.

Para modificar el atributo clase hay que:

• seleccionar el elemento con F2 (en la barra de estado tiene que verse la etiqueta),
• hacer clic en el atributo class en el panel de Atributos de la ventana de herramientas (no en la casilla de verificación, sino en la palabra class)
• modificar el nombre de la clase y
• pulsar Intro o el icono de confirmación .

Volver al índice

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

También se puede aplicar clases a porciones de texto. Para ello se utiliza la etiqueta <span> para marcar el fragmento de texto y a la etiqueta <span> se le asigna el atributo class.

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>.

Las clases utilizadas en la página web y las clases definidas en la hoja de estilo enlazada se pueden ver en el panel "Aplicar clase" de la ventana de herramientas. Este panel se puede utilizar para asignar clases más rápidamente. Par ello, hay que:

• seleccionar el texto con el ratón (no con F2),
• hacer doble clic en la clase deseada en el panel "Aplicar clase" de la ventana de herramientas,

Para eliminar el atributo clase de 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.

Si la etiqueta <span> se queda sin atributos, Amaya la elimina automáticamente.

Para modificar el atributo clase de 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),
• hacer clic en el atributo class en el panel de Atributos de la ventana de herramientas (no en la casilla de verificación, sino en la palabra class),
• 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.

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".

El orden en que se escriban 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.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".

Se puede escribir un selector que se aplique únicamente a los elementos que tienen definidas varias clases.

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

Volver al índice