Aller au contenu

Mettre en forme votre page À propos

Maintenant que vous avez une page À propos avec du contenu vous concernant, il est temps de la mettre en forme !

Préparez-vous à…

  • Mettre en forme des éléments sur une seule page
  • Utiliser des variables CSS

Mettre en forme une page individuelle

Titre de la section Mettre en forme une page individuelle

En utilisant les balises <style></style> d’Astro, vous pouvez mettre en forme 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 Accueil ?
      • Votre page À propos ?
      • Votre page 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 mettre en forme. 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.

Utiliser votre première variable CSS

Titre de la section Utiliser 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 délimitateurs 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 (« navy »), tel que défini par la variable skillColor transmise à la directive define:vars.

Essayer par vous-même - Définisser des variables CSS

Titre de la section Essayer par vous-même - Définisser 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

Titre de la section Liste de contrôle

Ressources

Titre de la section Ressources
Contribuer Communauté Parrainer