Aller au contenu
Astro Astro

Ajoutez des styles pour l'ensemble du site

Maintenant que vous avez une page “À propos” stylisée, ajoutons quelques styles globaux pour le reste de votre site !

Préparez-vous à…

  • Appliquer des styles au niveau du site entier

Ajoutez une feuille de style globale

Vous avez vu que la balise <style> d’Astro est limitée par défaut, ce qui signifie qu’elle n’affecte que les éléments de son propre fichier.

Il existe plusieurs façons de définir des styles de manière globale dans Astro, mais dans ce tutoriel, vous allez créer et importer un fichier global.css dans chacune de vos pages. Cette combinaison de feuille de style et de balise <style> vous permet de contrôler certains styles à l’échelle du site, et d’appliquer certains styles spécifiques exactement où vous le souhaitez.

  1. Créez un nouveau fichier à l’emplacement src/styles/global.css (vous devrez d’abord créer un dossier styles).

  2. Copiez le code suivant dans votre nouveau fichier, 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. Dans about.astro, ajoutez l’instruction d’importation suivante à votre frontmatter :

    src/pages/about.astro
    ---
    import '../styles/global.css';
    

    const pageTitle = "À propos de moi";
    

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Rédactrice technique",
      hobbies: ["photographie", "observation des oiseaux", "baseball"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];
    

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

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

  4. Vérifiez l’aperçu dans votre navigateur de votre page À propos, et vous devriez maintenant voir de nouveaux styles appliqués !

Essayez par vous-même - Importez votre feuille de style globale

Ajoutez la ligne de code nécessaire à chaque fichier .astro de votre projet pour appliquer vos styles globaux à chaque page de votre site.

✅ Montrez-moi le code ! ✅

Ajoutez l’instruction d’importation suivante aux deux autres fichiers de page : src/pages/index.astro et src/pages/blog.astro

src/pages/index.astro
---
import '../styles/global.css';
---

Apportez les modifications ou les ajouts que vous souhaitez au contenu de votre page À propos en ajoutant des éléments HTML au modèle de page, soit statiquement, soit dynamiquement. Écrivez tout JavaScript supplémentaire dans votre script du frontmatter pour vous fournir des valeurs à utiliser dans votre HTML. Lorsque vous êtes satisfait de cette page, validez vos modifications sur GitHub avant de passer à la leçon suivante.

Analysez le motif

Votre page À propos est désormais stylisée en utilisant à la fois le fichier global.css importé et une balise <style>.

  • Les styles des deux méthodes de mise en forme sont-ils appliqués ?

  • Y a-t-il des styles en conflit, et le cas échéant, lesquels sont appliqués ?

  • Décrivez comment global.css et <style> travaillent ensemble.

  • Comment choisiriez-vous de déclarer un style plutôt dans un fichier global.css ou dans une balise <style> ?

Liste de contrôle

Ressources