<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
<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.Citation du titre d'une oeuvre ou d'un événement.
Citation (courte).
<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 : < et > Le & se code & C'est pratique dans de nombreux cas, pour copier un texte. </pre>
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
<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>.
<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%. -->
<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: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>
ligne 1, col 1 | ligne 1, col 2 | ligne 1, col 3 |
ligne 2, col 1 | ligne 2, col 2 | ligne 2, col 3 |
ligne 1, col 1 | ligne 1, col 2 | colspan fusionne deux cellules |
ligne 2, col 1 | Le style "border-collapse:collapse" fait la différence |
<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>
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 |
Utilisation d'une table de plusieurs lignes et plusieurs colonnes.<br> Ici, la balise <table> 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>
a11 | a12 | a12 |
a21 | a22 | a22 |
a31 | a32 | a32 |
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 -->
Alignement de trois images avec du texte en-dessous, en utilisant des balises <b><div></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 -->
Alignement de quatre images avec du texte en-dessous, en utilisant des balises <b><div></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 -->
Alignement irrégulier d'images avec du texte en-dessous, en utilisant des balises <b><div></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 -->
Alignement irrégulier d'images avec du texte en-dessous, autre manière, avec triple <b><div></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 <div> 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 <div> est importante.<br> Elle indique une position relativement à la deuxième balise.<br> <br> Dans la première balise <div> 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 <div> 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>
<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 <b> 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 <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>
<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. <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"> <b>venez sur moi</b> <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"> <b>venez sur moi</b> <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"> <b>venez sur moi</b> <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'> <b>venez sur moi</b> </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'> <b>venez encore sur moi</b> <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 <button> 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 !');"><button></button> personalisé. Pas joli.<br> Un <span class="bouton" onclick="alert('Ce bouton est plus joli !');"><button></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>
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 |
??) </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>
- |
Texte, sur plusieurs lignes, mais alignés correctement. C'est plus joli ainsi. |
- |
Autre texte bien alignés. Avec une deuxième ligne. |
??) </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>
° 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 |
??) </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