Exercice 01
Énoncé
- Vous pouvez visualiser l'énoncé de l'exercice
Solution
<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html :charset=UTF-8"/> <title>Les selecteurs simples</title> <style> #layout{background-color: skyblue; width: 500px; padding: 5px; text-align: center;} .gauche{text-align: left;} .droite{text-align: right;} .justifiee{text-align: justify;} h2,button{color:blue} p{color:red} h2{font-size: 1.5em; text-transform: capitalize;} button{background-color: yellow;} </style> </head> <body> <div id="layout"> <h2>introduction au CSS</h2> <p class="gauche"> Introduit au milieu des annees 1990, CSS devient couramment utilise dans la conception de sites web et bien pris en charge par les navigateurs web dans les annees 2000. </p> <p class="droite"> Le CSS est un langage de style qui difinit la presentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arriere-plan, les positionnements evolues et bien d'autres chases. </p> <p class="justifiee"> Le but davoir le css dans vos sites c'est de compenser les manques du langage HTML en ce qui concerne la mise en page et la presentation </p> <button >read more</button> </div> </body> </html>
Exercice 02
Énoncé
- Vous pouvez visualiser l'énoncé de l'exercice
Solution
<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html :charset=UTF-8"/> <title>Exercice 02 série 01 CSS</title> <style> table{border:solid 2px blue; width:50%;} thead{background-color:silver; line-height: 40px;} /*Coloration des trois premières lignes*/ table tbody>tr:nth-child(-n+3){ background-color:#fcc; } /*Coloration quatrième ligne*/ table tbody>tr:nth-child(4){ background-color:#ffc; } /*Coloration cinquième ligne*/ table tbody>tr:nth-child(5){ background-color:#cfc; } /*Coloration sixième ligne*/ table tbody>tr:nth-child(6){ background-color:#cff; } /*Coloration du reste des lignes*/ table tbody>tr:nth-child(n+7){ background-color:#ccf; } </style> </head> <body> <table> <thead> <tr><th>Entête01</th><th>Entête02</th></tr></thead> <tbody> <tr> <td>L1C1</td> <td>L1C2</td> </tr> <tr> <td>L2C1</td> <td>L2C2</td> </tr> <tr> <td>L3C1</td> <td>L3C2</td> </tr> <tr> <td>L4C1</td> <td>L4C2</td> </tr> <tr> <td>L5C1</td> <td>L5C2</td> </tr> <tr> <td>L6C1</td> <td>L6C2</td> </tr> <tr> <td>L7C1</td> <td>L7C2</td> </tr> <tr> <td>L8C1</td> <td>L8C2</td> </tr> <tr> <td>L9C1</td> <td>L9C2</td> </tr> </tbody> </table> </body> </html>
Exercice 03
Énoncé
- Vous pouvez visualiser l'énoncé de l'exercice
Solution
<!DOCTYPE html> <html> <head> <title>Exercice 03 CSS3</title> <style type="text/css"> div{ width: 300px; border-top: solid red; border-right: dotted blue; border-bottom: dashed green; border-left: solid black; border-width:10px; } </style> </head> <body> <center> <div> Les feuilles de styles permettent le formatage et la mise en page de la page Web. Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. En général le langage HTML soit destiné à décrire le contenu, les feuilles de style sont destinées à décrire la forme du document. Le but d’avoir le css dans vos sites c’est de compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation Le CSS est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d’arrière-plan, les positionnements évolués et bien d’autres choses. </div> </center> </body> </html> </body> </html>
Exercice 04
Énoncé
- Vous pouvez visualiser l'énoncé de l'exercice
Solution
<!DOCTYPE html> <html> <head> <title>Exercice 04 CSS3</title> <style type="text/css"> BODY { margin-left: 50px ; color: navy ; background: white URL(fond_spirale.gif) ; font-family: Arial, Helvetica, sans-serif } A:link { color: red } A:active { color: maroon } A:visited { color: maroon } H1,H2,H3,H4 { text-align: center ; font-family: "Comic Sans MS", sans-serif ; font-size: large } H1 { text-align: center ; color: white ; background: navy } H2,H3,H4 { text-align: left ; color: navy ; background: white } TH { background: silver } TH,TD { font-family: Arial, Helvetica, sans-serif } PRE,TT { font-family: monospace ; color: blue ; font-weight: bold } </style> </head> <body> <H1> Titre de niveau 1 </H1> <H2>Titre de niveau 2</H2> <UL> <LI>La couleur par défaut du texte... <LI>Les titres sont en police... <LI>Le texte est en police... <LI>La page contient l'image "fond_spirale.gif"... <LI>Pour ménager de la place à gauche... <LI>Les liens... <LI><TT>Le texte en ...</TT> </UL> <P> <TABLE ALIGN=center WIDTH=60% BORDER=1> <TR> <TH COLSPAN="2">Couleur de fond "silver"</TH> </TR> <TR> <TD>Texte en police sans empattement</TD> <TD>Texte en police sans empattement</TD> </TR> </table> </body> </html> </body> </html>