Comment modifier le style, la taille ou la couleur de la police sur le bon de livraison ?

Pour appliquer le même style à l'ensemble du texte du bon de livraison, accédez au modèle de bon de livraison dans les Paramètres des modèles et ajoutez le code suivant au début de la section En-tête de la commande :

 <style> 
  * {
    font-size:14px;
    font-family: Georgia, serif;
    color: #4f4f4f;
    }
 </style>

Le caractère * est un sélecteur global. Le code ci-dessus définit la taille de l'ensemble du texte du bon de livraison sur 14 pixels, la police sur Georgia (ou, si Georgia n'est pas disponible, sur la police avec empattement (serif) standard) et la couleur sur la valeur hexadécimale 4f4f4f (gris foncé).

Modifiez les valeurs de font-size, font-family et color selon vos préférences.

Pour modifier le style du texte pour un élément spécifique plutôt que pour l'ensemble du bon de livraison, ajoutez l'attribut de style à la balise de l'élément dont vous souhaitez changer le style (dans cet exemple, les mêmes options de texte que ci-dessus sont ajoutées à la balise <p> pour le message du bon de livraison) :

<p align="center" style="font-size:14px; font-family: Georgia, serif; color: #4f4f4f">[Packing Slip Message]</p>

Pour ce faire, ajoutez le texte de l'exemple ci-dessus au code du bon de livraison et modifiez les valeurs de chaque style selon vos besoins.

Pour mettre la police de l'exemple ci-dessus en gras, il suffit d'ajouter la propriété font-weight à l'attribut style :

style="font-size:14px; font-weight: bold; font-family: Georgia, serif; color: #4f4f4f"

Propriétés et valeurs de style courantes

Vous pouvez ajouter de nombreuses paires « propriété-valeur » aux balises de style, que ce soit de manière intégrée pour un seul élément ou entre des balises <style> en tête du code du bon de livraison, pour obtenir l'effet souhaité.

Voici les ajouts à un attribut de style les plus courants :

  • Mettre en gras

    font-weight: bold;
  • Mettre en italique

    font-style: italic;
  • Souligner

    text-decoration: underline;
  • Ajouter une couleur de surbrillance à l'arrière-plan du texte

    background-color: yellow;
  • Mettre la couleur du texte en rouge

    color: red;
  • Définir la taille de la police sur 18 points

    font-size: 18pt;

Modifier un texte spécifique dans une balise

Pour modifier seulement une partie du texte dans un élément, vous devez ajouter des balises <span>.

Dans cet exemple, seul le texte « 30 days » est en rouge, en italique avec une surbrillance jaune.

La flèche rouge pointe vers le texte modifié sur le bon de livraison. Le texte modifié « 30 days » est en rouge avec une surbrillance jaune.

Voici à quoi doit ressembler la section Pied de page de commande de votre bon de livraison :

<p align="center" style="font-weight: bold; font-size: 11px">Return items within <span style="font-style: italic; text-decoration: underline; background-color: yellow; color: red;">30 days</span> for a full refund.</p>

Pour découvrir d'autres façons de modifier le style des éléments de texte, consultez les pages didactiques de W3Schools ou de Mozilla Developer Network consacrées au HTML et au CSS.