<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 :
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 :
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 :
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
<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
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.
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 :
Code :
Autres styles possibles, à tester :
display clip overflow float clear
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 : < et >
Le & se code &
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.
page070_styles_plus.html