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
Pour une liste complète des balises HTML, c.f. w3schools.com : HTML Tags Ordered Alphabetically

Quelques balises de structure de texte

<abbr title="What You See Is What You Get">WYSIWYG</abbr> = Ce que vous voyez est ce que vous recevez.

Ceci est une citation qui peut être longue.

Titre de niveau 1 :

Titre de niveau 2 :

Titre de niveau 3 :

Titre de niveau 4 :

Titre de niveau 5 :

Titre de niveau 6 :

<blockquote>Ceci est une citation qui peut être longue.</blockquote>
<cite> Citation du titre d'une oeuvre ou d'un événement.</cite>
<q>  Citation (courte).</q>
Ce qui suit est mis en <sup> Exposant : </sup>
Ce qui suit est mis en <sub> Indice : </sub>
<strong> Mise en valeur forte : </strong>
<em> Mise en valeur normale : </em>
<mark> Mise en valeur visuelle : </mark>
<h1> Titre de niveau 1 : </h1>
<h2> Titre de niveau 2 : </h2>
<h3> Titre de niveau 3 : </h3>
<h4> Titre de niveau 4 : </h4>
<h5> Titre de niveau 5 : </h5>
<h6> Titre de niveau 6 : </h6>

<pre>
Texte préformatté, qui suit les sauts de lignes et les espaces
et le texte, mais pas les caractères < et >
qui se codent : &lt; et &gt;
Le & se code &amp;
C'est pratique dans de nombreux cas, pour copier un texte.
</pre>

Propriétés de mise en forme du texte

Pour aligner une image à la suite d'un texte :
<img style="vertical-align:middle;" alt='perle_000' src="images/perle_100.png" height="40">

Pour aligner une image au sommet du texte :
<img style="vertical-align:top;" alt='perle_000' src="images/perle_100.png" height="40">

Pour aligner une image au bas du texte :
<img style="vertical-align:bottom;" alt='perle_000' src="images/perle_100.png" height="40">

On peut remplacer "bottom" par :
top, middle, bottom, baseline, sub, super, net-top, text-bottom

Propriétés de couleur et de fond

<p style='color:white; background-color:green'>
Texte en blanc sur fond vert. C'est moche, mais c'est permis.
</p>

<p style='color:yellow; background-color:blue'>
Texte en jaune sur fond bleu. C'est mieux.
</p>.

Propriétés des boîtes

<hr style="margin-left:0; width:95%;"> 
<!-- Défini une ligne de largeur 95%. -->

<hr style="margin-left:0; width:85%; border:3px solid blue; display:inline-block; vertical-align:middle;">
<!-- Défini une ligne de largeur 85%. -->

Propriétés de positionnement et d'affichage

<span style="visibility:hidden;">style="visibility:hidden;"</span> Un texte invisible précède.
<span style="visibility:collapse;">style="visibility:collapse;"</span> Un texte 'collapse' précède.
<span style="display:none;">style="display:none;"</span> Un texte 'display:none' précède. Cela ne se remarque pas.

<div style="position:fixed; left:30px; top:40px; background-color:#fff0ff; border:3px solid red;">
    <b>fixed</b> place le bloc à la position fixe de la fenêtre. (0; 0) = haut; gauche.<br>
    Le bloc reste à la même place dans la fenêtre dans tous les cas.      

<div style="position:fixed; right:2px; bottom:2px; background-color:#f0f0ff; border:3px solid blue;">
    <b>fixed</b> place le bloc à la position fixe de la fenêtre. (0; 0) = haut; gauche.<br>
    Le bloc reste à la même place dans la fenêtre dans tous les cas.      

<div style="position:relative; width:750px; border-style:solid;">
  <div style="position:relative; left:150px; top:-4px;">
    <b>relative</b> est un décalage de la position relativement à<br>
    la position que le bloc devrait normalement avoir.
  </div>
  <div style="position:absolute; left:40px; top:40px; border:3px solid red;">
    <b>absolute</b> place le bloc à une position relative à la position (0; 0) de la balise parente.<br>
    L'espace pris par ce bloc n'est pas pris en compte pour la suite.<br>
    Il est important que la balise parente aie une "position" (relative ici).
  </div>
  Aa.<br>
  Bb.<br>
  Cc.<br>
  Dd.<br>
  <b>fixed</b> place le bloc à la position fixe de la fenêtre. (0; 0) = haut; gauche.<br>
  <b>static</b> est la position par défaut, 'left', 'top', 'right', 'bottom' ne serve à rien dans ce cas.<br>
  <b>sticky</b> est un mélange entre "relative" et "fixed".
</div>

??)
<div style="display:inline-block; vertical-align:middle; border:3px solid blue;">
  <div style="display:inline-block; 
              margin:10pt 20pt 3pt 40pt; 
              border-width:10pt 8pt 3pt 40pt; 
              border-color:red green blue black; 
              border-style:dotted dashed double solid;              
              padding:10pt 25pt 5pt 50pt;">
    Un texte dans un div, avec un style <b>margin</b>
    et un style <b>padding</b><br>
    <b>margin</b> : haut droite bas gauche<br>
    <b>padding</b> : haut droite bas gauche
  </div>
</div><br>

<div style='position:relative; top:-15px; left:5px;'>
  <img style="width:20px; height:20px; position:absolute; top:0px; left:0px; z-index:10;"
       alt="perle_100" src="images/perle_100.png">
  <img style="width:20px; height:20px; position:absolute; top:0px; left:15px; z-index:20;"
       alt="perle_101" src="images/perle_101.png">
  <img style="width:20px; height:20px; position:absolute; top:0px; left:30px; z-index:30;"
       alt="perle_102" src="images/perle_102.png">
  <img style="width:20px; height:20px; position:absolute; top:0px; left:45px; z-index:20;"
       alt="perle_103" src="images/perle_103.png">
  <img style="width:20px; height:20px; position:absolute; top:0px; left:60px; z-index:10;"
       alt="perle_104" src="images/perle_104.png">
</div>

Propriétés des listes

• première ligne,
• deuxième ligne,
• troisième ligne,
• quatrième ligne, circle, disc, square, decimal, ... sont d'autres options.

• première ligne,
• deuxième ligne,
• troisième ligne,
• quatrième ligne

• première ligne, alignée à gauche avec padding-left:2ch;
• deuxième ligne,
• troisième ligne,
• quatrième ligne

• première ligne, alignée à gauche avec left:-26px;
• deuxième ligne,
• troisième ligne,
• quatrième ligne

1. première ligne, liste numérotée
2. deuxième ligne,
3. troisième ligne,
4. quatrième ligne

1. première ligne, liste numérotée par des lettres
2. deuxième ligne,
3. troisième ligne,
4. quatrième ligne

• la balise ul
• la balise ol
• la balise li
• la balise menu, que pour Firefox

Propriétés des tableaux

• la balise table
• la balise tr, "r" comme "row" = ligne
• la balise td, "d" comme "data"
• la balise th, peu utilisée

Propriétés autres

 <body style="background-color:rgb(255,255,192);">
 

 <div style="background-color:rgb(0,255,255);">
 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>

 <div style="background-color:rgb(0,255,255); display:inline-block;">
 Le fond de ce paragraphe<br>
 est de couleur cyan.<br>
 Le style "display:inline-block;" est essentiel ici.<br>
 </div><br>

 J'écris une ligne, avec un
 <span style="font-size:80%"> mot plus petit </span>
 que le reste de la phrase.
 

 <center>
 Ceci est un texte centré.
 </center>

 <div style="text-align:center;">
 Ceci est un texte centré.
 <div>

 <div style="text-align:center;">
 <span style="position:absolute; left:6pt;">(*)</span>
 Ceci est un texte centré.
 <div>

 <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);">
 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>

<span style='display:inline-block; vertical-align:middle;'>
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">

Une image alignée verticalement avec un texte.

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>

 <div>
 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>

 <div>
 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>

 <div>
 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>

Utilisation d'une table de plusieurs lignes et plusieurs colonnes.<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>

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>

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.

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 -->

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.

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:32%; 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:32%; 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:32%; 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 -->

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.

Texte sous l'image 4.

Alignement de quatre images avec du texte en-dessous, en utilisant des balises <b>&lt;div&gt;</b><br>

<div style="display:inline-block; width:24%; vertical-align:top; text-align:center;">
<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:24%; vertical-align:top; text-align:center;">
<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:24%; vertical-align:top; text-align:center;">
<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>

<div style="display:inline-block; width:24%; vertical-align:top; text-align:center;">
<img style="width:60px; height:60px;" alt="perle" src="images/perle_103.png"><br>
Texte sous l'image 4.
</div><br>
<!-- les données sont entrées colonnes par colonnes -->

Centre à 10% de la largeur.

Centre au milieu.

Centre à 80% de la largeur.

Alignement irrégulier d'images avec du texte en-dessous, en utilisant des balises <b>&lt;div&gt;</b><br>

<div style="display:inline-block; width:20%; vertical-align:top; text-align:center;">
<img style="width:60px; height:60px;" alt="perle" src="images/perle_100.png"><br>
Centre à 10% de la largeur.
</div>

<div style="display:inline-block; width:20%; vertical-align:top; text-align:center;"><!-- juste pour l'alignement -->
</div>

<div style="display:inline-block; width:18%; vertical-align:top; text-align:center;">
<img style="width:60px; height:60px;" alt="perle" src="images/perle_101.png"><br>
Centre au milieu.
</div>

<div style="display:inline-block; width:40%; vertical-align:top; text-align:center;">
<img style="width:60px; height:60px;" alt="perle" src="images/perle_102.png"><br>
Centre à 80% de la largeur.
</div><br>
<!-- les données sont entrées colonnes par colonnes -->

Centre à
10% de la largeur.

Centre au milieu

Centre à
80% de la largeur

Alignement irrégulier d'images avec du texte en-dessous, autre manière, avec triple <b>&lt;div&gt;</b><br>

<div style='text-align:center; position:relative; background-color:#f0f0d0;'>

  <div style="display:inline-block; position:relative; left:-40%; vertical-align:top; border:1px red solid;">
    <img style="width:60px; height:60px;" alt="perle" src="images/perle_100.png"><br>
    Centre à<br>
    10% de la largeur.
  </div>

  <div style="position:absolute; left:0px; top:0px; width:100%;">
    <div style="display:inline-block; position:relative; left:0%; vertical-align:top; border:1px red solid;">
      <img style="width:60px; height:60px;" alt="perle" src="images/perle_101.png"><br>
      Centre au milieu.
    </div>
  </div>

  <div style="position:absolute; left:0px; top:0px; width:100%;">
    <div style="display:inline-block;  position:relative; left:30%; vertical-align:top; border:1px red solid;">
      <img style="width:60px; height:60px;" alt="perle" src="images/perle_102.png"><br>
    Centre à<br>
    80% de la largeur.
    </div>
  </div>

</div>

Div dans Div dans Div, avec bordures <br>
Montre comment calculer présicément des dimentions avec la fonction <b>calc</b> de CSS.<br>
c.f. :
<a href='https://www.w3schools.com/cssref/css_functions.asp' target="_blank">
  www.w3schools.com/cssref/css_functions.asp</a>   et  
<a href='https://www.w3schools.com/cssref/func_calc.asp' target="_blank">
   https://www.w3schools.com/cssref/func_calc.asp</a><br>
<br>
<div style="position:relative; left:20px; width:calc(99% - 20px); height:400px; border:2px solid rgb(0,0,0);">
  <div style="position:absolute; left:25px; right:35px; top:25px; bottom:40px; border:2px solid rgb(255,0,0);">
    La "position:absolute;" dans la deuxième balise &lt;div&gt; est importante.<br>
    Elle indique une position relativement à la première balise.<br>
    <div style="position:absolute; left:10%; width:70%; top:60px; bottom:40px; border:2px solid rgb(0, 255,0);">
      La "position:absolute;" dans la troisième balise &lt;div&gt; est importante.<br>
      Elle indique une position relativement à la deuxième balise.<br>
      <br>
      Dans la première balise &lt;div&gt; la fonction <b>calc</b> est utilisée pour définir
      précisément la taille de la région utilisée par cette balise.<br>
    </div>
  </div>
La "position:relative;" dans la première balise &lt;div&gt; est importante.<br>
</div>

Comment placer un texte qui s'adapte à l'espace à droite d'une image ?<br>
<img style="width: 192px; height: 144px; vertical-align:middle;" 
            alt="Accident_de_F1" src="images/accident_de_F1.jpg">
<div style='display:inline-block; width:calc(100% - 192px - 10px); vertical-align:top;'>
Pour faire ce placement de texte à droite de l'image, il est utile d'utiliser la fonction
<a href='https://www.w3schools.com/cssref/func_calc.asp' target="_blank">calc</a>
qui Blablabla...
</div>

Effets CSS, qui changent au passage de la souris

<span class='cpt'></span> Pour avoir un <b>compteur</b> qui s'incrémente automatiquement<br>
À ajouter dans le <header> :
<style>
body { counter-reset:section; }
cpt { counter-increment:section;  content:counter(section) ")"; }
</style>

<span class='cpt' style='font-weight:bold;'>
Au lieu d'utiliser la balise &lt;b&gt; pour mettre en gras, on peut utiliser un style.
</span><br>

<style>
b { font-weight:bold; }
</style>

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

À ajouter dans le <header> :
<style>
.image1_change { 
  width:30px;
  height:30px;
  background:url("images/perle_100.png") no-repeat;
  }
.image1_change:hover {
  background:url("images/perle_101.png") no-repeat;
  /*visibility:hidden;*/
  }
</style>

<span class='cpt'></span> Modification d'une image lorsque l'on passe dessus avec la souris :
<span class="image1_change" 
      style="display:inline-block; vertical-align:middle; width:40px; height:40px; background-position:center;">
</span><br>
À ajouter dans le <header> le même <style> que celui donné précédemment.

<span class='cpt'></span> Modification d'une image lorsque l'on passe dessus avec la souris :
<div class="image1_change" 
      style="display:inline-block; vertical-align:middle; width:40px; height:40px; background-position:center;">
</div><br>
À ajouter dans le <header> le même <style> que celui donné précédemment.

<span class='cpt'></span> En passant sur une image, une autre image change<br>
<div class="image2_change"></div>
Une ligne entre deux. Mais sans &lt;br&gt;
<div class="image2b_change"> </div>

À ajouter dans le <header> :
<style>
.image2_change { 
  width:30px;
  height:30px;
  background:url("images/perle_102.png") no-repeat;
  }

.image2b_change { 
  width:30px;
  height:30px;
  background:url("images/perle_100.png") no-repeat;
  }

.image2_change:hover + .image2b_change{
  background:url("images/perle_104.png") no-repeat;
  }

/* Il est toujours possible d'ajouter ce "hover". */
/*
.image2b_change:hover {
  background:url("images/perle_102.png") no-repeat;
  }
*/
</style>

<span class='cpt'></span> Apparition d'un texte lorsque l'on passe dessus avec la souris :
 <div class="image3_change">
 Texte
 </div>

À ajouter dans le <header> :
<style>
.image3_change { 
  background:url("images/perle_100.png");
  width:60px;
  height:30px;
  vertical-align:middle;
  /* border-style:solid; */
  font-size:0pt;
  }
.image3_change:hover {
  font-size:16pt;
  font-weight:bold;
  /* text-decoration:underline;  */
  /* color:#ffffff; */
  }
</style>

<span class='cpt'></span> Apparition d'un texte lorsque l'on passe dessus avec la souris :
 <span class="image4_change">
 Texte
 </span>

À ajouter dans le <header> :
<style>
.image4_change { 
  background-color:#cccc00;
  vertical-align:middle;
  /* border-style:solid; */
  font-size:18pt;
  color:#cccc00;
  }
.image4_change:hover {
  font-weight:bold;
  color:#000000;
  }
</style>

<span class='cpt'></span> Apparition d'un texte lorsque l'on passe dessus avec la souris :
 <span class="image5_change">
 Texte
 </span>
 <br>

À ajouter dans le <header> :
<style>
.image5_change { 
  display:inline-block; /* assure que la taille reste fixe */
  /* c.f. http://www.w3schools.com/cssref/pr_class_display.asp */              
  background:url("images/perle_100.png");
  width:60px;
  height:30px;
  vertical-align:middle;
  /* border-style:solid; */
  font-size:0pt;
  }
.image5_change:hover {
  font-size:16pt;
  font-weight:bold;
  /* text-decoration:underline;  */
  /* color:#ffffff; */
  }
</style>

<span class='cpt'></span> Apparition d'un texte d'aide, lorsqu'on passe la souris sur le texte.
 <span class='wysiwyg'><span class="wysiwyg_info"></span></span>
 <br>

À ajouter dans le <header> :
<style>
.wysiwyg_info { 
 display:none; /* c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
 position:absolute; /* absolute; fixed; relative; static; */ 
 margin-left:15px; /* déplace de texte sur la droite */
 margin-top:-55px; /* déplace de texte vers le haut */
 padding-left:5px; 
 padding-top:5px; 
 text-align:left;
 width:380px; 
 height:45px; 
 font-size:12pt;
 font-weight:normal;
 font-style:normal;
 color:black;
 background-color:rgb(255,180,180);
 }
.wysiwyg_info:after { 
  white-space:pre;
  content:"What You See Is What You Get \0a Ce que vous voyez est ce que vous obtenez";
 }   
.wysiwyg { text-align:left;}
.wysiwyg:after { 
 color:#006600;
 content:"WYSIWYG";
 }
.wysiwyg:hover .wysiwyg_info {
  display:inline-block;    /*  inline; block; inline-block; table-cell; ... */
  }
/* c.f. http://www.w3schools.com/cssref/pr_gen_content.asp */
/* c.f. http://www.w3schools.com/cssref/pr_text_white-space.asp */
</style>

<abbr title="What You See Is What You Get">WYSIWYG</abbr> = Ce que vous voyez est ce que vous recevez.

??) Une curiosité :<br>
<div class="text1_change">
  Passez ici pour une information. &nbsp;
  <span class="text2_change">
    Cette partie doit etre une incluse dans le bloc qui réagit à la souris.
  </span>
</div>

À ajouter dans le <header> :
<style>
.text1_change { 
 display:inline-block;   /* le texte est visible normalement */ 
 color:#ff0088;
}

.text2_change { 
 display:none;  /* le texte est non visible */ 
 font-size:16pt;
 margin-left:20px; /* déplace de texte sur la droite de 20 pixels */
 margin-top:-5px; /* déplace de texte sur le haut de 30 pixels */
}

.text1_change:hover {
color:#000088; /* couleur par défaut du bloc */
}

.text1_change:hover .text2_change {
display:inline-block;  /* Fait apparaître le block contenant le texte */
color:#008888;  /* change la couleur, prend le dessus sur le changement de couleur
                   de .text1_change:hover */
}
</style>

??) En passant sur le texte en gras, un autre texte apparaît.
<div class="text3_change">
  &nbsp; &nbsp; <b>venez sur moi</b> &nbsp;
  <div class="text4_change">
    Voici le texte qui<br>
    apparaît quand on <br>
    passe sur le texte en gras.
  </div>
</div>

À ajouter dans le <header> :
<style>
.text3_change { 
  display:inline-block;   /* le texte est visible normalement */ 
  position:relative;
  /* border:2px solid violet; */
  }

.text4_change { 
  display:none;  /* le texte est non visible, c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
  position:relative;
  top:12pt;
  width:24ch;
  color:#008888;
  background-color:#fff0f0;
  }

.text3_change:hover .text4_change {
  display:inline-block;  /* Fait apparaître le block contenant le texte */
  }
</style>

??) En passant sur le texte en gras, un autre texte apparaît.
<div class="text5_change">
  &nbsp; &nbsp; <b>venez sur moi</b> &nbsp;
  <div class="text6_change">
    Voici le texte qui<br>
    apparaît quand on<br>
    passe sur le texte en gras.
  </div>
</div>

À ajouter dans le <header> :
<style>
.text5_change { 
  display:inline-block;   /* le texte est visible normalement */ 
  position:relative;
  /* border:2px solid violet; */
  }

.text6_change { 
  display:none;  /* le texte est non visible, c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
  position:absolute;
  top:-24pt;
  width:24ch;
  color:#008888;
  background-color:#fff0f0;
  }

.text5_change:hover .text6_change {
  display:inline-block;  /* Fait apparaître le block contenant le texte */
  }
</style>

??) En passant sur le texte en gras, un autre texte apparaît.
<div class="text7_change">
  &nbsp; &nbsp; <b>venez sur moi</b> &nbsp;
  <div class="text8_change">
    Voici le texte qui<br>
    apparaît quand on <br>
    passe sur le texte en gras.
  </div>
</div>

À ajouter dans le <header> :
<style>
.text7_change { 
  display:inline-block;   /* le texte est visible normalement */ 
  position:relative;
  /* border:2px solid violet; */
  height:20pt;
  }

.text8_change { 
  display:none;  /* le texte est non visible, c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
  position:relative;
  float:right; /* left; right; none;  default=none; */ 
  top:-24pt;
  color:#008888;
  background-color:#fff0f0;
  }

.text7_change:hover .text8_change {
  display:inline-block;  /* Fait apparaître le block contenant le texte */
  }
</style>

<div style='position:relative;'>
  ??) En passant sur le texte en gras, un autre texte apparaît.
  <div class='text11_change'>
    &nbsp; &nbsp; <b>venez sur moi</b> &nbsp;
  </div>
  <div class='text12_change'>
    Voici le texte qui<br>
    apparaît quand on <br>
    passe sur le texte en gras.
  </div>
</div>

À ajouter dans le <header> :
<style>
.text11_change { 
  display:inline-block;   /* le texte est visible normalement */ 
  position:relative;
  /* border:2px solid violet; */
  }

.text12_change { 
  display:none;  /* le texte est non visible, c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
  position:absolute;
  top:-24pt;
  color:#008888;
  background-color:#fff0f0;
  }

.text11_change:hover + .text12_change {
  display:inline-block;  /* Fait apparaître le block contenant le texte */
  }

.text12_change:hover { 
  display:inline-block; /* garde le texte visible */
  }
</style>

<div style='position:relative;'>
  ??) En passant sur le texte en gras, un autre texte apparaît.
    <div id='text13_change'>
    &nbsp; &nbsp; <b>venez encore sur moi</b> &nbsp;
    <div style="display:inline-block; position:absolute; width:400px;">
      <div id='text14_change'>
        Voici le texte qui<br>
        apparaît quand on <br>
        passe sur le texte en gras.
      </div>
    </div>
  </div>
</div>

À ajouter dans le <header> :
<style>
#text13_change { 
  display:inline-block;
  position:relative;
  text-align:left;
  }

#text13_change:hover {
  cursor:default;
  }

#text14_change { 
  display:none; /* c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
  position:relative; /* absolute; fixed; relative; static; */ 
  left:0pt;
  top:-24pt;
  padding:5px 8px 2px 8px;  
  font-size:12pt;
  background-color:#f0f0f0;
  line-height:180%;
  border-width:1px;
  border-style:none solid solid solid;
  border-color:#808080;
  }

#text13_change:hover #text14_change {
  display:inline-block; /* Fait apparaître le block contenant le texte */
  }

#text14_change:hover{
  display:inline-block;  /* garde le texte visible */
  }
</style>

Site du w3school sur le sélecteur "hover".
Site d'exemples d'utilisation de "hover".

??) Boutons, qui réagissent au passage de la souris.<br> 

Un texte avant : 
<button onclick="alert('On a pressé le bouton !');">Un &lt;button&gt; standard</button>
Un texte après. Du javascript homéopatique a été utilisé.<br>

Un <button class="bouton" onclick="alert('Ce bouton n\'est pas joli !');">&lt;button&gt;</button>
personalisé. Pas joli.<br>

Un <span class="bouton" onclick="alert('Ce bouton est plus joli !');">&lt;button&gt;</span>
personalisé. Plus joli.<br>

De couleur : <span class="bouton" style="color:#ffff00;" 
                   onclick="alert('Le texte est de couleur jaune');">#ffff00</span><br>

De couleur : <span class="bouton" style="color:rgb(99,99,99);" 
                   onclick="alert('Le texte est de couleur grise');">
  rgb(99,99,99)</span><br>

Lien vers : <a href="bgweb.html" target="_blank" class="bouton"
               style="color:#00e0ff; text-decoration:underline;">bgweb</a><br>

À ajouter dans le <header> :
<style>
.bouton {
display:inline-block;   /* c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
width:150px; /* largeur de l'image */
line-height:50px;
text-align:center;
vertical-align:middle;
background:url(images/bouton-noir.png) no-repeat;
color:white;
text-decoration:none;
font-weight:bold;
/* float:left; */ /* pour qu'il n'influence pas le texte autour. */
margin:20px;
}
.bouton:hover {  /* c.f http://www.w3schools.com/cssref/sel_hover.asp */
background:url(images/bouton-noir-2.png) no-repeat;
}
</style>

??) </span> Une table, avec des bordures :<br>
<table>
 <tr>
  <td class="font_1">ligne 1 ; colonne 1</td>
  <td class="font_2">ligne 1 ; colonne 2</td>
  <td class="font_3">ligne 1 ; colonne 3</td>
 </tr> 
 <tr>
  <td>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>

À ajouter dans le <header> :
<style>
table { border-collapse:collapse;  /* bordures plus jolie */ 
        border-style:none;  /* none | hidden | dotted | dashed | solid | double | groove | ridge | inset */ 
        } 
 tr { vertical-align:top; text-align:left } 
/* text-align : left, right, center, justify */
/* vertical-align : top, middle, bottom */
 td { border:3px double #000000; padding:9px 20px 4px 7px; }  
/* border = border-width  border-style  border-color  */
/* border-style : double, solid, dashed, none, ...  */
/* padding = padding-top  padding-right  padding-bottom  padding-left */

.font_1 {font-size:0.8em} 
.font_2 {font-size:1.2em} 
.font_3 {font-weight:800} 
</style>

??) </span> Une table, pour aligner correctement un texte<br>
<table>
 <tr>
  <td class="td_1">-</td>
  <td class="td_2">
   Texte, sur plusieurs lignes,<br>
   mais alignés correctement.<br>
   C'est plus joli ainsi.
  </td>
 </tr> 
 <tr>
  <td class="td_1">-</td>
  <td class="td_2">
   Autre texte bien alignés.<br>
   Avec une deuxième ligne.
  </td>
 </tr> 
</table>

À ajouter dans le <header> :
<style>
table { border-collapse:collapse;  /* bordures plus jolie */ 
        border-style:none;  /* none | hidden | dotted | dashed | solid | double | groove | ridge | inset */ 
        } 
 tr { vertical-align:top; text-align:left } 
/* text-align : left, right, center, justify */
/* vertical-align : top, middle, bottom */
 td { border:3px double #000000; padding:9px 20px 4px 7px; }  
/* border = border-width  border-style  border-color  */
/* border-style : double, solid, dashed, none, ...  */
/* padding = padding-top  padding-right  padding-bottom  padding-left */

.td_1 { border:2px  #000000; padding:1px; width:15px; } 
.td_2 { border:2px  #000000; padding:1px; } 
</style>

??) </span> Indentation de la première ligne, différente des autres<br>
<div class="indent">
Première ligne, assez longue pour avoir un retour automatique à la ligne,
dans le but de montrer que les lignes suivantes sont décalées par rapport à la première.
En modifiant les paramètres "padding" et "text-indent" de la classe ".indent"
définis dans le style, on peut définir d'autres tailles d'indentation.
</div>    
<div class="indent">
°  Une deuxième ligne, toujours assez longue, pour montrer que 
l'indentation peut se faire sur plusieurs paragraphes. 
Ici, des "div" ont été utilisés au lieu de paragraphes.
</div>
<br>

À ajouter dans le <header> :
<style>
.indent { padding-left:18px; text-indent:-18px; } 
</style>

??) </span> Simulation de tabulations en positionnement "absolute"<br>
° Texte 1
<span style="position:absolute; left:20ch; top:auto;">
Text 2 décalé
</span>
<br>
Une ligne sans tabulation entre deux.<br>
° Texte 1 nouveau
<span style="position:absolute; left:20ch; top:auto;">
Text 2 décalé bis
</span>
<span style="position:absolute; left:40ch; top:auto;">
Text 3 en 40em
</span>
<br>
123456789a123456789b123456789c123456789d123456789e<br>
La tabulation est en 20ch et en 40ch.<br>
ch est la largeur du caractère "0".<br>

??) </span> Simulation de tabulations en utilisant des tableaux<br>
<table class="tabul">
<tr><td class="td10">° Table 1, ligne 1</td></tr>
<tr><td class="td10">° Table 1, une ligne 2</td></tr>
</table>

<table class="tabul">
<tr><td class="td10">La table 2, ligne 1</td></tr>
<tr><td class="td10">En ajoutant du texte, la suite se décale</td></tr>
</table>

<table class="tabul">
<tr><td class="td10">° Table 3, ligne 1</td></tr>
<tr><td class="td10">° Table 3, ligne 2</td></tr>
<tr><td class="td10">° Table 3, ligne 3</td></tr>
</table>
<br>

À ajouter dans le <header> :
<style>
.tabul {
display:inline-block;
vertical-align:top;
border: 0px none;
margin-right:20px;
}
.td10 { border:none; padding:0px 0px 0px 0px; }  
</style>

??) </span> Simulation de tabulations en utilisant des div<br>
<div style="min-width:45ch;">
<div style="display:inline-block; margin-right:20px;">
20  Octobre 2015<br>
29 Déc. et 5 Janvier 2016<br>
16 Février 2016<br>
29 Mars 2016<br>
</div>

<div style="display:inline-block;">
Vacances d'automne<br>
Vacances de Noël<br>
Vacances de Février<br>
Vacances de Pâques<br>
</div><br>
</div>

??) </span> Animation d'images SVG<br>
<svg width="300" height="100">
  <title>Attribute Animation with SMIL</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animate
       attributeName="cx" from="0" to="100"
       dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

??) <span data-title1="Un texte d'information"><b>Venez sur ce texte></b></span><br>

À ajouter dans le <header> :
<style>
[data-title1]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title1]:after {
    content: attr(data-title1);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title1] {
    position: relative;
}

/* C.f. : https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag */
</style>

Si on veut placer une image, la propriété CSS float est intéressante.

Astuce pour mettre en amoindrire tout, sauf ce sur quoi la souris se trouve.
http://css-tricks.com/examples/HoverEverythingBut/   et
http://css-tricks.com/hover-on-everything-but/

Plan du Site : Home     bgweb.html     exemples.html     a2css1090_liste_exemples_style.html

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