ClasesClasesEn esta página se trata cómo:
Dado que el número de etiquetas del XHTML es reducido, es probable que en una página web se quiera dar un formato distinto a elementos con la misma etiqueta. Se puede sortear esta limitación utilizando clases, que se pueden asignar a cualquier elemento de una página web, sea de bloque, en-línea o contenedor.
Para asignar una clase a un elemento basta con el establecer el atributo class del elemento. El valor del atributo class (el nombre de la clase) 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. En los nombres de las clases se distingue entre mayúsculas y minúsculas (las clases Ejemplo y ejemplo son clases distintas)
El elemento con clase hereda las propiedades establecidas para la etiqueta, independientemente del orden en que se escriba las reglas en la hoja de estilo.
En los ejemplos siguientes, con dos párrafos <p>, dos elementos <strong> y dos divisiones <div> respectivamente, se ha creado en cada caso la clase aviso para darles un formato distinto al elemento sin clase y al elemento con clase. El elemento con clase hereda las propiedades de los elementos sin clase.
|
<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 ... |
|
|
p {
font-style: oblique;
}
|
|
|
<p>1º. La parte contratante de la <strong>primera parte</strong> será considerada como la parte contratante de la <strong class="aviso">primera parte</strong>.</p> |
1º. La parte contratante de la primera parte será considerada como la parte contratante de la primera parte. |
|
|
strong {
font-style: oblique;
}
|
|
|
<div> <p>- Haga el favor ... ... ... Quisiera volver a oirlo</p> </div> <div class="aviso"> <p>- Dice que ... ... ... creo que suena mejor.</p> </div> |
- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que… la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh? - No, eso no está bien. Quisiera volver a oírlo. - Dice que… la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. - Esta vez creo que suena mejor. |
|
|
div {
border: black 2px solid;
}
|
Volver al principio de la página
Para asignar clases a porciones de texto se utiliza a menudo la etiqueta en-línea <span>. Los navegadores no aplican ningún estilo predeterminado a la etiqueta <span>.
El ejemplo siguiente muestra dos clases de <span>, para resaltar los nombres de autores y obras en un texto.
|
|
<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. |
|
|
span.autor {
font-weight: bold;
}
|
Aunque en el ejemplo anterior se podría utilizar cualquier otra etiqueta en-línea en lugar de <span>, el resto de etiquetas implícitamente significan algo (<em> implica énfasis, <strong> implica un énfasis mayor, etc), mientras que <span> no significa nada, así que se puede utilizar con cualquier intención.
Volver al principio de la página
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 class="atencion">Este párrafo tiene
como clase "atencion".</p>
<p class="conborde">Este párrafo tiene
como clase "conborde".</p>
<p class="atencion conborde">Este párrafo tiene como clase "atencion conborde".</p> |
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;
}
|
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 class="conborde sinborde">Este párrafo tiene como clase "conborde sinborde".</p> <p class="sinborde conborde">Este párrafo tiene como clase "sinborde conborde".</p> |
Este párrafo tiene como clase "conborde sinborde". Este párrafo tiene como clase "sinborde conborde". |
|
|
p.conborde {
border: red 3px solid;
}
|
|
|
|
<p class="conborde sinborde">Este párrafo tiene como clase "conborde sinborde".</p> <p class="sinborde conborde">Este párrafo tiene como clase "sinborde conborde".</p> |
Este párrafo tiene como clase "conborde sinborde". Este párrafo tiene como clase "sinborde conborde". |
|
|
p.sinborde {
border: none;
}
|
Se puede escribir un selector que se aplique únicamente a los elementos que tienen definidas varias clases.
|
|
<p class="atencion">Este párrafo tiene
como clase "atencion".</p>
<p class="conborde">Este párrafo tiene
como clase "conborde".</p>
<p class="atencion conborde">Este párrafo tiene como clase "atencion conborde".</p> <p class="conborde atencion">Este párrafo tiene como clase "conborde atencion".</p> |
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". |
|
|
p.conborde.atencion {
border: red 3px solid;
font-weight: bold;
}
|
Volver al principio de la página
Autor: Bartolomé Sintes Marco