CSS
Estilizando la web
CSS establece como debería verse un documento web
Introducción
Introducción
Conceptos Básicos
Nos ayudan a escoger las cosas a las que vamos a dar estilo
Pueden ser:
- Elementos.
- Clases.
- Identificadores.
- Atributos
- Todo
Los selectores
Elementos - <etiqueta>
Los selectores
Clase - <etiqueta class="clase">
Identificador - <etiqueta id="identificador">
Atributos - <etiqueta attr="valor">
Ejemplo
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
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)
Superpoderes
Sintaxis:
- x y { css }
- x + y { css }
- x ~ y { css }
- x [ y ] { css }
Hora del reto
<h3>Cosas por hacer</h3>
<ul>
<li>Levantarme temprano</li>
<li>Ir al clases</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>Utilizadas para definir altura, anchura, tamaño de fuente, etc.
Se dividen:
- Absolutas.
- Relativas.
Colores.
Unidades de medida
- Pulgadas (in)
- Centimetros (cm)
- Milimetros (mm)
- Puntos (pt)
- Pica (pc)
Unidades de medida
Absolutas
em
ex
px
Porcentajes
Relativas
- Con palabras clave (red, blue, white, etc.)
- RGB decimal
- RGB porcentual
- RGB hexadecimal
- RGBA (transparencia)
Colores
- Los enlaces son el elemento principal que confiere a la web su carácter de hipertexto.
- Los enlaces están compuestos por:
- Nodos
- Enlaces
- Anclajes
Enlaces
Hora de la práctica
CSS: Estilizando la web
By Estuardo Díaz
