UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Classes : SEIOT2 A-U : 22/23
Matière : WEB
Enseignant : Med. A. Dahdeh 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 l’aligner au centre de la page web.
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> et centrer le titre.
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, du bord droit de 10px et alignement du texte : justifié.
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;
}
#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
Police précise (Arial, Times,
Verdana ...) Définit un nom de police ou
font-family
Famille (serif, fantasy, une famille
monospace)
font-style normal, italic, oblic Définit le style d'écriture
- normal, bold, light, bolder,
font-weight lighter Définit l'épaisseur de la police
Police - valeur numérique
xx-small, x-small, small, medium,
font-size large, x-large, xx-large Définit la taille de la police
taille en points (pt), cm, %
font-variant normale, small-caps Définit une variante
Raccourci permettant de mettre
font {font: bold italic}
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
blink, underline, line-through,
overline ou none (clignotant,
text-decoration Définit une décoration
souligné, barré, surligné ou
aucune)
uppercase, lowercase, capitalize
text-transform (majuscule, minuscule, première Définit la casse du texte
lettre en majuscule)
Style
color "#RRGGBB" Définit la couleur du texte
En points (pt), pouces (in), en cm,
word-spacing Définit l'espace entre les mots
en pixels (px), ou en %
En points (pt), pouces (in), en cm,
line-height Définit l'interligne
en pixels (px), ou en %
Définit la longueur d'un
En points (pt), pouces (in), en cm,
width élément de texte ou d'une
en pixels (px), ou en %
image
3
En points (pt), pouces (in), en cm, Définit la hauteur d'un élément
height
en pixels (px), ou en % de texte ou d'une image
white-space normal, pre, nowrap Espacement ou blanc
background-
"#RRGGBB" Définit la couleur du fond
color
background-
URL Définit l'image d'arrière-plan
image
background- repeat, repeat-x, repeat-y, no- Définit la façon de répéter
repeat repeat l'arrière-plan
Arrière- Spécifie si l'image reste fixe
background-
plans scroll, fixed avec les déplacements de
attachment
l'écran
- top, center, bottom, left, center
background- ou right Position de l'image par rapport
position - En points (pt), pouces (in), en au coin supérieur gauche
cm, en pixels (px), ou en %
{background: test.jpg fixed Raccourci pour les propriétés
background
repeat} d'arrière-plan
En points (pt), pouces (in), en cm,
margin-top Valeur de la marge supérieure
en pixels (px), ou en %
En points (pt), pouces (in), en cm,
margin-right Valeur de la marge de droite
en pixels (px), ou en %
En points (pt), pouces (in), en cm,
Marges margin-bottom Valeur de la marge inférieure
en pixels (px), ou en %
En points (pt), pouces (in), en cm,
margin-left Valeur de la marge de gauche
en pixels (px), ou en %
Raccourci pour les propriétés
margin
de marge
border-top- En points (pt), pouces (in), en cm,
Epaisseur du bord supérieur
width en pixels (px), ou en %
border-right- En points (pt), pouces (in), en cm,
Epaisseur du bord droit
width en pixels (px), ou en %
Bordures
border-bottom- En points (pt), pouces (in), en cm,
Epaisseur du bord inférieur
width en pixels (px), ou en %
border-left- En points (pt), pouces (in), en cm,
Epaisseur du bord gauche
width en pixels (px), ou en %
4
En points (pt), pouces (in), en cm, Raccourci vers les propriétés
border-width
en pixels (px), ou en % d'épaisseur de trait
border-color "#RRGGBB" Couleur de la bordure
border-
collapse ou separate effet "3d" ou non
collapse
En points (pt), pouces (in), en cm, Raccourci vers les propriétés
border
en pixels (px), ou en % de bordure
En points (pt), pouces (in), en cm, Ecartement entre l'élément et le
padding-top
en pixels (px), ou en % bord supérieur
En points (pt), pouces (in), en cm, Ecartement entre l'élément et le
padding-right
en pixels (px), ou en % bord droit
padding- En points (pt), pouces (in), en cm, Ecartement entre l'élément et le
bottom en pixels (px), ou en % bord inférieur
En points (pt), pouces (in), en cm, Ecartement entre l'élément et le
padding-left
en pixels (px), ou en % bord gauche
Raccourci vers les propriétés
padding
d'écartement
Type de puces et de
list-style-type disc, circle ou square
numérotation
list-style- Permet de remplacer les puces
URL
image par une image
Listes Spécifie si les puces sont à
list-style-
inside ou outside l'intérieur ou à l'extérieur du
position
texte
Raccourci vers les propriétés
list-style
de liste
