Aller au contenu
Astro Astro

Stylisez votre page À propos

Maintenant que vous avez une page “À propos” avec du contenu vous concernant, stylisons-la !

Préparez-vous à…

  • Styliser des éléments sur une seule page
  • Utiliser des variables CSS

Styliser une page individuelle

En utilisant les balises <style></style> d’Astro, vous pouvez styliser des éléments sur votre page. Ajouter des attributs et des directives à ces balises vous offre encore plus de possibilités de mise en forme.

  1. Copiez le code suivant et collez-le dans src/pages/about.astro :

    src/pages/about.astro
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head>

    Vérifiez les trois pages dans l’aperçu de votre navigateur.

    • De quelle couleur est le titre de :

      • Votre page d’accueil ?
      • Votre page À propos ?
      • Votre page de blog ?

    • La page avec le plus grand texte de titre est ?

  2. Ajoutez le nom de classe skill aux éléments <li> générés sur votre page À propos, pour que nous puissions les styliser. Votre code devrait ressembler à ceci :

    src/pages/about.astro
    <p>Mes compétences sont :</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>

  3. Ajoutez le code suivant à votre balise de style existante :

    src/pages/about.astro
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>

  4. Visitez à nouveau votre page À propos dans votre navigateur et vérifiez, par inspection visuelle ou avec les outils de développement, que chaque élément de votre liste de compétences est maintenant vert et en gras.

Utilisez votre première variable CSS

La balise <style> d’Astro peut également référencer toutes les variables de votre script du frontmatter en utilisant la directive define:vars={ {...} }. Vous pouvez définir des variables dans vos barres de code, puis les utiliser comme variables CSS dans votre balise de style.

  1. Définissez une variable skillColor en l’ajoutant au script du frontmatter de src/pages/about.astro comme ceci :

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

  2. Mettez à jour votre balise <style> existante ci-dessous pour d’abord définir, puis utiliser cette variable skillColor à l’intérieur de doubles accolades.

    src/pages/about.astro
    <style define:vars={{skillColor}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>

  3. Vérifiez votre page À propos dans votre aperçu de navigateur. Vous devriez voir que les compétences sont maintenant d’un bleu marine, tel que défini par la variable skillColor transmise à la directive define:vars.

Essayez par vous-même - Définissez des variables CSS

  1. Mettez à jour la balise <style> sur votre page À propos pour qu’elle corresponde à celle ci-dessous.

    src/pages/about.astro
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>

  2. Ajoutez les définitions de variables manquantes dans votre script du frontmatter pour que votre nouvelle balise <style> applique avec succès ces styles à votre liste de compétences :

    • La couleur du texte est le bleu marine
    • Le texte est en gras
    • Les éléments de la liste sont en majuscules (lettres capitales)
✅ Montrez-moi le code ! ✅
src/pages/about.astro
---
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";
---

Liste de contrôle

Ressources