Page Web 10, un corrigé de la série 01 sur le CSS

1) Pour avoir un fond de couleur jaune pâle, il faut ajouter le style :
style="background-color:rgb(255,255,128)" à la balise <body>
Ce qui donne :
<body style="background-color:rgb(255,255,128)">
Pour satisfaire le point 8), la balise est en réalité :
<body id='theBody' style="background-color:rgb(255,255,128)">

2) Pour avoir un paragraphe centré
de taille 16 points
<p style="text-align:center;
font-size:16pt;">

3) Pour avoir un paragraphe de couleur de fond bleu foncé,
de texte écrit en jaune, de taille 10 points,
il faut définir le style de paragraphe :
<p style=" background-color:rgb(0,0,128);
color:rgb(255,255,0);
font-size:10pt; ">

4) Pour aligner une image avec un texte.
Ici, l'utilisation de la balise <table> est utilisé, avec
Le code complet est écrit ci-dessous.


<table>
 <tr>
  <td style="vertical-align:middle;">
   4) Pour aligner une image avec un texte.<br>
      Ici, l'utilisation de la balise <table> est utilisé, avec   <br>
      Le code complet est écrit ci-dessous.<br>
  </td>
  <td>
  <img style="vertical-align:middle; width:192px; height:144px;"
       alt="Accident_de_F1" src="images/accident_de_F1.jpg"> 
  </td>
 </tr>
</table>

5) Un texte, suivit d'une image ayant un texte écrit sur l'image.

Code complet : 
<p>
5) 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>

6) Utilisation d'une table pour centre trois images

Code complet : 
<table style="width:100%">
 <tr>
  <td style="text-align:left;">
  <img style="width:60px; height:60px;" src="images/perle_100.png">
  </td>
  <td style="text-align:center;">
  <img style="width:60px; height:60px;" src="images/perle_101.png">
  </td>
  <td style="text-align:right;">
  <img style="width:60px; height:60px;" src="images/perle_102.png">
  </td>
 </tr> 
</table>

7) Modification d'une image lorsque l'on passe dessus avec la souris :

Code complet
7) Modification d'une image lorsque l'on passe dessus avec la souris :
<img class="image_change" style="vertical-align:middle;"
width='20' height='20' alt='perle_000' src="images/perle_000.png">

Défini dans entre les balise <style> et </style> :
.image_change {
width:30px;
height:30px;
background:url("images/perle_100.png") no-repeat;
}
.image_change:hover {
background:url("images/perle_101.png") no-repeat;
}

8) Pour les plus avancés, on change la couleur du fond de la page :
Fond blanc .
Fond cyan .
Fond magenta .
Fond jaune clair .
Fond rouge .
Fond vert .
Fond bleu .

Plan du Site : Home page10_serie01_corrige.html

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