¡Preparados, apunten… estilo! Los selectores.

ENTRADA_06Partimos de la base que CSS es un lenguaje que se utiliza como complemento de HTML para definir los estilos para la personalización de un sitio. CSS está compuesto por selectores, cada selector hace referencia  a un bloque del HTML para luego aplicarle un estilo. Tenemos distintos tipos de selectores:

El selector por el nombre de la etiqueta, por ejemplo si llamamos a un párrafo sería en CSS:

p { }

Simplemente con referirlo ya le podemos aplicar un estilo y si lo queremos hacer más específico le podemos agregar una clase o un id. En HTML se vería así:

<p class=”nombredelaclase”> Aquí va el párrafo</p>

<div id=”nombredelid”>Aquí contenido</div>

Y en  CSS lo referimos de esta manera:

.nombredelaclase {  }

#nombredelid {  }

Luego entre las llaves { } definimos las propiedades y valores que queremos agregar a este elemento:

.nombredelaclase{color:#000; font-size:1em}

Todos los selectores de CSS heredan las jerarquías de HTML, es decir, si hay un div que dentro tenga un span, hereda ese árbol jerárquico. Por ejemplo, si tenemos un div y queremos referenciar al span que se encuentra adentro lo haremos solo dejando un espacio después de div:

div span{color:#000; font-size:1em}

* Con ese espacio decimos que span es hijo de div

Siempre va a tener prioridad el selector que es un id que el que es una clase y este último sobre un selector de etiqueta

 

 

Los comentarios están cerrados.