Le but est de montrer beaucoup d'exemples de styles.

<div> indique un début de section, avec retour à la ligne. Fin : </div>
<span> indique un début d'un texte, sans retour à la ligne. Fin : </span>

Pour une liste complète de styles, c.f. w3schools.com : CSS Reference

Ces exemples de styles sont inspirés de l'annexe 3 du livre :
Apprenez à créer votre site web avec HTML5 et CSS3, annexe 3 sur le CSS, du site Openclassrooms, un cours de Mathieu Nebra.

Propriétés de mise en forme du texte

<div style="font-family:times, serif;"> ... </div>
<div style="font-family:arial, sans-serif;"> ... </div>
<div style="font-family:cursive;"> ... </div>
<div style="font-family:fantasy;"> ... </div>
<div style="font-family:monospace;"><br>
mmmmmmmmmmmmmmmmmmmmmmmmmmmmm<br>
iiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
<div style="font-family:courier, monospace;"><br>
mmmmmmmm<br>
iiiiiiii</div>

<div style="font-size:16pt;"> ... </div>
<div style="font-size:12pt;"> ... </div>
<div style="font-size:8pt;"> ... </div>
<div style="font-size:150%;"> ... </div>
<div style="font-size:70%;"> ... </div>

<div style="font-weight:bold;"> texte en gras</div>
<div style="font-weight:lighter;"> normal, bold, bolder, lighter, 100 à 900</div>
<div style="font-weight:100;"> ne donne pas ce qui est attendu !?!</div>
<div style="font-weight:400;"> = normal</div>
<div style="font-weight:700;"> = bold</div>
<div style="font-weight:900;"> ... </div>

<div style="font-style:italic;"> texte en italique</div>
<div style="font-style:oblique;"> ... </div>
<div style="font-style:normal;"> normal, italic, oblique</div>

<div style="text-decoration:overline;"> ... </div>
<div style="text-decoration:underline;"> texte souligné</div>
<div style="text-decoration:line-through;"> ... </div>
<div style="text-decoration:none;"> none, underline, overline, line-through</div>

<div style="font-style:italic; font-weight:bold; text-decoration:underline;"> ... </div>

<div style="font-variant:small-caps;"> ... </div>
<div style="font-variant:normal;"> ... </div>

<div style="text-transform:capitalize;"> ajoute des majuscules en début de mots</div>
<div style="text-transform:uppercase;"> ... </div>
<div style="text-transform:lowercase;"> MAJUSCULES TransFormées</div>
<div style="text-transform:none;"> capitalize, uppercase, lowercase, none</div>

<div style="font:bold italic 130% normal sans-serif;">
font-weight font-style font-size font-variant font-family<br>
Combine plusieurs propriétés. </div>

<div style="text-align:left;"> ... </div>
<div style="text-align:center;"> ... </div>
<div style="text-align:right;"> ... </div>
<div style="text-align:justify;"> left, center, right, justify.   N'a d'intérêt que si le paragraphe est assez long pour se trouver sur plusieurs lignes, pour qu'une justification ait un sens. Sinon, on ne remarque rien. Donc je continue avec un peu de blablabla, pour que l'on voit plusieurs lignes avec la même marge à gauche et à droite. Cela peut être utile, pour mettre en valeur un joli texte.</div>

<div style="text-align-last:center;"> Je ne comprends pas l'utilité.</div>
<div style="text-align-last:right;"> ... </div>

Pour aligner une image à la suite d'un texte : perle_000
Pour aligner une image à la suite d'un texte :
<img style="vertical-align:middle;" alt='perle_000' src="images/perle_100.png">


Pour aligner une image au sommet du texte : perle_000
Pour aligner une image au sommet du texte :
<img style="vertical-align:top;" alt='perle_000' src="images/perle_100.png">


Pour aligner une image au bas du texte : perle_000
Pour aligner une image au bas du texte :
<img style="vertical-align:bottom;" alt='perle_000' src="images/perle_100.png">

On peut remplacer "bottom" par :
top, middle, bottom, baseline, sub, super, net-top, text-bottom

<div style="line-height:24pt;"><br>
Plusieurs lignes montre l'effet<br>
de cette définition.</div>
<div style="line-height:150%;"><br>
Plusieurs lignes montre l'effet<br>
de cette définition.</div>

<div style="text-indent:24pt;"><br>
montre l'indentation de la première ligne.</div>

Autres styles possibles, à tester :
white-space   word-wrap   text-shadow

Pour une liste complète de styles, c.f. w3schools.com : CSS Reference

Propriétés de couleur et de fond

<div style="color:#ff40c0;"> pour définir la couleur, ff=max. de rouge, 40=un peu de vert, c0=pas mal de bleu.</div>
<div style="color:rgb(90,90,0);"> couleur, Vert Rouge Bleu.</div>
black=#000000   red=#ff0000   green=#00ff00   blue=#0000ff   violet   yellow=#ffff00   yellowgreen   brown   magenta=#ff00ff   maroon   cyan=#00ffff  
Il y a ainsi plus de cents couleurs prédéfinies

<div style="background-color:cyan;"> ... </div>

<div style="background-image:url(images/L_intrus.png); background-repeat:no-repeat">   Cherchez l'intrus.<br>
<div style="color:rgb(0, 128, 255); margin-left:10px;">
On peut écrire<br>
sur l'image.<br>
Parfois, cela a un sens.<br>
</div>
</div>

<p style='color:white; background-color:green'>
Texte en blanc sur fond vert. C'est moche, mais c'est permis.
</p>

<p style='color:yellow; background-color:blue'>
Texte en jaune sur fond bleu. C'est mieux.
</p>.


Autres styles possibles, à tester :
background-attachment   background-repeat   background-position   background   opacity

Pour une liste complète de styles, c.f. w3schools.com : CSS Reference

Propriétés des boîtes


<hr style="margin-left:0; width:95%"> défini une ligne de largeur 95%.

<div style="width:650px; height:80px; border-style:solid;
margin-top:5px; margin-right:8px; margin-bottom:5px; margin-left:8px;">
...
</div>
<div style="width:650px; height:80px; border-style:dotted;
padding:5px 8px 5px 8px; margin-bottom:8px;">
...
</div>
<div style="width:650px; height:90px; border-style:solid;
padding-top:5px; padding-right:8px; padding-bottom:5px; padding-left:8px;
margin-bottom:8px;">
...
</div>
<div style="width:300px; height:80px; border-style:double;">
...
</div>
<div style="width:660px; height:90px; border-style:double; margin-top:10px;
border-color:blue; border-radius:10px;">
...
</div>
<div style="width:660px; height:90px; border-style:solid; border-width:1px;
margin-top:10px; box-shadow:10px 10px 5px #6666ee;">
c.f. http://www.w3schools.com/cssref/css3_pr_box-shadow.asp </div>

Autres styles possibles, à tester :
min-width   max-width   min-height   max-height  
margin   padding   border

Pour une liste complète de styles, c.f. w3schools.com : CSS Reference

Propriétés de positionnement et d'affichage

style="visibility:visible;"
style="visibility:hidden;"Un texte invisible précède.
style="visibility:collapse;"Un texte 'collapse' précède.
style="display:none;"Un texte 'display:none' précède. Cela ne se remarque pas.
collapse n'est utile que pour des tableaux, pour éliminer des lignes ou colonnes.
c.f. http://www.w3schools.com/cssref/pr_class_visibility.asp
style="visibility:hidden:none;" n'affiche pas l'objet, mais il prend de la place.
style="display:none;" n'affiche pas l'objet et il ne prend pas de place.
Code :


<div style="position:relative; left:400px; top:10px;">...</div>
Position précise, relative à la position par défaut.
style="position:absolute;" ou 'fixed' ou 'static' est aussi possible.
'absolute' place l'image à une position fixe dans la page ou dans la balise parente.
'fixed' place l'image à une position fixe dans la zone visible de la page.
'relative' place l'image relativement à sa position par défaut.
'static' est la position par défaut, 'top', 'left',... ne serve à rien dans ce cas.
On peu aussi définir 'right' et 'bottom'.
Code :


perle_100 perle_101 perle_102 perle_103 perle_104

Code :


Autres styles possibles, à tester :
display   clip   overflow   float   clear

Pour une liste complète de styles, c.f. w3schools.com : CSS Reference

Propriétés des listes

Code :

Code :

Code :

Code :

  1. première ligne, liste numérotée
  2. deuxième ligne,
  3. troisième ligne,
  4. quatrième ligne
Code :

Propriétés des tableaux

ligne 1, col 1 ligne 1, col 2 ligne 1, col 3
ligne 2, col 1 ligne 2, col 2 ligne 2, col 3
Code :

ligne 1, col 1 ligne 1, col 2 colspan fusionne deux cellules
ligne 2, col 1 Le style "border-collapse:collapse" fait la différence
Code :

Référez-vous aussi à :
Apprenez à créer votre site web avec HTML5 et CSS3, partie sur les tableaux, du site Openclassrooms, un cours de Mathieu Nebra.

Propriétés autres

<div style="cursor:crosshair;">
Lorsque la souris se trouve sur cette région,
elle change d'icône.

<span style="cursor:alias;"</span>
<span style="cursor:all-scroll;"</span>
<span style="cursor:auto;"</span>
<span style="cursor:cell;"</span>
<span style="cursor:context-menu;"</span>
<span style="cursor:col-resize;"</span>
<span style="cursor:copy;"</span>
<span style="cursor:crosshair;"</span>
<span style="cursor:default;"</span>
<span style="cursor:grab;"</span>
<span style="cursor:grabbing;"</span>
<span style="cursor:help;"</span>
<span style="cursor:move;"</span>
<span style="cursor:no-drop;"</span>
<span style="cursor:none;"</span>
<span style="cursor:pointer;"</span>
<span style="cursor:progress;"</span>
<span style="cursor:text;"</span>
<span style="cursor:url;"</span>
<span style="cursor:wait;"</span>
<span style="cursor:zoom-in;"</span>
<span style="cursor:zoom-out;"</span>
<span style="cursor:e-resize;"</span>
<span style="cursor:ew-resize;"</span>
<span style="cursor:n-resize;"</span>
<span style="cursor:ne-resize;"</span>
<span style="cursor:nesw-resize;"</span>
<span style="cursor:ns-resize;"</span>
<span style="cursor:nw-resize;"</span>
<span style="cursor:nwse-resize;"</span>
<span style="cursor:s-resize;"</span>
<span style="cursor:se-resize;"</span>
<span style="cursor:sw-resize;"</span>
<span style="cursor:w-resize;"</span>
<span style="cursor:default;"</span>
<span style="cursor:url(images/BouleRouge.png),default;"</span>
<span style="cursor:url(images/arrow_right.gif),default;"</span>
<span style="cursor:url(images/ballon3.gif),default;"</span>
<div>

Pour une liste complète de styles, c.f. : Cursors et w3schools.com : CSS Reference

Pour finir, quelques balises de structure de texte

Ce n'est pas du CSS, mais de l'HTML.
Pour la liste de toutes les balises de l'HTML5 : www.w3schools.com/tags/default.asp

L'exemple qui suit permet de donner simplement la signification d'une abréviation :
WYSIWYG = Ce que vous voyez est ce que vous recevez.
<abbr title="What You See Is What You Get">WYSIWYG</abbr> = Ce que vous voyez est ce que vous recevez.

<blockquote> Citation (longue) : </blockquote>
<cite> Citation du titre d'une oeuvre ou d'un événement : </cite>
<q> Citation (courte): </q>
Ce qui suit est mis en<sup> Exposant : </sup>
Ce qui suit est mis en<sub> Indice : </sub>
<strong> Mise en valeur forte : </strong>
<em> Mise en valeur normale : </em>
<mark> Mise en valeur visuelle : </mark>

<h1> Titre de niveau 1 : </h1>

<h2> Titre de niveau 2 : </h2>

<h3> Titre de niveau 3 : </h3>

<h4> Titre de niveau 4 : </h4>

<h5> Titre de niveau 5 : </h5>
<h6> Titre de niveau 6 : </h6>
<figure> Figure (image, code, etc. : </figure>

D'autres balises importantes, à voir plus en détail :
<a href="url..." /> définition d'un lien
<img /> insertion d'images
<audio> insertion de son
<video> insertion de video
<source> pour la source d'un autio ou d'une video
<pre>
Texte préformatté, qui suit les sauts de lignes et les espaces
et le texte, mais pas les caractères < et >
qui se codent : &lt; et &gt;
Le & se code &amp;
C'est pratique dans de nombreux cas, pour copier un texte.
</pre>



D'autres balises dépréciées, de moindre importance :
Il existait la balise <xmp>, qui est similaire à la balise <textarea>.
Elle n'interprète pas le code HTML, jusqu'à sa fermeture </xmp>
Elle a été enlevée à partir de l'HTML 3.2. Je trouve cela vraiment dommage, car elle serait très utile.
Il existait la balise <listing>, qui est similaire à la balise <pre>, mais elle a été enlevée à partir de l'HTML 3.2
Il existait la balise <plaintext>, à partir de laquelle plus aucune balise n'était interprétée.
Elle a été enlevée à partir de l'HTML 2. Elle n'est pas forcément implémentée dans tous les navigateurs.

Plan du Site : Home   arrow   page070_styles_plus.html


Page mise à jour le 2 janvier 2019 par Bernard Gisin
Hébergement par : www.infomaniak.ch