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

Made with Slides.com