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"
Vous pouvez ajouter de nombreuses paires « propriété-valeur » aux tags 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;
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.
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.