UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Classes : SI3
Matière : TP WEB
Enseignants : S. Mabrouk, R. Gahar, Med. A. Dahdeh
A-U : 16/17
Semaine : 02/10/2016
Nb pages : 5
TP n°2
Travail demandé
1. Créez une feuille de style nommée « monstyle.css » et la relier à votre page web.
2. Le résultat souhaité est illustré par la figure ci-dessous
a) Modifiez le style de la balise <body> pour :
- Changer la couleur de l’arrière plan : #E6E6FA
- Fixer sa largeur à 1335px et le centrer.
b) Décrire le bloc <nav> avec ce style :
float:left;
width:200px;
height:500px;
background:#B1B6E4;
margin-right:17px;
c) Décrire le blog <article> avec ce style :
float:left;
width:750px;
height:500px;
background:#8791EB;
margin-right:17px;
d) Decrire le bloc <aside> avec ce style :
float:left;
width:250px;
height:500px;
background:#949ACE;
e) Ajouter une marge de 50px à <header>.
f) La partie <footer> à une couleur de background égale à #6669C1, une hauteur de
100px, une largeur de 1234 et une marge de 50px.
3. Ecartez les titres du bloc <article> du bord gauche de 10px, de même pour les titres du
bloc <aside>.
4. Modifiez le style de la balise <p> dans le bloc <article> afin d’écartez les paragraphes du
bord gauche de 20px.
5. Copiez le style ci-dessous dans votre fichier CSS et complétez les balises dans votre page
HTML avec leur identifiant correspondant (id).
#content{
margin: 50px;
}
#menu {
margin: 20px;
padding: 20px 10px 20px 10px;
list-style: none;
}
#menu a {
display: block;
height: 1%;
padding: 6px 10px 6px 10px;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
Publicité
#menu a:hover, #menu a:focus {
background: #8791EB;
}
6. Créez une classe liens pour modifier le style des puces de la liste des liens utiles en carré.
7. Modifiez le style du texte des paragraphes de la zone centrale.
8. Editez le fichier CSS afin d’appliquer votre propre style.
9. Valider votre page par le validateur HTML : http://validator.w3.org.
2
Annexe
Type
Propriété
Valeur
Description
font-family
Police précise (Arial, Times,
Verdana ...)
Famille (serif, fantasy,
monospace)
Définit un nom de police ou
une famille
font-style
normal, italic, oblic
Définit le style d'écriture
font-weight
Police
- normal, bold, light, bolder,
lighter
- valeur numérique
Définit l'épaisseur de la police
font-size
xx-small, x-small, small, medium,
large, x-large, xx-large
taille en points (pt), cm, %
Définit la taille de la police
font-variant
normale, small-caps
Définit une variante
font
{font: bold italic}
Raccourci permettant de mettre
toutes les propriétés
text-align
left, center, right,justify
Définit l'alignement du texte
text-indent
en pouces (in), en cm, ou en %
Définit un retrait
text-decoration
blink, underline, line-through,
overline ou none (clignotant,
souligné, barré, surligné ou
aucune)
Définit une décoration
text-transform
uppercase, lowercase, capitalize
(majuscule, minuscule, première
Publicité
lettre en majuscule)
Définit la casse du texte
Style
color
"#RRGGBB"
Définit la couleur du texte
word-spacing
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Définit l'espace entre les mots
line-height
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Définit l'interligne
width
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Définit la longueur d'un
élément de texte ou d'une
image
3
height
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Définit la hauteur d'un élément
de texte ou d'une image
white-space
normal, pre, nowrap
Espacement ou blanc
background-
color
"#RRGGBB"
Définit la couleur du fond
background-
image
URL
Définit l'image d'arrière-plan
background-
repeat
repeat, repeat-x, repeat-y, no-
repeat
Définit la façon de répéter
l'arrière-plan
Arrière-
plans
background-
attachment
scroll, fixed
background-
position
- top, center, bottom, left, center
ou right
- En points (pt), pouces (in), en
cm, en pixels (px), ou en %
Spécifie si l'image reste fixe
avec les déplacements de
Publicité
l'écran
Position de l'image par rapport
au coin supérieur gauche
background
{background: test.jpg fixed
repeat}
Raccourci pour les propriétés
d'arrière-plan
margin-top
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Valeur de la marge supérieure
margin-right
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Valeur de la marge de droite
Marges
margin-bottom
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Valeur de la marge inférieure
margin-left
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Valeur de la marge de gauche
margin
Raccourci pour les propriétés
de marge
border-top-
width
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Epaisseur du bord supérieur
Bordures
border-right-
width
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Epaisseur du bord droit
border-bottom-
width
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Epaisseur du bord inférieur
border-left-
width
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Epaisseur du bord gauche
4
border-width
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Raccourci vers les propriétés
d'épaisseur de trait
border-color
Publicité
"#RRGGBB"
Couleur de la bordure
border-
collapse
border
collapse ou separate
effet "3d" ou non
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Raccourci vers les propriétés
de bordure
padding-top
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Ecartement entre l'élément et le
bord supérieur
padding-right
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Ecartement entre l'élément et le
bord droit
padding-
bottom
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Ecartement entre l'élément et le
bord inférieur
padding-left
En points (pt), pouces (in), en cm,
en pixels (px), ou en %
Ecartement entre l'élément et le
bord gauche
padding
list-style-type disc, circle ou square
Listes
list-style-
image
list-style-
position
list-style
URL
inside ou outside
Raccourci vers les propriétés
d'écartement
Type de puces et de
numérotation
Permet de remplacer les puces
par une image
Spécifie si les puces sont à
l'intérieur ou à l'extérieur du
texte
Raccourci vers les propriétés
de liste
5