Saltearse 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

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.

    src/styles/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:

    src/pages/about.astro
    ---
    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 = "navy";
    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

Sección titulada 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.

src/pages/index.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.

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>?

Contribuir

¿Qué tienes en mente?

Comunidad