CLASE 8: SELECTORES

Miércoles, 02 de marzo del 2022.

8:00am - 11:00am 

TIPOS DE SELECTORES

• SELECTOR DE ELEMENTO

• SELECTOR DE CLASE

• SELECTOR DE ID

• SELECTOR DE ATRIBUTO

• SELECTOR DE DESCENDIENTES

• SELECTOR DE TODOS LOS HIJOS

• COLORES

SELECTOR DE ELEMENTO

p{

}

H1{

}

SELECTOR DE CLASE

Una clase se puede crear múltiples veces, es

reutilizable e inicia con un punto .

.cliente{

color:blue;

}

SELECTOR DE ID

Puede tener multiples ID´s por pagina, pero sus nombres no

pueden repetirse solo 1 por pagina, se definen por un signo de

gato #

#cliente{

SELECTOR DE ATRIBUTO

Selecciona elementos basados en algún atributo que

tenga:

[src =“logo jpg”] {

color: blue;

} 

SELECTOR DE DESCENDIENTES

Selecciona los elementos hijos cuyo padre sea una

clase (o ID) específico:

.cliente.nombre {

color: blue;

}

SELECTOR DE TODOS LOS HIJOS

Aplica la siguiente regla a todos los párrafos

hijos

.cliente >p{

color : blue;

}

Colores

• Si se utilizan por nombre solo serán los colores PRIMARIOS.

• HEX #0000000

• MODELOS DE COLOR

• RGB RGBA

• HSL HSLA

styles.css

:root{

--blanco:#FFFFFF;

--oscuro: #212121;

--primario: #ffc107;

--secundario: #009747;

--gris:#757575; /*cualquier valor se puede definir ahi */

Google Fonts

•Buscar una tipografía y pegar el link, dentro de styles

•Color Combos

•Tabler icons