- Mira, esta es nuestra primera hoja de estilo, ¿te acuerdas?
body {
color : rgb(151,0,0);
background-color : rgb(255,201,0);
font-family : Verdana, Arial, Helvetica, Helv, sans-serif;
}
- ¡Sí, qué tiempos aquellos!
- Esto es una de hoja estilo muy sencilla formada por un solo conjunto de reglas. La parte que va antes de las llaves, se llama selector (en este caso body
), y sirve para seleccionar las partes del documento a las que queremos que se apliquen las reglas de estilo que están entre llaves.
- Ya veo, entonces en este caso las reglas se aplican al elemento BODY
, ¿verdad?
- Sí, eso. Pero CSS nos permite ser un poco más específicos con los selectores.
- ¿Qué quieres decir?
- Por ejemplo, con este conjunto de reglas:
EM { font-family : monospace }
todos los elementos EM
del documento se representarían con una fuente no proporcional, es decir, con todos los caracteres de la misma anchura (siempre que una fuente así estuviera disponible, claro).
- Sí...
- Pero de esta otra forma podemos afinar un poco más:
OL EM { font-family : monospace }
Ahora la regla sólo se aplicará a los elementos EM
que sean descendientes de algún elemento OL
. Los elementos EM
que no estén contenidos en un elemento OL
no se verán afectados por esta regla.
- Anda, pues eso podría ser útil.
- Sí que lo es. A este tipo de selectores se les llama selectores contextuales. Otro ejemplo más:
TD OL EM { font-family : monospace }
se aplicará a los elementos EM
que sean descendientes de algún elemento OL
, que a su vez sean descendientes de algún elemento TD
.
- Ya entiendo.
- Pero podemos ser aún mucho más específicos.
- ¿Cómo?
- Usando los atributos de HTML id
y class
. Con id
y class
podemos darle un poco más de significado a la estructura HTML de nuestro documento.
- No entiendo eso.
- Es sencillo, mira. En HTML, P
es un párrafo, todos los P
son párrafos. Pero para nosotros, desde el punto de vista estilístico, puede haber diferencias entre unos párrafos y otros. Por ejemplo, en un manual de instrucciones, la mayoría de los párrafos se dedicarán a explicar el funcionamiento de un aparato, pero en ocasiones pueden aparecer párrafos con advertencias, que queremos que aparezcan en cursiva. Así:
<h1>Instrucciones de seguridad</h1>
<p>Lea todas las instrucciones y conserve este manual de
instrucciones. Siga las advertencias e instrucciones existentes
sobre el monitor.</p>
<p class="advertencia">Atención: Nunca trate de abrir el
monitor usted mismo. En caso de avería diríjase siempre a
nuestro servicio técnico oficial.</p>
<p>Más instrucciones...</p>
<p class="advertencia">Atención: Otra advertencia...</p>
<p>Más instrucciones...</p>
- ¿Y cuál sería el selector para esos párrafos?
- El selector para todos los párrafos de la clase "advertencia"
sería p.advertencia
, es decir, separando con un punto el tipo de elemento, y la clase de elemento. Por ejempo:
p.advertencia { font-style : italic }
- ¿Es sencillo, no?
- Sí, pero es incluso algo más potente. Mira, imagina que en vez de un párrafo con una advertencia, ponemos una lista de advertencias. Pues sencillamente escribiríamos:
<ul class="advertencia">
<li>Antes de manipular el monitor desenchúfelo de la toma
de corriente.</li>
<li>Más advertencias...</li>
</ul>
Y ahora podríamos tener unas reglas para todos los elementos UL de clase advertencia:
ul.advertencia { font-style : italic }
O directamente, podríamos declarar unas reglas de estilo para cualquier elemento de clase advertencia:
.advertencia { font-style : italic }
- Ya veo, y eso se aplicaría cualquier tipo de elemento, siempre que tuviera class="advertencia"
, ¿no?
- Sí. Así que el atributo class
nos permite clasificar elementos.
- ¿Y el atributo id
?
- El atributo id
nos permite identificar elementos. Como has visto, un atributo class
se puede aplicar a varios elementos. Pero el atributo id
toma un valor único para cada elemento de un documento. Es decir, podemos dar a los elementos que queramos un identificador único que lo diferencie del resto, y eso es muy útil para hacer excepciones.
- ¿Por ejemplo?
- Por ejemplo:
<p class="advertencia" id="advertencia-final">Nota importante:
Si el usuario no sigue las instrucciones de seguridad
proporcionadas, se anulará automáticamente la garantía del
producto.</p>
Este párrafo se verá como el resto de las advertencias, pero además queremos aplicar unos estilos adicionales. Es tan sencillo como esto:
#advertencia-final { color : red }
- Ya veo, o sea que el carácter #
se usa cuando el selector se refiere a un atributo id
, ¿no?
- Exactamente. Otra cosa importante de los selectores es que se pueden agrupar, por ejemplo:
h1, .info h2, h3#notas { font-weight : bold }
indica que queremos que se escriban en negrita: los elementos H1
, los elementos H2
que tengan algún elemento de clase "info"
entre sus ascendientes, y el elemento H3
con identificador "notas"
.
- ¡Increíble, creo que lo entiendo!
- Hay otro tipo de selectores, que se llaman pseudo-clases y pseudo-elementos, pero de esos hablaremos más tarde. Ahora tenemos que hablar un poco de elementos en bloque y elementos en línea.
- Muy bien, vamos a ello.
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 14/10/2001 - © 2001 Juan R. Pozo y conclase.net