Aller au contenu

Ajouter des styles pour l'ensemble du site

Maintenant que vous avez une page À propos mise en forme, il est temps d’ajouter quelques styles globaux pour le reste de votre site !

Préparez-vous à…

  • Appliquer des styles à l’ensemble du site

Ajouter une feuille de style globale

Titre de la section Ajouter une feuille de style globale

Vous avez vu que la balise <style> d’Astro possède une portée 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 du navigateur de votre page À propos, et vous devriez maintenant voir de nouveaux styles appliqués !

Essayer par vous-même - Importer votre feuille de style globale

Titre de la section Essayer par vous-même - Importer 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 ajouts souhaités au contenu de votre page À propos en ajoutant des éléments HTML au modèle de page, soit statiquement, soit dynamiquement. Ajoutez du JavaScript dans votre script du frontmatter pour 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.

Analyser la formule

Titre de la section Analyser la formule

Votre page À propos est désormais mise en forme 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> fonctionnent 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

Titre de la section Liste de contrôle

Ressources

Titre de la section Ressources
Contribuer Communauté Parrainer