Clases ClasesEn esta lección se trata como:
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 los párrafos incompletos. Una solución es crear la clase incompleto, 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 incompleto 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), abrir el menú y escribir el nombre de la clase (en este caso, incompleto). En el código fuente de la página se puede ver que la etiqueta <p> se ha convertido en <p class="incompleto">.
El párrafo con clase incompleto 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 la clase, hay que seleccionar el elemento con F2, abrir el menú y pulsar el botón "Eliminar atributo".
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), abrir el menú y escribir el nombre de la clase (en este caso autor u obra). 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), abrir el menú y pulsar el botón "Eliminar atributo".
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". |