<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 :
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<br> <div class="image2_change"></div> Une ligne entre deux. Mais sans <br> <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 : <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 : <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 : <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. <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
<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é :<br> <div class="text1_change"> Passez ici pour une information. <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>
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 |
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>
- |
Texte, sur plusieurs lignes, mais alignés correctement. C'est plus joli ainsi. |
- |
Autre texte bien alignés. Avec une deuxième ligne. |
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<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<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>
° 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 |
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<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.
Plan du Site : Home page08b_Exemples_CSS.html
Page mise à jour le 23 décembre 2015 par Bernard Gisin
Hébergement par : www.infomaniak.ch