Skip to content

Latest commit

 

History

History
153 lines (109 loc) · 5.21 KB

5.mdx

File metadata and controls

153 lines (109 loc) · 5.21 KB
type title i18nReady description
tutorial
Añadir estilo a todo el sitio
true
Tutorial: Crea tu primer blog con Astro — Crea una hoja de estilo global para el estilo de todo el sitio

import Checklist from '/components/Checklist.astro'; import Spoiler from '/components/Spoiler.astro'; import Box from '/components/tutorial/Box.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components';

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

- 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`).

  1. 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;
}

  2. 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 = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

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

    Si

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

    Sí, `

    ` tiene un tamaño de `2.5rem` globalmente, pero `4rem` localmente en la etiqueta `<style>`. La regla `4rem` local se aplica en la página 'Acerca de'.

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

    Cuando se definen estilos contradictorios tanto a nivel global como en la etiqueta local `<style>` de una página, los estilos locales deberían sobrescribir cualquier estilo global. (Pero puede haber otros factores implicados, así que inspecciona siempre visualmente tu sitio para asegurarte de que los estilos se aplican correctamente).

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

    Si quieres que un estilo se aplique a todo el sitio, elige un archivo `global.css`. Sin embargo, si desea que los estilos se apliquen sólo al contenido HTML de un único archivo `.astro` y no afecten a otros elementos del sitio, deberá elegir una etiqueta `<style>`.

## Checklist - [ ] Puedo añadir estilos CSS globales importando un archivo `.css`.

Recursos