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

Titre de la section 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

Titre de la section 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

Titre de la section 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 ?

  Oui

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

  Oui, <h1> a une taille de 2.5rem globalement, mais 4rem localement dans la balise <style>. La règle locale 4rem est appliquée sur la page À propos.

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

  Lorsque des styles en conflit sont définis à la fois globalement et dans une balise <style> locale d’une page, les styles locaux devraient écraser les styles globaux. (Cependant, il peut y avoir d’autres facteurs en jeu, il est donc toujours recommandé d’inspecter visuellement votre site pour vous assurer que vos styles soient correctement appliqués !)

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

  Si vous souhaitez qu’un style soit appliqué à l’ensemble du site, vous choisiriez d’utiliser un fichier global.css. Cependant, si vous souhaitez que les styles s’appliquent uniquement au contenu HTML d’un seul fichier .astro, sans affecter d’autres éléments de votre site, vous choisiriez une balise <style>.

Liste de contrôle

Titre de la section Liste de contrôle

• Je peux ajouter des styles CSS globaux en important un fichier .css.

Ressources

Titre de la section Ressources

• Comparaison entre la syntaxe d’Astro et JSX

• Balise <style> Astro

• Variables CSS dans Astro