Ir al contenido

Añadir estilo a todo el sitio

Ahora que ya tienes una página 'Acerca de' con estilo, ¡es hora de añadir algunos estilos globales para el resto del sitio!

Prepárate para...

  • Aplicar estilos globalmente

Añade una hoja de estilo global

Has visto que la etiqueta de Astro <style> tiene su propio alcance por defecto, lo que significa que sólo afecta a los elementos de su propio archivo.

Hay varias formas de definir estilos globales en Astro, pero en este tutorial, crearás e importarás un archivo global.css en cada una de tus páginas. Esta combinación de hoja de estilos y etiqueta <style> te da la capacidad de controlar algunos estilos en todo el sitio, y aplicar algunos estilos específicos exactamente donde quieras.

  1. Crea un nuevo archivo en la ubicación src/styles/global.css (Primero tendrás que crear una carpeta styles).

  2. Copia el siguiente código en tu nuevo archivo, global.css.

    html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

  3. En about.astro, añade la siguiente sentencia import a tu frontmatter:

    ---
import '../styles/global.css';

const pageTitle = "Sobre mi";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Escritor técnico",
  hobbies: ["fotografia", "observación de aves", "peñarol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
---

  4. Comprueba la vista previa del navegador de tu página 'Acerca de' y ahora debería ver los nuevos estilos aplicados.

Pruébalo tu mismo - Importa tu hoja de estilo global

Añade la línea de código necesaria a cada archivo .astro de tu proyecto para aplicar tus estilos globales a cada página de tu sitio.

✅ ¡Enséñame el código! ✅

Añade la siguiente sentencia import a los otros dos archivos de página: src/pages/index.astro y src/pages/blog.astro.

---
import '../styles/global.css';
---

Realiza cualquier cambio o adición que deseas en el contenido de tu página 'Acerca de' añadiendo elementos HTML a la plantilla de la página, ya sea de forma estática o dinámica. Escribe cualquier JavaScript adicional en tu script frontmatter para proporcionarle valores para usar en tu HTML. Cuando estés satisfecho con esta página, confirma tus cambios en GitHub antes de pasar a la siguiente lección.

Analiza el patrón

Tu página 'Acerca de' ahora tiene estilo usando ambos el archivo importado global.css y una etiqueta <style>.

  • ¿Se aplican los estilos de ambos métodos de estilización?

  • ¿Existen estilos contradictorios y, en caso afirmativo, cuál se aplica?

  • Describe cómo funcionan juntos global.css y <style>.

  • ¿Cómo decidir si declarar un estilo en un archivo global.css o en una etiqueta <style>?

Checklist

Recursos

Contribuir Comunidad Patrocinador