Suie 1, plusieurs exemples de styles CSS, leur effet et leur code

<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);
Code :
 <div 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>
 </div>


2b) Le fond de ce paragraphe
est de couleur cyan.
Le style "display:inline-block;" est essentiel ici.

Code :
 <div 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>
 </div><br>


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 texte centré.
La balise <center> a été utilisée.
Elle est très pratique, mais est considérée comme obsolet de nos jours.
Code :
 <center>
 <div>
 4) Ceci est un texte centré.
 </div>
 </center>


5) Ceci est un texte centré.
Le style text-align:center a été utilisé.
Il remplace la balise <center>.
Code :
 <div style="text-align:center">
 5) Ceci est un texte centré.
 <div>


6) Pour avoir un texte centré
de taille 16 points
de couleur de fond rose
de couleur de texte vert foncé
encadré de noir.
Le style "display:inline-block" est essentiel !
padding: haut droite bas gauche = espaces aux bords.
Code :
 <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);
             padding:5px 15px 5px 10px;
             border:2px solid rgb(0,0,0);">
 6) Pour avoir un texte centré<br>
 de taille 16 points<br>
 de couleur de fond rose<br>
 de couleur de texte vert foncé<br>
 encadré de noir.<br>
 Le style "display:inline-block" est essentiel !<br>
 padding: haut droite bas gauche = espaces aux bords.<br>
 </div>
 </div>

7) Comment aligner verticalement une image avec un texte ?
7) Une image alignée verticalement avec un texte.
Utilisant la propriété : display:inline-block
et la propriété : vertical-align:middle Accident_de_F1
Code :
<span style='display:inline-block; vertical-align:middle;'>
7) Une image alignée verticalement avec un texte.<br>
Utilisant la propriété :
<a href='http://www.w3schools.com/cssref/pr_class_display.asp' target='_blank'>
  display:inline-block</a><br>
 et la propriété :
 <a href='http://www.w3schools.com/cssref/pr_pos_vertical-align.asp' target='_blank'>
  vertical-align:middle</a>
</span>
<img style="width: 192px; height: 144px; vertical-align:middle;" 
            alt="Accident_de_F1" src="images/accident_de_F1.jpg">


8) Une image alignée verticalement avec un texte.
Ici, la balise <table> est utilisée.
Une image alignée
verticalement
avec un texte. 		Accident_de_F1  
Code ;
8) Une image alignée verticalement avec un texte.<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>


9) Un texte, suivit d'une image ayant un texte écrit sur l'image.
Code :
 <div>
 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>
 </div>


9b) Un texte, suivit d'une image ayant un texte écrit sur l'image.
Code :
 <div>
 9b) Un texte, suivit d'une image ayant
 <span  style='display:inline-block;
               vertical-align:middle; 
               background-image:url(images/bouton-noir.png); 
               background-repeat:no-repeat;
               background-position:center;
               border:3px dashed rgb(0,0,128);
               color:white;
               width:150px;
               height:150px;
               line-height:150px;
               padding:5px 5px 5px 5px;'>
 <span style=' display:inline-block; 
               vertical-align:middle;
               line-height:normal;
               padding-left:6px;'>
 un texte écrit sur l'image.
 </span>
 </div>

Une référence sur le centrage.

9c) L'image de fond est agrandie et un texte est
écrit sur l'image.
Code :
 <div>
 9c) L'image de fond est agrandie
 <span  style='display:inline-block;
               vertical-align:middle; 
               background:url(images/bouton-noir.png) center no-repeat; 
               background-size: 300px 100px;
               border:3px dotted rgb(0,0,128);
               color:rgb(255, 200, 200);
               width:300px;
               height:100px;
               line-height:100px;
               text-align:center;
               padding:5px 5px 5px 5px;'>
 <span style=' display:inline-block; 
               vertical-align:middle;
               line-height:normal;'>
  <b>et un texte est<br>
  écrit sur l'image.</b>
  </span>
 </span>
 </div>

Une référence sur le background.

10) Utilisation d'une table de plusieurs lignes et plusieurs colonnes.
Ici, la balise <table> est utilisée.
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
Code :
<b>10) Utilisation d'une table de plusieurs lignes et plusieurs colonnes.</b><br>
Ici, la balise &lt;table&gt; 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>

11) Alignement de trois images avec du texte en-dessous, utilisant la balise <table>
perle perle perle
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.
Code :
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>
<!-- les données sont entrées ligne par ligne -->

11b) Alignement de trois images avec du texte en-dessous, en utilisant des balises <div>
perle
Texte sous l'image 1
perle
Texte sous l'image 2, qui est assez long, donc il s'écrit sur plusieurs lignes.
perle
Texte sous l'image 3,
avec un saut le ligne.
Code :
11b) Alignement de trois images avec du texte en-dessous, en utilisant des balises <b>&lt;div&gt;</b><br>

<div style="display:inline-block; width:33%; vertical-align:top;">
<img style="width:60px; height:60px;" alt="perle" src="images/perle_100.png"><br>
Texte sous l'image 1
</div>

<div style="display:inline-block; width:33%; vertical-align:top;">
<img style="width:60px; height:60px;" alt="perle" src="images/perle_101.png"><br>
Texte sous l'image 2, qui est assez long, donc il s'écrit sur plusieurs lignes.
</div>

<div style="display:inline-block; width:33%; vertical-align:top;">
<img style="width:60px; height:60px;" alt="perle" src="images/perle_102.png"><br>
Texte sous l'image 3,<br> avec un saut le ligne.
</div>
<!-- les données sont entrées colonnes par colonnes -->

12) Un tableau centré, avec une bordure
a11 a12 a12
a21 a22 a22
a31 a32 a32
Code :
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 : Page 090, pour des exemples de styles défini dans l'en-tête
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   arrow   page080_styles_plus_suite_1.html

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