CSS avanzado: Padding, Flexbox, Positioning y Buenas Prácticas

Shorthand de Padding y Margin

  • Se pueden declarar 2, 3 o 4 valores en propiedades de caja (padding / margin):
    • 20 4020\ 40 ➜ 20px20\text{px} eje vertical (top & bottom) / 40px40\text{px} eje horizontal (left & right).
    • Con 4 valores se sigue el sentido de las agujas del reloj: arriba, derecha, abajo, izquierda.
    • Ejemplo: 20px 40px 100px 10px20\text{px}\ 40\text{px}\ 100\text{px}\ 10\text{px}.

Selectores: Elemento – Clase – Universal

  • Aplicar estilos directamente al elemento (ul, h1, etc.) es rápido pero difícil de mantener en proyectos grandes.
  • Clases (pref. con kebab-case o camelCase) permiten estilos reutilizables y controlados.
  • El selector universal (* { ... }) afecta a todos los nodos salvo que exista una regla más específica (clase, id, elemento).
  • Especificidad: ID > Clase > Elemento > Universal.

Fuentes del Sistema y Propiedades de Texto

  • font-family puede recibir system-fonts que todos los OS poseen (ej. Arial).
  • Procedimiento:
    1. ul { font-family: Arial; color: blue; } ➜ cambia letra y color a todas las listas.
    2. Utilizar clases si el cambio no debe afectar a todos los párrafos/listas.
  • Propiedad font-weight: bold se verá en el taller para poner negrita.

Propiedades de Color y Cascada

  • Al aplicar * { color: red; } todo hereda texto rojo salvo reglas más específicas.
  • El motor CSS lee de arriba hacia abajo; la última coincidencia prevalece.

Imágenes: Tamaño y Proporción

  • Atributos HTML: width, height; en CSS: width, height.
  • Definir solo un eje en píxeles mantiene la proporción; definir ambos deforma la imagen.
    • Ej.:
      css .imagen { width: 200px; height: auto; }
  • Clase vs atributo: se puede añadir la clase en cualquier posición dentro de la etiqueta (img class="imagen" src="...").

Pseudoclase :hover y Limitaciones

  • Definición: selector:hover { ... } – se dispara al pasar el ratón por encima.
  • Ejemplo de escalado:
  .imagen:hover { transform: scale(1.3); }
  • No funciona en tablets/móviles (sin mouse); buscar alternativas para esos dispositivos.

Herramientas de Desarrollador (DevTools)

  • Acceso rápido: clic derecho ➜ "Inspect".
  • Panel Elements muestra DOM + estilos;
    • Se pueden editar valores en caliente (no persisten tras refrescar).
    • Box-model overlay ayuda a visualizar margin / border / padding / content.
  • Icono "Select element" permite apuntar un nodo en pantalla.
  • Icono "Toggle Device Toolbar" muestra el modo responsive:
    • Dispositivos predefinidos (iPhone 12, Pixel 7, etc.).
    • Posibilidad de agregar "Viewport" personalizados (ej. 1440×9001440\times900 desktop).
  • Consola se usará para JavaScript (mención breve).

Responsive vs Adaptive Design

  • Responsive: mismo diseño se ajusta fluido a cualquier ancho (preferible).
  • Adaptive: varios diseños fijos para puntos de corte concretos (tablet, móvil…).

Unidades de Medida (lectura recomendada)

  • Absolutas: pxpx, cmcm, inin …
  • Relativas: %\%, emem (tamaño relativo al font-size del elemento padre), remrem (relativo al font-size del elemento raíz).

Flexbox: Fundamentos

  • display: flex sustituye el display: block/inline por defecto.
  • Dirección inicial: flex-direction: row.
    • Otras opciones: column, row-reverse, column-reverse.
  • Página recomendada: CSS-Tricks Flexbox Guide.

Contenedor Flex

.contenedor {  
  display: flex;          /* activa Flexbox */
  flex-direction: row;    /* eje principal */
  justify-content: center;/* eje principal */
  align-items: center;    /* eje cruzado  */
}
  • justify-content valores:
    • center, flex-start, flex-end, space-between, space-around, space-evenly.
  • align-items alinea en el eje perpendicular (cambia de sentido si flex-direction cambia).
  • gap: 10px crea separación uniforme entre ítems (solo horizontal si es fila).

Márgenes y Padding en Flex

  • margin actúa fuera del contenedor, reduciendo el área coloreada.
  • padding actúa dentro, empujando contenido sin reducir el fondo.

Concatenación de Clases

.caja1, .caja2 { background-color: tomato; }
  • Coma separa varios selectores que comparten reglas.
  • Evitar IDs para estilo: reservar id para JavaScript / anclas.

Centrado de Contenido Interno

  • Un div hijo también puede ser flex container para centrar su propio texto:
  .caja {  
    display: flex; 
    justify-content: center; 
    align-items: center; 
  }

Tipos de Display adicionales

  • block (por defecto en div), inline/inline-block.
  • grid: sistema de malla (ver guía CSS-Tricks Grid Guide).

Positioning: Static, Relative, Absolute, Fixed

  • Todos los nodos son static por defecto (sigue el flujo normal).
  • position: relative ➜ crea referencia para hijos absolute.
  • position: absolute ➜ saca el elemento del flujo; coordenas top / right / bottom / left se miden desde el ancestro con position: relative (o el body si no existe).
  .caja3 {
    position: absolute;
    top: -100px;   /* mueve hacia arriba */
    left: 0;
  }
  .contenedor { position: relative; }
  • Permite overlay y traslapes imposibles con Flex/Grid.

Cascada y Orden de Reglas

  • El navegador aplica la última regla coincidente si especificidad es igual.
  • Ej.:
  .caja { background: red; }
  .caja { background: seagreen; } /* prevalece */

Recursos Recomendados

  • CSS-Tricks Flexbox & Grid Guides.
  • Color picker del navegador para obtener códigos.

Taller Propuesto

  • Construir mockup de tres tarjetas con Flexbox:
    • Fuente: Barlow, 32px32\text{px}, font-weight: bold.
    • Fondo general: gris #f2f2f2 (exacto via picker).
    • Alineación centrada y espaciados según maqueta.
    • Requisitos: usar sólo HTML5 + CSS3, sin JavaScript.
  • Leer artículo sobre unidades de medida en CSS antes de empezar.

Recordatorios Finales

  • Ediciones en DevTools son temporales; persistir sólo guardando en el archivo.
  • Hover no aplica en mobile/tablet: considerar alternativas.
  • IDs para lógica; clases para estilos.
  • Flex ≠ Grid: ambos se verán, grid en píldora futura.