CSS

Une visiteuse qui, comme moi, débute sur Blogger, me demande des informations sur la façon d'écrire un code css  pour un article.

Dans l'icône crayon, à gauche de la barre d'outils, il faut choisir  "Affichage html".

Ecrire un code html simple peut se faire par les outils de la barre d'outils, en choisissant les outils à votre disposition; dans ce cas, le programme écrit automatiquement le code adapté.

Il peut se faire en écrivant directement le code html dans la fenêtre "Affichage html"

Pour ajouter des lignes css à un code html, il faut passer par cette dernière façon. 

Testons la première façon sur une ligne de texte, par les icônes:

tT= grande

Couleur de texte:rouge

B=gras

Ligne de texte test.

Le programme a écrit, en html:

<p><span>b</span><span style="color: red;"><b><span style="font-size: grande;">Ligne de texte test.</span></b></span><br /></p>

Cette méthode ne demande rien d'autre que d'utiliser les icônes de la barre d'outils, ce qui est limité.

***************************************************

Si je voulais écrire ce texte directement en affichage html, j'écrirais, dans ce cadre:

<p style="font-size:18pt; color:red; font-weight:bold">Ligne de texte test.</p>

ce qui me donnerais:

Ligne de texte test.

*************************************************

Si je veux ajouter des lignes css dans le code précédent, il me faut identifier l'élément à paramétrer, à savoir le paragraphe et lui donner les paramètres choisis en ligne CSS.

<p id="cd1">Ligne de test</p>

<style><!--

#cd1{font-size:18pt; color:red; font-weight:bold; text-shadow:1px 1px black;}

--></style> 

Ligne de texte test

J'ai juste ajouté l'attribut ombre au texte car l'écriture en CSS permet plus de choix des attributs.

Comme vous le voyez, écrire une partie CSS dans un code html doit se faire entre les deux lignes surlignées en vert; comme pour tout attribut, il lui faut une balise d'entrée:

<style!><!--

et une balise de sortie:

--></style>

tout ça étant bien symétrique pour que le programme sache où commencer et où finir.

Il n'y a donc pas de cadre CSS mais il fait partie de l'affichage html, qui sait le lire.

**************************************************

Dans le cas d'une image, on peut ajouter bordure, arrondi, ombres intérieures ou/et extérieures, liseré....

Le souci que nous avons, avec les codes que j'ai proposés, est le centrage du montage dans la zone article blogger; je n'ai pas trouvé d'autre moyen que de jouer sur les valeurs de margin.

Rappel: margin définit des écarts extérieurs dans l'ordre: haut, droit, bas, gauche.

En indiquant une valeur droite de 0 px et celle de gauche à -150px (selon la largeur de votre montage), vous centrerez votre montage dans la zone article.

<p><img id="mg1" src="http://ekladata.com/63wwGSrXAyvGK4PZ91PhrbHM6eA@1100x619.jpg" /></p>

<style><!--

#mg1{margin:50px 0px 50px -10px; border:6px ridge white; border-radius:100px; box-shadow:6px 6px 8px black;}  

--></style>