docTD2 : LES CSS
download 
Plainte Transcription
TD2 : LES CSS
TD2 : LES CSS
Rappel de quelques propriétés CSS
> Les marges
2 notions de marges
- les marges intérieurs : padding
- les marges extérieurs : margin
> Les bordures
Taille
Style
Couleur
Synthèse
border-width : 2px;
border-style : dotted;
border-color : #53dac9;
border : 1px dotted #53dac9;
`
-
> Tailles
Largeur
Hauteur
Width : …..px;
Height : ……px;
>Fond
Couleur de fond
Image de fond :
Position de l'image de fond :
Repetition de l'image de fond
background-color : #53dac9;
background-url: images/fond.jpg;
background-position : top left;
background-repeat : no-repeat;
> Lien
4 sélécteurs :
Cible un lien dans une page html
Cible un lien survolé par la souris
Cible un lien qui a déjà été cliqué
Lien activé
a (ou a:link)
a:hover
a:visited
a:active
Exercice 1:
En vous basant sur la copie d'écran suivante, écrire le code css
correspondant
Les marges interieurs
RESULTAT
HTML
<div class="moncontenu'> Contenu
</div>
CSS
Les bordures
RESULTAT
HTML
CSS
<div
class="moncontenu''>
Contenu
</div>
Les tailles
RESULTAT
HTML
<div id="tailles'>
Contenu </div>
CSS
Les images en background
RESULTAT
HTML
<div
class="fondimage'> Canard
IUT </div>
CSS
Les liens
RESULTAT
HTML
<a …….="mon-lien'>
lien </a>
CSS
2 - Les positions en CSS
Afin de construire votre site Internet, vous devrez manipuler les éléments de
votre page en les positionnant aux endroits voulus.
Nous utiliserons donc les propriétés css suivantes :
position
float
Ces propriétés s'accompagnerons des valeurs suivantes
position : relative;
position : fixed;
position : absolute;
float : left ;
float : right;
Exercice 2 :
Ecrire le css permettant de construire la structure suivant en n'utilisant que les
propriétés css "float"
<html> <head>
<title>EXERCICE 2</title> <link href="css/styles.css"
rel="stylesheet">
</head> <body>
<header>HEADER</header>
<div id=”sidebar-gauche”>SIDEBAR GAUCHE</div>
<div id=”sidebar-droite”>SIDEBAR DROITE</div>
<div id=”mon-contenu”>CONTENU</div>
<footer>FOOTER</footer>
</body> </html>
type="text / c s s " CSS (fichier style.css)
header { }
…
….
3 - Design Fluide vs Design Fixe
Parmi les différentes notions de gabarits utilisés sur le web, nous pouvons en
distinguer 2 types, le premier dit fixe et le second dit fluide.
La différence vient de la taille de la zone d'affichage du site. Nous donnerons
une taille fixe pour le gabarit fixe tandis que pour le design fluide, le site
prendra toute la largeur de la fenêtre de navigation.
Afin d'illustrer ce deux design, nous retravaillerons le site réalisé lors du TPI
sur lesquels nous y apporterons quelques modifications.
EXERCICE 3
En vous basant sur le code HTML suivant(unique pour les 2 design) et les
exercices précédent, vous écrirez le CSS afin d obtenir les des gabarit suivant :
HTML :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Golf la fontaine - design fluide</title>
<link rel="stylesheet" type="text/css"
href="css/style.css" />
</head>
<body>
<header>
<img src="images/golf.png" width="469" height="412"
alt="Logo golf la fontaine">
<nav>
<ul>
<li><a href="leclub.html">Accueil</a></li>
<li><a href="lestarifs.html">Les tarifs</a></li>
<li><a href="leplan.html">Le plan d'accès</a></li>
</ul>
</nav>
<header>
<div class="content">
<h1>Bienvenue sur notre site</h1>
<p>Vous pouvez y trouver des informations utiles.</p>
</div>
<footer>
Golf La fontaine, 12 rue de la source 10100 Chaource Tél. : 03.22.22.22.22
</footer>
</body>
</html>
body{
font-family:Verdana;
background: #f3f3f3;
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………
}
margin: 0;
padding: 0;
header{
………………………………………………………………………………………………………………………………
}
header,
.content ,
footer {
background-color : ……………………………………………………………………………………………;
margin: 0 auto;
width: 800………………………………;
}
nav ul {
border-bottom: ………………………………………………………………………………………………;
bor……………………………………………………………………………………………………………… ;
}
nav ul li{
display: ………………………………………………………………………………………………………;
margin: 10px;
padding: ………………………………………………………………………………………………………;
}
nav ul li a{
color: #ff6161;
text-decoration: ………………………………………………………………………………………;
}
.content{
text-align:
}
;
………………………………………………………………………………………………
footer{
background: ………………………………………………………………………………………………………;
color: ………………………………………………………………………………………………………;
text-align: center;
}
body{
font-family:Verdana;
background: #f3f3f3;
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………
}
margin: 0;
padding: 0;
header{
………………………………………………………………………………………………………………………………
}
header,
.content ,
footer {
background-color : …………………………………………………………………………………… ;
}
margin: 0 auto;
width: ……………………………………………………………………………………………………………………;
nav ul {
border-bottom: ………………………………………………………………………………………………;
bor……………………………………………………………………………………………………………… ;
}
nav ul li{
display: ………………………………………………………………………………………………………;
margin: 10px;
padding: ………………………………………………………………………………………………………;
}
nav ul li a{
color: #ff6161;
text-decoration: ………………………………………………………………………………………;
}
.content{
text-align:
}
;
………………………………………………………………………………………………
footer{
background: ………………………………………………………………………………………………………;
color: ………………………………………………………………………………………………………;
text-align: center;
position : ………………………………………………………………………………………………………;
width : ……………………………………………………………………………………………………………;
}
