Correction exercices les sélecteurs simples en CSS : Série 01
Correction exercices les sélecteurs simples en CSS : Série 01
-
Exercice 01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
-
Exercice 02
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
-
Exercice 03
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
-
Exercice 04
-
É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>
<!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><!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><!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>
