Skip to content

Latest commit

 

History

History
49 lines (38 loc) · 2.3 KB

02.md

File metadata and controls

49 lines (38 loc) · 2.3 KB

Día 2

Temario

  • Qué es CSS. Enlazaría con lo que se vio de bootstrap la clase anterior.
  • Estructura básica
  • Propiedades más usadas (position, left/right/top/bottom, display, margin, padding)
  • Unidades de medida (pt, px, etc.) ** Animaciones y transiciones ** Responsive design ** Flexbox
  • ¿Ideas generales de como escribir CSS prolijo?

**: probablmente sea mejor para una segunda clase de CSS, no creo que entre todo en una.

Cronograma

  1. Repaso de la semana anterior y hablar sobre el ejercicio propuesto, ¿quién pudo hacerlo?¿Qué problemas tuvieron? Etc

  2. ¿Qué es CSS?

    • Cascade Style Sheet, hojas de estilo en cascada. Significa que los estilos se van aplicando según el orden en que los lee el navegador. El último que lee es el que tiene preponderancia.
    • Se pueden agregar al principio de nuestro documento html, pero es mejor hacerlo en un documento separado (que termina con .css)
    • La estructura básica de una declaración de CSS es:

    selector {caracteristica: valor;}

    • por ejemplo: p {color: blue;}

    • además de tipos de elementos, podemos seleccionar por clase y por ID (atributos de un elemento que vimos la semana pasada)

    • Si tenemos este código:

      dentro del CSS podemos llamarlo con: 'p' o '.texto' o '#primer_parrafo'. Para saber cómo nos conviene "invocarlos" hay reglas de especificidad. En principio el orden es: 1) incluidos en el código html, 2) IDs, 3) clase, 4) elemento. Acá pueden encontrar una explicación

    • Podemos encadenar tipos de llamadas para ser más específicos. Por ejemplo, si usamos un selector: li {...} eso funcionará tanto para los que estén dentro de un 'ol' como los que estén dentro de un 'ul. Si queremos algo específico para este último, podemos escribir: ul li {...}

  3. Propiedades más usadas:

    • position
    • float
    • display
    • margin
    • padding
    • width
    • height
    • background-color
    • color
    • border

  4. El modelo de caja

  5. Unidades de medida y cuándo usar cada una:

    • Absolutas: px, pt, mm
    • Relativas: em
    • Porcentajes