<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
1) Pour avoir un fond de couleur jaune, il faut ajouter le style :
style="background-color:rgb(255,255,0);" à la balise <body>
Ce qui donne le Code :
<body style="background-color:rgb(255,255,0);">
2) Le fond de ce paragraphe
est de couleur cyan.
Cyan est le nom plus précis pour définir la couleur bleu ciel, qui vaut : rgb(0,255,255);
<p style="background-color:rgb(0,255,255);"> 2) Le fond de ce paragraphe<br> est de couleur cyan.<br> Cyan est le nom plus précis pour définir la couleur bleu ciel, qui vaut : rgb(0,255,255);<br> </p>
2b) Le fond de ce paragraphe
est de couleur cyan.
Le style "display:inline-block;" est essentiel ici.
<p style="background-color:rgb(0,255,255); display:inline-block;"> 2b) Le fond de ce paragraphe<br> est de couleur cyan.<br> Le style "display:inline-block;" est essentiel ici.<br> </p>
3) J'écris une ligne, avec un
mot plus petit que le reste de la phrase.
Code :
J'écris une ligne, avec un
<span style="font-size:80%"> mot plus petit </span>
que le reste de la phrase.
4) Ceci est un paragraphe centré.
La balise <center>
a été utilisée.
Elle est très pratique, mais est considérée comme obsolet de nos jours.
<center> <p> 4) Ceci est un paragraphe centré. </p> </center>
5) Ceci est un paragraphe centré.
Le style text-align:center
a été utilisé.
Il remplace la balise <center>.
<p style="text-align:center"> 5) Ceci est un paragraphe centré. <p>
<div style="text-align:center;"> <div style="display:inline-block; text-align:center; font-size:16pt; background-color:rgb(255,180,180); color:rgb(0,128,0);"> 6) Pour avoir un paragraphe centré<br> de taille 16 points<br> de couleur de fond rose<br> de couleur de texte vert foncé.<br> Le style "display:inline-block" est essentiel ! </div> </div>
Une image alignée verticalement avec un texte. |
<b>7) Comment aligner verticalement une image avec un texte ?</b><br> Ici, la balise <span class="spw"><table></span> est utilisée.<br> <table> <tr> <td style="vertical-align:middle;"> Une image alignée<br> verticalement<br> avec un texte. </td> <td> <img style="width: 192px; height: 144px; vertical-align:middle;" alt="Accident_de_F1" src="images/accident_de_F1.jpg"> </td> </tr> </table>
8) Une image alignée verticalement avec un texte.
Utilisant la propriété :
display:inline-block
et la propriété :
vertical-align:middle
<p> <span style='display:inline-block; vertical-align:middle;'> 8) Une image alignée verticalement avec un texte.<br> Utilisant la propriété : ... </span> <img style="width: 192px; height: 144px; vertical-align:middle;" alt="Accident_de_F1" src="images/accident_de_F1.jpg"> </p>
9) Un texte, suivit d'une image ayant un texte écrit sur l'image.
Code :<p> 9) Un texte, suivit d'une image ayant <span style='display:inline-block; vertical-align:middle; background:url(images/bouton-noir.png) no-repeat; color:white; width:150px; height:50px; padding:5px 5px 5px 5px;'> un texte écrit sur l'image. </span> </p>
ligne 1 ; colonne 1 | ligne 1 ; colonne 2 | ligne 1 ; colonne 3 |
ligne 2 ; colonne 1 | ligne 2 ; colonne 2 | ligne 2 ; colonne 3 |
ligne 3 ; colonne 1 | ligne 3 ; colonne 2 | ligne 3 ; colonne 3 |
ligne 4 ; colonne 1 | ligne 4 ; colonne 2 | ligne 4 ; colonne 3 |
<b>10) Utilisation d'une table de plusieurs lignes et plusieurs colonnes.</b><br> Ici, la balise <table> est utilisée.<br> <table> <tr> <td style='font-size:0.8em;'>ligne 1 ; colonne 1</td> <td style='font-size:1.2em; padding-right:15px;'>ligne 1 ; colonne 2</td> <td style='font-weight:800;'>ligne 1 ; colonne 3</td> </tr> <tr> <td style='padding-right:15px;'>ligne 2 ; colonne 1</td> <td>ligne 2 ; colonne 2</td> <td>ligne 2 ; colonne 3</td> </tr> <tr> <td>ligne 3 ; colonne 1</td> <td>ligne 3 ; colonne 2</td> <td>ligne 3 ; colonne 3</td> </tr> <tr> <td>ligne 4 ; colonne 1</td> <td>ligne 4 ; colonne 2</td> <td>ligne 4 ; colonne 3</td> </tr> </table>
Texte sous l'image 1 | Texte sous l'image 2, qui est assez long, donc il s'écrit sur plusieurs lignes. | Texte sous l'image 3, avec un saut le ligne. |
11) Alignement de trois images avec du texte en-dessous, utilisant la balise <span class="spw">table</span><br> <table> <tr> <td style='width:33%;'><img style="width:60px; height:60px;" src="images/perle_100.png"></td> <td style='width:33%;'><img style="width:60px; height:60px;" src="images/perle_101.png"></td> <td style='width:33%;'><img style="width:60px; height:60px;" src="images/perle_102.png"></td> </tr> <tr> <td style='vertical-align:top;'>Texte sous l'image 1</td> <td style='vertical-align:top; padding-right:15px;'> Texte sous l'image 2, qui est assez long, donc il s'écrit sur plusieurs lignes.</td> <td style='vertical-align:top;'>Texte sous l'image 3,<br> avec un saut le ligne.</td> </tr> </table>
a11 | a12 | a12 |
a21 | a22 | a22 |
a31 | a32 | a32 |
12) Un tableau <b>centré</b>, avec une bordure<br> <div style="text-align:center;"> <table style='border-collapse:collapse; margin:auto;'> <tr style="vertical-align:middle; text-align:center;"> <td style="border:3px double #000000; padding:20px 15px 10px 5px;">a11</td> <td style="border:3px double #000000; padding:20px 15px 10px 5px;">a12</td> <td style="border:3px double #000000; padding:20px 15px 10px 5px;">a12</td> </tr> <tr style="vertical-align:middle; text-align:center;"> <td style="border:3px double #000000; padding:5px 10px 15px 20px;">a21</td> <td style="border:3px double #000000; padding:5px 10px 15px 20px;">a22</td> <td style="border:3px double #000000; padding:5px 10px 15px 20px;">a22</td> </tr> <tr style="vertical-align:middle; text-align:center;"> <td style="border:3px double #000000; padding:5px 10px 15px 20px;"> a31</td> <td style="border:3px double #000000; padding:5px 10px 15px 20px;"> a32</td> <td style="border:3px double #000000; padding:5px 10px 15px 20px;"> a32</td> </tr> </table> </div>
Une suite se trouve en :
page08b_Exemples_CSS.html
Le passage de la souris sur des éléments fera apparaître d'autres élèments ou les modifiera.
La balise <style> est essentielle dans ce cas.
Plan du Site : Home page08a_Exemples_CSS.html
Page mise à jour le 1 octobre 2015 par Bernard Gisin
Hébergement par : www.infomaniak.ch