Insertion du style dans balises HTML - Formatage du texte

En mauve sur l'image

Où et comment insérer du langage CSS pour remplacer ponctuellement le style global créé dans le DizPerso, voir avant, dans l'article précédent [lien] quelques conseils pour la saisie des articles dans le composeur de Blog4ever et un aperçu de l'insertion de style dans les balises HTML.

Pour mieux comprendre la suite...
Dans le fichier CSS créé par DizPerso déjà certaines règles agissent sur des balises du HTML, en particulier sur celle des liens <a> mais également celles des titres <H1> <H2> <H3> ainsi que les listes <Ul> <OL> <LI>. Je ne rentre pas dans le détail ici, j'énumère simplement pour bien faire remarquer que ça existe dans DizPerso et que ce qui va suivre n'a rien d'original. Le principe de mettre à la disposition de tous, un outil simple, exige qu'il contienne le minimum nécessaire pour modifier le design d'un blog. Le rajout de règles au DizPerso nuirait à la facilité de son utilisation, alors qu'il est largement suffisant pour de nombreux bloggueurs.
Bien sûr et c'est tout naturel, nous voulons sans cesse nous améliorer, en informatique plus qu'ailleurs, tout progresse tellement vite, nous sommes tentés à aller toujours de l'avant.
L'un des gros avantages de Blog4ever, est que l'essentiel est prévu et peut suffir.
Mais le plus intéressant à mon avis est, l'accès au code, nous ne sommes pas enfermés dans un système où presque tout est prévu par le concepteur sauf ce qui nous aimerions pouvoir faire. Evidemment un tel système implique une volonté de recherche, de comprendre, d'apprendre, et également un effort d'adaptation dans le cas où cette liberté nous oblige à passer par des procédures plus complexes... que le presse bouton.

Cette petite mise au point faite, rentrons dans le vif du sujet.

La partie "Contenu" est le corps de l'article, il peut contenir du texte, des images <img> et divers autres objets. Pour une meilleure compréhension, création de paragraphes <P>, avec des blocs <DIV> ou inversement, également divisé à l'aide de titres <H3>, d'utilisation des listes <UL> ou <OL> pour améliorer la présentation. Mais aussi créer des sous-titres avec la balise <H4> pour les blocs, puis des titres de paragraphes avec <H5>.

Dans toutes ces balises HTML nous pouvons insérer du CSS, sous la forme : style="attribut:valeur;".

Attention!!! ne pas oublier...
En HTML les balises sont en 2 éléments, ouverture et fermeture [lien], une particularité comme <img /> [voir].

Pour le texte c'est un peu différent comme je l'ai expliqué dans l'article précédent [lien], à l'aide de la barre d'outils du composeur, on peut appliquer un format directement sans rentrer en mode HTML. Par contre il existe une balise HTML pour appliquer un style à des parties de texte <span>, elle n'est pas utilisée par le composeur, mais pour ceux qui sont intéressés, sa présence donne la possibilité d'insérer du CSS comme dans les autres balises, pour modifier directement le style du texte qu'elle contient. D'où l'intérêt de son emploi est sa faculté de gérer un style commun à plusieurs mots ou groupes de mots, répétés plusieurs fois dans le texte, ce qui a comme résultat... alléger le code et surtout l'avantage de modifier rapidement le style de tout ce qu'elle contient.
Egalement plusieurs combinaisons de règles, selon son emplacement dans un
paragraphe p span {les attributs}ou un bloc div span {les attributs} et même utilisation de CLASSES, comme dans le petit exemple ci-dessous
.surligne{background-color: #ffcc33; font-family: Comic sans MS;}
... je reviendrai par la suite sur ce sujet dans d'autres exemples.

Un petit exemple en attendant mieux...

Dans l'article précédent, l'exemple de code contenant la balise <span>, comme ci-dessous :

Un <span style="font-weight: bold; font-size:14pt;">exemple</span>
bien simple dans le composeur de Blog4ever, déjà,
<span style="font-style: italic; color: #993300;">peut-être sans le savoir</span>, vous mettez du style à
certains <span style="font-weight: bold;">mots</span>,
ou <span style="font-weight: bold;">phrases</span>,
ou <span style="font-weight: bold;"> paragraphes</span>,
<span style="background-color: #ffcc33; font-family: Comic sans MS;">
en les sélectionnant et en cliquant sur l'un des bouton de la barre d'outils</span>.

Avec la création de style en CSS, soit dans une feuille de style ou au début d'un article comme ceci :

Le même texte se trouverait allégé, les balises <span> seraient gérées par le CSS ci-dessus.
Tout le texte contenu dans les balises <span> en gras par la règle de style span{font-weight: bold;}
Seulement les différences sont à mettre en direct, comme le mot "exemple" pour la taille des caractères on ajoute style="font-size:14pt;"
et pour le groupe de mots "peut-être sans le savoir"
on ajoute style="font-style: italic; color: #993300;"
par contre il serait en gras comme les autres balises <span> sauf si l'on rajoute au style l'attribut font-weight avec la valeur normal .

Pour le surlignage, la class .surligne{background-color: #ffcc33; font-family: Comic sans MS;} permet de diminuer considérablement le code avec seulement <span class="surligne">.

Un <span style="font-size:14pt;">exemple</span>
bien simple dans le composeur de Blog4ever, déjà,
<span style="font-style: italic; color: #993300;">peut-être sans le savoir</span>, vous mettez du style à
certains <span>mots</span>,
ou <span>phrases</span>,
ou <span> paragraphes</span>,
<span class="surligne">
en les sélectionnant et en cliquant sur l'un des boutons de la barre d'outils</span>.

Ce style étant utilisé plusieurs fois, vous imaginé facilement la quantité de code en moins à saisir et le gain de place. Certainement un peu difficile pour les non-initiés, par la suite j'essayerai de montrer un exemple plus simple, plus explicite de l'emploi de cette balise.
Dans un premier temps elle n'est pas absolument indispensable.

Les points forts du CSS... les diverses possibilités d'organiser les variantes de style, du global au détail du mot à mot, font de ce langage un outil fabuleux. La cerise sur le gâteau, vous le comprendrez, quand vous souhaiterez modifier, la couleur ou la taille des caractères de certaines parties de votre texte dont le style est géré par une règle de CSS. En changeant 2 valeurs, plusieurs pages seront modifiées... quel bonheur!!!
D'où l'importance de bien prévoir cet avantage en créant vos formats de style, l'action de chaque règle selon son niveau, bien qu'il soit toujours possible de formater une exception, mon petit exemple le prouve.

Suite...
Création - Mini Style spécifique incorporé dans article ... [lien]