ClasesClasesEn esta página 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 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;
}
|
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 ... |
|
|
<p>1º. La parte contratante de la primera parte será considerada como la parte contratante de la primera parte.</p> <p class="aviso">2º. La parte contratante de la segunda parte será considerada como ...</p> |
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.
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.
El ejemplo siguiente muestra dos clases de <span>, para resaltar los nombres de autores y obras en un texto.
|
|
span.autor {
font-style: oblique;
text-decoration: underline;
}
|
Todavía recuerdo el día en que ella me recomendó leer La vida está en otra parte, de Milan Kundera. |
|
|
<p>Todavía recuerdo el día en que ella me recomendó leer <span class="obra">La vida está en otra parte</span>, de <span class="autor>Milan Kundera</span>. |
Todavía recuerdo el día en que ella me recomendó leer La vida está en otra parte, de Milan Kundera. |
Un elemento puede tener asignado varias clases. Para asignar varias clases al elemento, hay que escribir en el atributo class los nombres de todas las clases que se quieren aplicar, separados por espacios.
|
|
p.conborde {
border: red 3px solid;
}
|
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 en el atributo class 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;
}
|
Este párrafo tiene como clase "conborde sinborde". Este párrafo tiene como clase "sinborde conborde". |
|
|
p.sinborde {
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". |
