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

Propriétés de mise en forme du texte

style="font-family:times, serif;"
style="font-family:arial, sans-serif;"
style="font-family:cursive;"
style="font-family:fantasy;"
style="font-family:monospace;"
mmmmmmmmmmmmmmmmmmmmmmmmmmmmm
iiiiiiiiiiiiiiiiiiiiiiiiiiiii
style="font-family:courier, monospace;" mmmmmmmmiiiiiiii

style="font-size:16pt;"
style="font-size:12pt;"
style="font-size:8pt;"
style="font-size:150%;"
style="font-size:70%;"

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

style="font-style:italic;" texte en italique
style="font-style:oblique;"
style="font-style:normal;" normal, italic, oblique

style="text-decoration:overline;"
style="text-decoration:underline;" texte souligné
style="text-decoration:line-through;"
style="text-decoration:none;" none, underline, overline, line-through

style="font-style:italic; font-weight:bold; text-decoration:underline;"

style="font-variant:small-caps;"
style="font-variant:normal;"

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

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

style="text-align:left;"
style="text-align:center;"
style="text-align:right;"
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.

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

Pour aligner une image sur un texte : perle_000   style="vertical-align:middle;"
top, middle, bottom, baseline, sub, super, net-top, text-bottom sont d'autres options.

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

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

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

style="color:#ff40c0;" pour définir la couleur, ff=max. de rouge, 40=un peu de vert, c0=pas mal de bleu.
style="color:rgb(90,90,0);", couleur, Vert Rouge Bleu.
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

style="background-color:cyan;"

style="background-image:url(images/L_intrus.png);"   Cherchez l'intrus.
On peut
écrire
sur l'image.
Parfois,
cela a un sens.

Texte en blanc sur fond vert. C'est moche, mais c'est permis.

Texte en jaune sur fond bleu. C'est mieux. On a utilisé la balise <span>.

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%.

style="width:650px; height:70px; border-style:solid;
margin-top:5px; margin-right:8px; margin-bottom:5px; margin-left:8px;"
style="width:650px; height:70px; border-style:dotted;
padding:5px 8px 5px 8px; margin-bottom:8px;"
style="width:650px; height:70px; border-style:solid;
padding-top:5px; padding-right:8px; padding-bottom:5px; padding-left:8px;
margin-bottom:8px;"
style="width:300px; height:70px; border-style:double;"
style="width:660px; height:90px; border-style:double; margin-top:10px;
border-color:blue; border-radius:10px;"
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

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.

style="position:relative; left:400px; top:10px;
Potition 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'.
perle_100 perle_101 perle_102 perle_103 perle_104
style='position:relative; top:10px; left:5px;'   est le style de la 'div' contenant les images.
style=" width:20px; height:20px; top:1px; left:25px; z-index:10;"
style=" width:20px; height:20px; position:relative; top:1px; left:-15px; z-index:20;"
style=" width:20px; height:20px; position:relative; top:1px; left:-30px; z-index:30;"
style=" width:20px; height:20px; position:absolute; top:2px; left:30px; z-index:21;"
style=" width:20px; height:20px; position:absolute; top:2px; left:40px; z-index:11;"
'z-index'   indique l'ordre d'affichage d'images. Utile lorsqu'elles se superposent.

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

  1. première ligne, <ol>
  2. deuxième ligne, <li>...</li> .... <li>...</li>
  3. troisième ligne, </ol>
  4. quatrième ligne

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

ligne 1, col 1 ligne 1, col 2 ligne 1, col 3
ligne 2, col 1 ligne 2, col 2 ligne 2, col 3

D'autres exemples viennent dans page05.html, feuilles de style CSS.

Propriétés autre

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

style="cursor:auto;"
style="cursor:crosshair;"
style="cursor:default;"
style="cursor:pointer;"
style="cursor:auto;"
style="cursor:e-resize;"
style="cursor:ne-resize;"
style="cursor:nw-resize;"
style="cursor:n-resize;"
style="cursor:se-resize;"
style="cursor:sw-resize;"
style="cursor:s-resize;"
style="cursor:w-resize;"
style="cursor:text;"
style="cursor:wait;"
style="cursor:help;"
style="cursor:progress;"

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

Pour finir, quelques balises de structure de texte

Abréviation : <abbr>
Citation (longue) : <blockquote>

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

Titre de niveau 1 : <h1>

Titre de niveau 2 : <h2>

Titre de niveau 3 : <h3>

Titre de niveau 4 : <h4>

Titre de niveau 5 : <h5>
Titre de niveau 6 : <h6>
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
Texte préformatté, qui suit les sauts de lignes et les espaces
et le texte, mais pas les caractères < et >
C'est pratique dans de nombreux cas, pour copier un texte.

Plan du Site : Home     page04.html


Page mise à jour le 20 novembre 2013 par Bernard Gisin
Hébergement par : www.infomaniak.ch

<plaintext> est une balise, qui ne se ferme pas, tout le texte qui suit est en mode texte. Texte préformatté, qui suit les sauts de lignes et les espaces et le texte, y compris les caractères < et >. Donc les codes &lt; et &gt; sont inutiles. Il est déconseillé d'utiliser cette balise, qui ne permet pas de revenir à de l'HTML.