Fase 2: Bases CSS

Contenidos

  • Modelo de cajas
  • Colores / Imágenes / Gradientes
  • Tipografías
  • Selectores CSS avanzados

Si no aprendes CSS primero, y te lanzas a usar Tailwind... Habrán problemas. Con él.

¿Qué es CSS?

  • Aplicar diseño (CSS) a estructura y contenido (HTML)
  • Sintaxis básica de CSS
  • Normalmente se escribe en un fichero a parte
  • Históricamente, CSS era global. Pero ya no tiene que serlo.
  • CSS: Lento de desarrollar, eficiente, alta personalización.
  • Frameworks: Rápido de desarrollar, menos personalización. Ideal si quieres "patrones frecuentes".

Recomendación para aprender CSS en 5 pasos

  • Paso 1: Tener una idea de lo que existe en CSS → Básica → CheatSheet
  • Paso 2: Aprender Bases y Selectores
  • Paso 3: Aprender a organizar código
  • Paso 4: Aprender Layouts
  • Paso 5: Aprender Cascada CSS

Modelo de cajas

Overflow (Desbordamiento)

<div class="avatar">
  <img src="https://manz.dev/manzdev.png"
       alt="ManzDev">
</div>

<style>
.avatar {
  width: 150px;
  height: 150px;
  background: indigo;
  padding: 1rem;
}
</style>

<div class="avatar">
  <img src="https://manz.dev/manzdev.png"
       alt="ManzDev">
</div>

<style>
.avatar {
  width: 150px;
  height: 150px;
  background: indigo;
  padding: 1rem;
  overflow: hidden;   1

  img { width: 100% }  2️⃣
}
</style>
  • Norma 1 de CSS: Entiende CSS → no lo intentes cambiar

  • ➡ Overflow: Gestionar el desbordamiento
  • Entender el modelo de cajas (en siguientes slides)

Realmente, no se hace en el mismo documento

  • Separa siempre en un fichero .css a parte
  • Evita los <style> (salvo casos concretos)
  • Evita el atributo style (salvo casos concretos)
<html>
<head>
  <!-- ... -->
  <link rel="stylesheet" href="/css/global.css">
</head>
<body>
  <!-- ... -->
</body>
</html>

Variables CSS

.element {
  --size: 50px;

  width: var(--size);        /* No usa fallback */
  height: var(--size, 50px); /* Usa fallback */
}
  • Variable definida en el elemento
  • Variable definida en el padre
  • Variable definida en el HTML
  • Uso de fallbacks
  • Ámbitos de variables de CSS

Unidades

.element {
  --size: 50px;   /* Se va a usar +1 vez */
  --space: 1rem;  /* Más limpio luego */

  width: var(--size);
  height: var(--size);
  padding: var(--space);
}

.element {
  width: max-content;   /* Tamaño máximo */
  width: min-content;   /* Tamaño mínimo */
  width: auto;          /* Browser calcula */

  background: indigo;
  padding: 1rem;
}

Box Model (Modelo de cajas)

  • margin → espacio exterior
  • padding → espacio interior → margin/padding
  • border → intermedio
  • Contenido (Ojo, el tamaño dado en dimensiones)
.element {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 15px solid white;
  background: indigo;
}

Content-box model

Modificar el modelo de cajas

  • La propiedad box-sizing permite cambiar el modelo de cajas.
  • El modelo por defecto es content-box
  • El modelo border-box es un modelo alternativo.
  • Se pueden usar ambos en una página.
  • Mucha gente usa resets (y se saltan entender esto)

modelo de cajas

Bordes redondeados

  • Existen varias propiedad para modificar bordes CSS
.element {
  --colors: indigo, purple, hotpink;
  --gradient: linear-gradient(var(--colors));

  width: 200px;
  height: 200px;
  border: 3px solid black;
  border-image: var(--gradient) 1 / 2rem;
  border-radius: 50px;
  corner-shape: scoop;
}


    * border-image es incompatible con border-radius

Colores y fondos

Secciones

  • Esquemas de colores
  • Imágenes de fondo
  • Gradientes

Colores

  • Propiedades: color y background-color
  • Palabras clave: indigo, deeppink, white, ... → keywords
  • Esquema de colores RGB
  • Función RGB: rgb(25% 40% 80% / 50%) ❌ rgba()
  • ⭐ Hexadecimal: #558899 → #589
  • Función HSL: hsl(0.75turn 45% 35% / 100%) ❌ hsla()
  • Funciones avanzadas: oklab() y oklch()

Fondos

  • Fondos: background-image con función url("imagen.jpg")
  • Gradientes: linear-gradient(), radial-* y conic-*
  • Se pueden combinar y añadir múltiples fondos
  • Otras y la propiedad de atajo: background
.element {
  width: 800px;
  min-height: 300px;
  background-color: red;
  background-image: url("imagen.jpg");
}

.element {
  width: 800px;
  min-height: 300px;
  background-color: red;
  background-image: linear-gradient(indigo, deeppink, black);
  background-image: radial-gradient(circle 50px at 50% 50%, indigo, deeppink, black);
  background-image: conic-gradient(from 0.5turn at 50% 50%, indigo, deeppink, black);
}

.element {
  width: 800px;
  min-height: 300px;
  background-color: red;
  background-image:
    linear-gradient(black, transparent),
    url("imagen.jpg");
}

.element {
  width: 800px;
  min-height: 300px;
  background-color: red;
  background-image: url("imagen.jpg");
  background-position: 35px 50px;
  background-repeat: repeat-x;
  background-size: cover;
}

Tipografías

  • La propiedad font-family establece la fuente
  • Se suele establecer una lista de fuentes (de 2 a 3, aprox.)
  • Se termina con una fuente segura.
  • Propiedades relacionadas: tamaño, peso, estilo...
.element {
  font-family: Outfit, "Victor Mono", serif;
  /* Fuentes seguras → serif, sans-serif, monospace, fantasy, cursive, math */
  font-size: 18px;
  font-weight: 400;     /* Peso: 100-1000 */
  font-style: italic;   /* italic, normal, oblique */
}
  • 👎❌ Las tipografías sólo se ven si el usuario las tiene instaladas

Formatos de tipografías

@font-face {
  font-family: "EnterCommand";
  font-display: swap;
  src:
    url("/fonts/entercommand.woff2") format("woff2"),
    url("/fonts/entercommand.woff") format("woff"),
    url("/fonts/entercommand.ttf") format("truetype");
}

# Conversor de .ttf a .woff2
sudo apt install woff2
woff2_compress file.ttf # A woff2
woff2_decompress file.woff # A ttf

# Conversor de .ttf a .woff (v1)
pnpx ttf2woff file.ttf file.woff

Tipografías (avanzado)

p {
  font-family: Jost;
  font-size: 2rem;
  font-feature-settings: "ss01" 1;
  font-feature-settings: "tnum" 1;
  font-feature-settings: "ss01" 1, "tnum" 1;
}

Selectores CSS

Formas de seleccionar elementos

  • Selectores básicos
  • Pseudoselectores
  • Selectores avanzados

Selectores CSS: Básicos

  • Obligatorios: #id y .class (sobre todo class)
  • Otros selectores como > (hijo directo) y + (siguiente)
<div class="container">
  <h1>Título</h1>
  <p>Primer <strong>párrafo</strong>.</p>
  <p>Segundo <strong>párrafo</strong>.</p>
  <footer>
    <p>Último <strong>párrafo</strong>.</p>
  </footer>
</div>

.container { /* ... */ }
.container p { /* ... */ }
.container > p { /* ... */ }
.container h1 + p { /* ... */ }

CSS Nesting

  • Permite agrupar código de forma más entendible
  • Simplifica los selectores
  • No tienes que aplicar nesting siempre (ideal: con grupos relacionados)
.container { /* ... */ }
.container .item { /* ... */ }
.container > p { /* ... */ }
.container:hover { /* ... */ }

.menu .container { /* ... */ }

.container {
  /* ... */
  .item { /* ... */ }
  > p { /* ... */ }
  &:hover { /* ... */ }
  .menu & { /* ... */ }
}

Selectores CSS: Atributos

<a href="https://manz.dev/">Manz.dev</a>
<a href="https://manz.dev/document.pdf">Descargar</a>
<a href="https://manz.dev/audio.mp3">Descargar</a>
<a href="http://manz.dev/insecure/">Acceder a la página</a>

<style>
a[href] { /* ... */ }
a[href="https://manz.dev/"] { /* ... */ }
a[href^="http://"] { /* ... */ }
a[href$=".pdf" i] { /* ... */ }
</style>

Selectores CSS: Pseudo

/* Pseudoclases */
input:hover { /* ... */ }
input:focus { /* ... */ }
input:disabled { /* ... */ }
input:checked { /* ... */ }
input:placeholder-shown { /* ... */ }
input:valid { /* ... */ }
input:invalid { /* ... */ }
input:required { /* ... */ }

/* Pseudoelementos */
p::first-letter { /* ... */ }

<!-- HTML -->
<h2 data-author="ManzDev">Tema 1</h2>
<h2 data-author="felixicaza">Tema 2</h2>
<h2 data-author="eiosoy">Tema 3</h2>

<!-- Pseudoelementos -->
<style>
  h2::after {
    content: "» Autor: " attr(data-author);
    color: indigo;
  }
</style>

Combinadores Lógicos CSS (Avanzado)

.parent .item-1,
.parent .item-2,
.parent .item-3 {
  /* ... */
}

/* Simplifica grupos */
.parent :is(.item-1, .item-2, .item-3) { /* ... */ }

/* Enlaces sin atributo href */
a:not([href]) { /* ... */ }

/* Estilar .parent solo si contiene <code>... */
.parent:has(code) {
  /* ... */
}

Preguntas