Seleccionar página

Vimos en la entrega anterior, que una regla CSS consta de un selector y una declaracion, a su vez dentro de la declaración estaban propiedad y atributo.
Vamos a ver los selectores basicos que posee CSS

Selector Universal

*{ 
_______
_______
}

se usa para abarcar todos los elementos de la pagina, usando el asterisco. No se utiliza mucho ya que es muy dificil ponerle a toda la pagina un mismo estilo, generalmente lo vamos cambiando…

Selector de etiqueta o tipo

h1 {
       color: red;
 }

este selector es el mas comun/usado, lo que hacemos es llamar al elemento HTML en este caso (h1) y le damos el colo rojo, esto significa que todos los titulos h1 seran de color rojo.

h1,h2,h3 {
color: red;
font-weight: bold;
font-family: Arial, Helvetica, Sans Serif;
}

Selector multiple es un selector de etiqueta pero de esta forma nos ahorramos escribir el mismo codigo tres veces, lo que hacemos es llamar a los elementos HTML uno por uno separados por una coma y a los 3 les estamos dando los mismos estilos.

Selector Descendente

supongamos que el HTML que tenemos es este:

<p>
<span> texto1  </span>
<h2> Titulo </h2> 
<span> texto2  </span>
</p>

y el selector descendente es este

p span { color:red; }

Lo que hace aca el selector descendente es: todos los «span» que estan dentro de «p» seran de color rojo. De esta forma lo que hacemos es refinar la aplicación de estilos que queremos hacer, en este caso solo a los span por lo que el «h2» que se encuentra alli no se vera afectado.

Aca va otro ejemplo:

p a span em {text-decoration: underline}

Los estilos se aplicaran a todos los «em» que se encuentren dentro de «span» y dentro de «a» que a su vez los contenga «p»

Selector de Clase

Supongamos que tenemos el siguiente HTML:

<body>
<p> texto1 </p>
<p> texto2 </p>
</body>

como hacemos si quiero dar el estilo al segundo «p» (texto2) pero solamente a ese y no al primer «p», si usaramos el selector descendente nos aplicaria el estilo a ambos.
Para esto usamos el selector de clase, este trabaja creando un nuevo atributo o mejor dicho nosotros lo creamos:
en el archivo css creamos lo siguiente:

.destacado {color:red;}

posteriormente lo llamamos desde nuestro HTML:

<body>
<p class="destacado"> texto1 </p>
<p> texto2 </p>
</body>

De esta forma con el selector de clase solo aplicamos el estilo a aquel elemento donde esta el atributo «class».

Selector ID

este selector es muy parecido al selector de clase, sus diferencias son:

  • en vez de declararse usando un punto (.) se usa almohadilla (#)
  • no se puede repetir, cada selector ID es unico.

CSS:

#destacado {color:red;}

HTML:

<p id="destacado"> texto1 </p>

Herencia

CSS tiene herencia, es decir que cuando se establece el valor de la propiedad de algun elemento este se copia a todos los demas (descendientes) elementos del resto del proyecto.
Que pasa si tenemos colisiones de estilos?
Esto es que pasa si tenemos lo siguiente:

p {color: red;} 
p {color: blue;}

¿de que color se mostrara el parrafo anterior?
bueno, CSS determina mediante una serie de reglas complejas cual mostrar….

Pero por ahora vamos a centrarnos en dos:

  1. cuanto mas especifico sea el selector mas importancia tiene
  2. se considera al ultimo, el selector indicado.

por lo tanto en el caso anterior, el color del parrafo sera «blue» (azul).

En el siguiente caso vemos el que se decide es el mas especifico:

p{ color: red; }
p#especial {color: green; }
* {color: blue;}
 <p id= "especial"> .... </p>

Al elemento <p> se le aplican las tres declaraciones. Como su origen y su importancia son las mismas, decide la especificidad del selector.
El selector * es el menos especifico ya que es el universal, el selector p es poco especifico ya que se refiere a todos los <p> de la pagina, por lo tanto nos queda el ganador en especificidad que es el p#especial el cual solo hace referencia a uno solo, como ese es el mas especifico de los 3 es el que se tiene en cuenta, por lo tanto nuestro parrafo quedara de color verde.

 

Bueno hasta aca llega la 3ra entrega de este tutorial, espero sea de ayuda, en los proximos días estare trayendoles mas…

A %d blogueros les gusta esto: