Quelques exemples de styles.

Visualisez le code source pour voir les balises et les styles utilisés.


Le but est de tester l'effet de code CSS pour des formatages :
Ce texte est en gras, celui-ci en italique, celui-ci est souligné
et ce dernier est en gras italique.

Un autre texte en gras, sans définir de style.

Cette fois-ci, c'est la taille de la police qui change.

Ici, c'est le titre (titre 1) codé avec la balise h1

Ici, c'est le titre (titre 2) codé avec la balise h2

Ici, c'est le titre (titre 3) codé avec la balise h3

Normalement, il faudrait définir dans le style le format d'affichage du texte entre <h1> et  </h1>,
ainsi qu'entre <h2> et </h2> etc.

Ici j'écris <br>, qui est codé spécialement, ainsi que <p> !

Autre essai de définition de style avec " text-align:center " dans un div.

font-style:italic; font-weight:bold
"color:#ff40c0" pour définir la couleur, ff=max. de rouge, 40=un peu de vert, c0=pas mal de bleu.

Cette section est centrée et cardée, en utilisant :
<center>
<div style="width:660px; border-style:solid; text-align:left;
    margin-top:5px; margin-right:8px; margin-bottom:5px; margin-left:8px;
    padding:5px 8px 5px 8px;">
...
</div>
</center>
La hauteur pourrait être fixée en ajoutant dans les style : height:120xp;, mais c'est limitatif.
La balise <center> est considérée comme obsolète. Voir la suite...
L'encadré plus bas reproduit ce texte sans la balise <center>.

bouton-noir
Ici est écrit : <div align="center"> <img; src=...> ... </div>
C'est toujours considéré comme obsolète.

bouton-noir
Ici est écrit : <div style='text-align:center'> <img; src=...> ... </div>
Cette fois-ci, c'est considéré comme la manière correcte.
l'attribut "text-align" ne concerne pas que le texte.

Cette section est centrée et cardée, en utilisant :
<div style="width:660px; border-style:solid;
    left:50%; margin-left:-346px; position:relative;
    margin-top:5px; margin-right:8px; margin-bottom:5px;
    padding:5px 8px 5px 8px;">
...
</div>
C'est une manière correcte de faire.
346 = 660 / 2 + 8 * 2, 8 = margine-right.

Plan du Site : Home   arrow   page060_styles.html

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