Page Web 08b d'exemples CSS.

<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

Le but de ces exemples est d'aller plus loin dans les styles, pour obtenir des effets spéciaux au passage de la souris sur des textes ou des images.
Plusieurs styles sont définis en début de page HTML, par la balise <style>
A vous de voir dans le code source de cette page, la définition de ces styles.

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

Code :
<p>
1) 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"> >
</p>

À ajouter dans le <header> :
<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;
/*visibility:hidden;*/
}
</style>

2) En passant sur une image, une autre image change
Une ligne entre deux. Mais sans <br>
Code :
2) 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>

3) Apparition d'un texte lorsque l'on passe dessus avec la souris :
Texte
Code :
 3) 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>

4) Apparition d'un texte lorsque l'on passe dessus avec la souris : Texte
Par défaut, le texte est de la même couleur que le fond. Sa couleur change lorsqu'on passe sur le rectangle avec la souris, ce qui fait apparaître le texte. C'est du bidouillage, mais cela fonctionne ainsi.
La variante suivante a l'avantage d'avoir une image de fond.
Code :
 4) 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>

5) Apparition d'un texte lorsque l'on passe dessus avec la souris : Texte
Code :
 5) 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>

5b) Apparition d'un texte d'aide, lorsqu'on passe la souris sur le texte.
Informations sur content et sur white-space.
 5b) 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>

6) Boutons, qui réagissent au passage de la souris.
Chacun réagit un peu différemment. c.f. display:inline-block
Page 02 Bouton 02 Page 03 Page 04

Code :
 <p>
 6) Boutons, qui réagissent au passage de la souris.<br> 
 Chacun réagit un peu différemment....<br>
 <span class="bouton"><a href="page02.html" style="color:white;">Page 02</a></span> 
 <span class="bouton">Bouton 02</span>
 <a href="page03.html" class="bouton">Page 03</a>
 <a href="page04.html" class="bouton" style="text-decoration:underline;">Page 04</a>
 </p>

À ajouter dans le <header> :
<style>
.bouton {
display:inline-block;   /* c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
width:150px;
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>

7) Une curiosité :
Passez ici pour une information.   Cette partie doit être une incluse dans le bloc qui réagit à la souris.

Code :
 7) 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>

8) Une table, avec des bordures :
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 :
8) 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>

9) Une table, pour aligner correctement un texte
- Texte, sur plusieurs lignes,
mais alignés correctement.
C'est plus joli ainsi.
- Autre texte bien alignés.
Avec une deuxième ligne.
Code :
 9) 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>

10) Indentation de la première ligne, différente des autres
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.
°  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.

Code :
 10) 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>

11) Simulation de tabulations en positionnement absolu
° Texte 1 Text 2 décalé
Une ligne sans tabulation entre deux.
° Texte 1 nouveau Text 2 décalé bis Text 3 en 40ch
123456789a123456789b123456789c123456789d123456789e
La tabulation est en 20ch et en 40ch.
ch est la largeur du caractère "0".
Pour les unités en CSS

Code :
 11) Simulation de tabulations en positionnement absolu<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>

12) Simulation de tabulations en utilisant des tableaux
° Table 1, ligne 1
° Table 1, une ligne 2
La table 2, ligne 1
En ajoutant du texte, la suite se décale
° Table 3, ligne 1
° Table 3, ligne 2
° Table 3, ligne 3

Code :
 12) 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>

13) Simulation de tabulations en utilisant des div
20 Octobre 2015
29 Déc. et 5 Janvier 2016
16 Février 2016
29 Mars 2016
Vacances d'automne
Vacances de Noël
Vacances de Février
Vacances de Pâques

Code :
13) 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>

Si on veut placer une image, la prorié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/

Un lien sur une page qui contient un peu de javascript.
Javascript à dose homéopathique.

D'autres exemples et tests.


Plan du Site : Home   arrow   page08b_Exemples_CSS.html


Page mise à jour le 23 décembre 2015 par Bernard Gisin
Hébergement par : www.infomaniak.ch