Exemples de styles CSS avec Correction
(suite TP3)
4. Redéfinir la balise du corps de la page, sachant que:
La police des caractères est 'Belleza'.
Le code hexadécimal de la couleur est #181818
La taille des caractères est 1.2em
La largeur est de 90% et le contenu est centré automatiquement.
Les marges de haut et de bas sont de 20px.
bod
y{ font-family: 'Belleza', sans-serif;
color:#181818;
fon
t-
siz
e:1
.2e
m;
} wi
dth
:90
%;
ma
rgi
n:
aut
o;
margin-bottom: 20px;
margin-top: 20px;
5. Redéfinir les balises h1, h2 et
h3, sachant que:
La police des caractères est 'Pacifico'.
Le code hexadécimal de la couleur est #006699.
La première lettre est transformé en majuscule.
h1, h2, h3{
font-family: 'Pacifico', sans-serif;
color:#006699;
text-transform:capitalize;
}
Page 1
6. Redéfinir la balise h1, sachant que:
Le texte est transformé en majuscules
L'espacement entre les caractères est de 2pt
La bordure est 1px outset #006699
L'alignement du texte est centré
Le code hexadécimal de la couleur est #0099cc.
L'arrondissement des bordures est de 20px
L'ombre de la boite est de 10px pour tous ses paramètres et le code hexadécimal de
la couleur est #003366
h1{
text-transform: uppercase;
letter-spacing: 2pt;
border: 1px outset #006699;
text-
align:
center;
color:
} #0099c
c;
border
-
radius:
20px;
box-shadow: 10px 10px 10px #003366;
7. La première lettre de la balise h2 est
définie comme suit:
Le texte est plus gras
La taille du caractère est de 180%
h
2
:
:
f
i
r
s
t
-
l
e
t
t
e
r
{
font-weight: bolder;
font-size: 180%;
}
8. Redéfinir la balise des paragraphes pour avoir un texte justifié.
p{
text-align:justify;
}
9. Il est à noter que le titre de premier niveau (première partie) est identifié
par "titre_principal" dans le code HTML
<h1 id="titre_principal">Bibliothèque de l'ESEN</h1>
La mise en forme donnée à ce titre est la suivante:
Affichage de type inline
L'alignement vertical est haut
Les marges de gauche sont de 20px
#titre_pri
nc
ip
al
{
di
sp
la
y:
in
li
n
e;
ve
rti
ca
l-
ali
g
n:
to
p;
margin-left:20px;
}
10. Créer la classe .logo (appliquée au logo (choix libre de l’image) :
<img src="../images/[Link]" alt="Logo " class="logo" />
Marges de haut et de bas: 20px
Bordure solid 4px blanche
Arrondissement des bordures :5px
Ombre 2px 2px 2px gray
.logo{
margin-top:20px;
margin-bottom:20px;
border:solid 4px white;
border-radius: 5px;
box-shadow: 2px 2px 2px gray;
}
11. Redéfinir la balise table sachant que:
Les bordures sont collées
La largeur est de 70%
Le tableau est centré au niveau de son conteneur
table{
border-collapse: collapse; /* Les bordures du tableau seront collées */
width:70%;
margin: auto;
}
12. Redéfinir la balise de titre du tableau pour l'afficher en bas.
caption{
caption-side:bottom;
}
13. Redéfinir les balises de la zone de navigation et de pied de page pour avoir:
Un alignement centré
Une bordure de haut solide, de taille 2px et le code hexadécimal de la
couleur est
#002D40
Une bordure de bas solide, de taille 1px et le code hexadécimal de la
couleur est
#002D40
Les marges sont de 50px
nav, footer{
text-align:center;
border-top: solid
2px #002D40;
border-bottom:
solid 1px #002D40;
margin:50px
}
14. Redéfinir les balises des entêtes et des cellules dans un tableau pour avoir des bordures
solides, 1px et le code hexadécimal de la couleur est #9BBCDD
td,th{
border: 1px solid #9BBCDD;
}
15. Redéfinir la balise des listes non ordonnées dans la zone de navigation,
qui doivent être présentées sans puces
nav ul{
list-style-type: none;
}
16. Redéfinir la balise des éléments d'une liste non ordonnée dans la zone
de navigation, qui doivent avoir un affichage de type inline-block
nav ul li{
display: inline-block;
}
17. Pour les liens hypertexte, la mise en forme suivante sera appliquée:
Pour les
liens à
l'état
initial:
o
Couleu
r:
#9BBC
DD; o
Sans
soulign
ement
o Marge de droite:40px;
Pour les liens visités
cou
leu
r: #
00
2D
40;
Pour les actifs et quand la souris est dessus
o Taille plus grande
o Ligne en haut et en bas (soulignement)
a:link{
}
text-decoration:none;
color: #9BBCDD; margin-right:40px;
a:visited{
color: #002D40;
}
a:hover, a:active{
font-size:larger;
text-decoration:underline overline;
}
18. Redéfinir la balise des boutons pour avoir la mise en forme suivante :
Marges intérieures de 5px
Hauteur de 30px
Couleur d'arrière plan #002D40
Couleur du texte blanche
Bordure: inset 2px grey;
Arrondissement des bordures de 5px
button{
padding-left: 5px;
height: 30px;
background-color:#002D40;
color:white;
border:inset 2px grey;
border-radius: 5px;
}
