verticalement
avec un texte.
<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