Prog Web & MM Maroua BAKRI
Langage CSS
Correction du TD N°3
Exercice 1 :
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Page de présentation de différents méthodes d'application de styles CSS</title>
<style type="text/css">
table,td,th {border:solid 1px black}
.Child1 {
color:#FFF;
background-color:#633;
}
.Child2{
background-color:#FCC;
}
.Child3 {
background-color:#FFC;
}
.Child4 {
background-color:#CFC;
}
.Child5 {
background-color:#CCF;
}
.Child6 {
color:#F00;
}
</style>
</head>
<body>
<table>
<tr class=Child1>
1
Prog Web & MM Maroua BAKRI
<th>col 0</th>
<th class=Child6>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
</tr>
<tr class=Child2>
<td>res = 1,0</td>
<td class=Child6>res = 1,1</td>
<td>res = 1,2</td>
<td>res = 1,3</td>
<td>res = 1,4</td>
</tr>
<tr class=Child2>
<td>res = 2,0</td>
<td class=Child6>res = 2,1</td>
<td>res = 2,2</td>
<td>res = 2,3</td>
<td>res = 2,4</td>
</tr>
<tr class=Child2>
<td>res = 3,0</td>
<td class=Child6>res = 3,1</td>
<td>res = 3,2</td>
<td>res = 3,3</td>
<td>res = 3,4</td>
</tr>
<tr class=Child3>
<td>res = 4,0</td>
<td class=Child6>res = 4,1</td>
<td>res = 4,2</td>
<td>res = 4,3</td>
<td>res = 4,4</td>
</tr>
<tr class=Child4>
<td>res = 5,0</td>
<td class=Child6>res = 5,1</td>
<td>res = 5,2</td>
2
Prog Web & MM Maroua BAKRI
<td>res = 5,3</td>
<td>res = 5,4</td>
</tr>
<tr class=Child5>
<td>res = 6,0</td>
<td class=Child6>res = 6,1</td>
<td>res = 6,2</td>
<td>res = 6,3</td>
<td>res = 6,4</td>
</tr>
</table>
</body>
</html>
Exercice 2 :
<HTML>
<HEAD>
<TITLE>Corrigé Exercice 2 CSS</TITLE>
<STYLE TYPE="text/css">
<!--
BODY { margin-left: 50px ; color: navy ; background: white URL(fond_spirale.gif) repeat-y;
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>
3
Prog Web & MM Maroua BAKRI
<H2>Titre de niveau 2</H2>
<UL>
<LI>La couleur par défaut du texte est le bleu "navy"
<LI>Les titres sont en police "Comic Sans MS" ou sans-serif
<LI>Le texte est en police Arial ou Helvetica (sans-serif)
<LI>La page contient l'image "fond_spirale.gif" en arrière-plan (image suffisamment large
pour ne pas se répliquer horizontalement)
<LI>Pour ménager de la place à gauche pour la spirale, on a défini une marge gauche de 50
pixels
<LI>Les liens <A HREF="[Link] encore visités</B></A> sont colorés
en "red",<BR>
et les liens <A HREF="[Link] visités</B></A> en "maroon"<BR>
<LI><TT>Le texte en <PRE> ou <TT> est en couleur "blue" et en police à chasse
fixe</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>
Exercice 3 :
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exemple 1 et exercice 0</title>
<style type='text/css'>
#conteneur {
position:relative;top:50px; /* indispensable comme repère pour les autres positions */
background-color:lightgray;
border: 2px solid;
4
Prog Web & MM Maroua BAKRI
width:400px;
height:300px;
margin-left:auto;
margin-right:auto;
}
#colGauche {
background-color:lightblue;
border: 1px solid;
width:60px;
height:280px;
position:absolute; /* ici, position:relative fonctionne aussi car la div est à sa place */
left:5px;
top:10px;
}
#colDroite {
background-color:lightgreen;
border: 1px solid;
width:60px;
height:280px;
position:absolute; /* remplacer absolute par relative pour voir la différence */
right:5px;
top:10px;
}
</style>
</HEAD>
<BODY>
<div id="conteneur">
<div id="colGauche">
</div>
<div id="colDroite">
</div>
</div>
</BODY>
</HTML>