Modifier la couleur ou la taille d'une partie de texte
BlueGriffon version 3.01
Utilisation de la balise  <span>

Vous créez une page web dans BlueGriffon. Vous souhaitez modifier  la taille de la police utilisée (plus petite, par exemple) ainsi que la couleur (verte par exemple) pour une partie de texte d'un paragraphe.

  Depuis la version 3 un outil permet de modifier directement la couleur du texte et son arrière-plan dans l'interface de BlueGriffon.

  Mais il n'y a pas d'outils disponible pour modifier la taille de la police 

A. Modifier la couleur d'une sélection de texte

• Sélectionner le texte dont la couleur est à modifier.
• Cliquer  sur le premier cercle noir pour  modifier la couleur du texte sélectionné
• Le fait de cliquer sur ce cercle noir (par défaut) ouvre la boite de dialogue Windows pour effectuer le choix d'une couleur.
  
• Sélectionner une couleur
• Cliquer sur le bouton OK
  
  La couleur du texte sélectionné  a été modifiée. Vérifier le code source. Le texte sélectionné est encadré des balises <span> </span>. La balise span est affectée de l'attribut style="color : #xxxxxx;"
  
  

 Mais quel est le rôle de l'icone  cercle blanc en dessous de l'icone cercle noir qui nous a servi à modifier la couleur de texte ?

A première vue on pourrait penser qu'il permet de modifier l'arrière-plan du texte sélectionné. En fait, il crée bien un arrière-plan de couleur mais celui-ci est affecté à tout le paragraphe contenant le texte sélectionné.

ASTUCE si vous souhaitez créer un arrière-plan d'un texte sélectionné,
- Sélectionnez le Code source,
- Encadrez le texte à mettre en surbrillance de balises <span> </span>.
- Et ajoutez style= "background-color: #xxxxxx;" à l'intérieur de la balise <span>.

#xxxxxx correspond à un code couleur Web. On peut aussi utiliser un code rgb.

B. Modifier la taille de la police

• Sélectionner le texte dont la taille  est à modifier.


• Activer la commande : Format, Span
    Vous pouvez observer :
  -  la balise <span> est affichée dans la barre de structure.
  -  le texte sélectionné est encapsulé entre les deux balises <span> </span>) si vous affichez le code source.


• Afficher le panneau Styles CSS par la commande : Panneaux, Styles CSS



• Dans la partie Appliquer les styles à (en haut du panneau) sélectionner : "cet élément via ses styles embarqués"






• Afficher les options de l'onglet Général


• Activer la liste déroulante de l’élément Taille


• Sélectionner une nouvelle taille dans la liste.

La modification de taille s'effectue instantanément