Los selectores determinan cómo se asignan los estilos CSS a los elementos HTML. Para una definición correspondiente, primero se especifica el nombre del elemento al que debe acceder el selector. A continuación, se realiza la declaración propiamente dicha entre llaves. Dentro de una declaración pueden especificarse una o varias propiedades. La sintaxis general es la siguiente
Selector { propiedad1: valor; propiedad2: valor; propiedad3: valor; }Ya ha visto la definición correspondiente en el tutorial anterior.
h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; }
Asegúrese de terminar cada declaración con un punto y coma.
Un vistazo a los selectores disponibles
En realidad, CSS tiene un gran número de selectores, de los cuales te presentaré los más importantes. Porque una cosa está clara: sólo puedes definir propiedades CSS correctamente si sabes cómo trabajar con selectores.
La forma más sencilla de asignar estilos dentro de un documento HTML es utilizar el selector de elementos.
La siguiente sintaxis asigna el color negro a todos los elementos p.
p { color: #009966; }
Si desea asignar el mismo estilo a varios elementos, también es posible.
En este caso, basta con anotar los elementos correspondientes uno tras otro, separados entre sí por una coma.
p, h1, li { color: #000; }
También puede asignar varios estilos a los elementos. En este caso, los estilos se separan entre sí mediante punto y coma.
p { color: #000; color de fondo: rojo; }
También es posible una combinación de las variantes anteriores.
p, h1, li { color: #009966; color de fondo: rojo; }
El resultado podría ser el siguiente:
Áreas con varios elementos
A menudo es necesario dar formato a un área que consta de varios elementos HTML. Para estos casos, existen dos elementos especiales en HTML: span y div. Encontrará estos elementos una y otra vez en esta serie.
Un ejemplo:
<div class="article"> <h1>Explosión de color</h1> <p class="topic">Un tutorial sobre la creación de explosiones de color por <span class="author">MarkusMelzer</span>.</p> </div> </div> <p class="topic">Un tutorial sobre la creación de explosiones de color por <span class="author">MarkusMelzer</span>.
La única diferencia entre div y span es que el elemento div fuerza una nueva línea en el flujo de texto. span, en cambio, no crea una nueva línea. En el ejemplo mostrado, se define un área div que contiene un encabezado y un párrafo de texto. A su vez, hay un área span dentro del párrafo de texto.
Selectores de ID y clase
Hasta ahora se han utilizado selectores de elementos. En el siguiente ejemplo, todos los encabezados h1 se formatean utilizando un selector de este tipo.
h1 { color: #000; color de fondo: rojo; }
Por supuesto, esto no siempre es deseable de esta forma. Por ejemplo, ¿qué pasa si sólo desea asignar ciertas propiedades a uno o algunos, pero no a todos los encabezados h1? CSS ofrece dos opciones para estos casos: los selectores de clase y los selectores de ID.
Los selectores de clase pueden utilizarse para seleccionar específicamente elementos HTML con atributos de clase. El atributo class debe especificarse en el elemento HTML en cuestión. Las definiciones de clase empiezan por un punto.
Un ejemplo:
.red { color: rojo; }
Aquí se ha definido la clase red. Para añadir las propiedades asignadas al rojo a un elemento HTML, introduzca class seguido del nombre de la clase.
<p class="rot">PSD-Tutoriales.de</p>
El selector ID es igualmente fácil de usar. El selector ID se reconoce por una cruz doble.
#topnavi { color: azul; };En este ejemplo, se define el ID topnavi. Pero cuidado: un ID sólo puede asignarse una vez dentro de un documento. El acceso a una propiedad ID definida tiene entonces este aspecto:
<div id="topnavi">Aquí está la navegación</div>
El nombre del ID se asigna al atributo id. Asegúrese de que aquí no se note la doble cruz.
La información mostrada también se puede combinar entre sí. Por ejemplo, puede asignar varias clases a un elemento HTML.
<p class="rojo grande">PSD-Tutoriales.de</p>
En este ejemplo, las dos clases rojo y grande se asignan al párrafo de texto. Si quieres especificar una clase y un ID, queda así:
<p class="rot" id="navi">PSD-Tutoriales.de</p>
También puedes combinar elementos e IDs. Aquí tienes otro ejemplo:
div.navi { color: azul; }
Esta sintaxis sólo se aplicaría a los elementos div con la clase navi. Los elementos p, que también tienen la clase navi, no se verían afectados.
Existe otra forma de combinar selectores en CSS. Eche un vistazo a la siguiente sintaxis:
h1 { color: rojo; } em { color: azul; }
Aquí, a todos los encabezados de primer orden se les asigna el color rojo. A los elementos em, en cambio, se les asigna el color azul.
Sin embargo, combinando las dos instrucciones, ahora puede asegurarse de que sólo los elementos em que se encuentran dentro de elementos h1 se colorean de azul.
h1 em { color: azul; };
Los nombres de los elementos se separan aquí sin comas.
Por cierto, esta es una trampa de error popular en la que caen incluso los principiantes en CSS. Aquí está la misma sintaxis, pero con una coma:
h1, em { color: azul; }
¿Qué significa esta sintaxis? Todos los elementos h1 y em están direccionados. Por lo tanto, ¡es completamente diferente de la sintaxis sin coma!
Otro selector importante es el selector universal. Permite seleccionar cualquier elemento. Este selector se define mediante un asterisco.
* { color: rojo; }
Esta sintaxis colorearía todos los elementos de rojo. También hay algunas peculiaridades sintácticas a tener en cuenta con este selector.
#mainnavi * { color: rojo; }
En este ejemplo, el color de primer plano de todos los elementos dentro del elemento con el ID mainnavi se establece en rojo. Sin embargo, esto no se aplica al elemento en sí.
Si el selector universal estuviera al principio de una declaración, no sería necesario señalarlo. Por lo tanto, algo como esto sería superfluo:
* p { color: rojo; }
Esta sintaxis es equivalente a la siguiente
p { color: rojo; }
Conocerás más selectores en el próximo tutorial.
