Correction exercices les sélecteurs simples en CSS : Série 01

apcpedagogie > Les cours de programmation > CSS > Correction exercices les sélecteurs simples en CSS : Série 01

Correction exercices les sélecteurs simples en CSS : Série 01

4 décembre 2020
Posté par: Riadh HAJJI
Catégorie: CSS

386 vues

Correction exercices les sélecteurs simples en CSS : Série 01

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>

<!doctype html>

<html>

<head>

<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>

<h2>introduction au CSS</h2>

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>

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>

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>

</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>

<!doctype html>

<html>

<head>

<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>

</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>

<!DOCTYPE html>

<html>

<head>

<title>Exercice 03 CSS3</title>

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>

<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>

<!DOCTYPE html>

<html>

<head>

<title>Exercice 04 CSS3</title>

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>

<TR>

<TH COLSPAN="2">Couleur de fond "silver"</TH>

</TR>

<TR>

<TD>Texte en police sans empattement</TD>

</TR>

</table>

</body>

</html>

</body>

</html>

Les unités de mesure en CSS

Exercices les sélecteurs Série 02

Correction exercices les sélecteurs simples en CSS : Série 01

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é

Solution

Exercice 02

Énoncé

Solution

Exercice 03

Énoncé

Solution

Exercice 04

Énoncé

Solution

Sommaire du cours CSS