Unidad 17. Estilos CSS Avanzado (III)

Aunque sólo hay tres tipos de selectores diferentes hay diversas formas de combinarlos para producir hojas de estilo más complejas.

Ahora veremos estos tipos de combinación:

Agrupación: Los selectores se pueden agrupar separados por comas, por lo que:

p { background-color: #000033; }

.azul_oscuro { background-color : #000033; }

#cabecera { background-color: #000033; }

Puede escribirse como:

p, .azul_oscuro, #cabecera { background-color: #000033; }

Descendencia: Podemos obligar que un estilo sólo se aplique sobre un elemento que esté dentro de otro. Por ejemplo:

h1 {

color: #0000FF;

font-weight: bold;

}

b { color: #0000FF; }

Esto hará que todos los encabezados H1 de la página sean de color azul y en negrita, y que los textos en negrita se muestren azules.

Pero, ¿qué pasa si queremos resaltar texto en los encabezados, no podremos utilizar la negrita?

<h1>Título: El uso de la <b>Negrita</b></h1>

En este caso deberemos hacer uso de la descendencia:

h1 b { color: red; }

Ahora los textos marcados con la etiqueta B en los encabezados H1 serán de color rojo.

Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro del anterior.

Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo:

#contenedor p .derecha { float: right; }

En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un párrafo del elemento definido como contenedor flotarán a la derecha.

Hasta ahora hemos visto que los selectores se pueden combinar de bastantes formas. Veamos que el poder de CSS no sólo se queda ahí sino que avanza un poco más para ayudarnos a establecer estilos según el tipo de atributos que tenga una etiqueta.

Un atributo es una parte de la descripción de un selector HTML. Por ejemplo, en:

<a href="http://www.aulaclic.es" target="_blank">Enlace</a>

A es el selector de la etiqueta, mientras que href y target son atributos.

CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos. Veamos cómo hacerlo:

Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados atributos definidos, por ejemplo:

a[href] { font-family: Arial, Helvetica; }

En esta línea estamos estableciendo que cualquier etiqueta a que tenga el atributo href cambie su tipo de letra a Arial o Helvética.

Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado valor en un atributo, por ejemplo:

a[target="_blank"] { font-weight: bold; }

Esta línea hará que se convierta en negrita cualquier enlace que abra una nueva ventana al hacer clic.

Interesante, ¿verdad?.

Pág. 17.3