Pixela
Creamos experiencias digitales
Cuarto taller: Desarrollo web
Los selectores
Nos ayudan a escoger las cosas a las que vamos a dar estilo
Pueden ser:
- Elementos.
- Clases.
- Identificadores.
- Todo
header {
font-size: 1.6em;
}
.red {
color: red;
}
#fancy-element {
font-family: 'Fancy Sans', sans-serif;
}<header class="red" id="fancy-element">
<p>Hola soy un elemento con estilo</p>
</header>Super poderes
Los selectores también pueden
- Ayudarnos a escoger elementos dentro de elementos.
- Ayudarnos a estilizar estados de los elementos.
- Ayudarnos a estilizar elementos con atributos específicos.
- Aplicar propiedades similares a diferentes selectores
Superpoderes
Otros Selectores:
- Hijos (elementos y dentro de x)
- Elementos adyacentes (elementos y inmediatamente después de x)
- Hermanos (elementos y al mismo nivel que x).
- Atributos ( todo elemento x con atributos y)
Sintaxis:
- x y { css }
- x + y { css }
- x ~ y { css }
- x [ y ] { css }
Hora del reto
Usando lo aprendido y el articulo anterior conviertan el codigo de la izquierda en la imagen de la derecha
<h3>Cosas por hacer</h3>
<ul>
<li>Levantarme temprano</li>
<li>Ir al taller de Pixela</li>
<li>Usar selectores con superpoderes</li>
<li>Tomar un cafe</li>
<li>Regresar a casa sin mojarme</li>
<li>Dejar de hacer listas de cosas</li>
</ul>
Unidades de medida
Utilizadas para definir altura, anchura, tamaño de fuente, etc.
Se dividen:
- Absolutas.
- Relativas.
Colores.
header {
font-size: <cantidad><unidad>;
font-size: 16em;
height: <cantidad><unidad>;
height: 200px;
}Absolutas
- Pulgadas (in)
- Centimetros (cm)
- Milimetros (mm)
- Puntos (pt)
- Pica (pc)
Relativas
- em
- ex
- px
- Porcentajes
Ancho con pixeles
Tamaño de letra relativo a la fuente
Colores
- Con palabras clave (red, blue, white, etc.)
- RGB decimal
- RGB porcentual
- RGB hexadecimal
- RGBA (transparencia)
.contenedorA {
background-color: rgb(255,255,255);
color: #333333;
}
.contenedorB {
background-color: rgba(31, 31, 31, 0.7);
color: white;
}
Modelo de caja
CSS
By Pixela
