Unités de longueur
Le CSS offre de nombreuses unités pour exprimer les dimensions d’un élément. on peut classer les unités en deux grandes catégories : absolue et relative.
Unité absolues
Les unités absolues ne sont pas recommandées à l’écran, car les tailles d’écran varient énormément.
Avec l’avènement des smartphones et des tablettes, les tailles de supports se démultiplient.
On est très loin des trois grandes résolutions d’écrans qui ont régné pendant un moment :
- 800x600,
- 1024x768,
- 1280x1080.
Cependant, elles peuvent être utilisées si le support de sortie est connu, comme pour la mise en page pour l’impression.
Il existe plusieurs unité absolues comme
- cm : centimètre
- mm : millimétré
- px : pixel
Mais généralement, on n’utilise pas le cm et le mm, nous utilisons seulement le pixel qui prend la dimension d’un pixel sur l’écran.
Dans l’exemple suivant, nous avons changer la taille de police de titre et paragraphe en 32px. Nous avons aussi augmenter la hauteur du paragraphe en 150px.
1
2
3
4
5
6
7
8
9
h1{
font-size: 32px;
height: 50px;
}
p{
font-size: 32px;
height: 150px;
background-color: pink;
}
Unité relatives
Les unités relatives se réfèrent toujours à un autre élément. Elles sont très utiles, notamment avec la multiplication des supports et pour gérer le responsive design ou l’affichage sur mobile.
Il existe trois unité :
- % : Relatif à la taille de l’élément parent
- em : Relatif à la taille de police de l’élément parent
- rem : Relatif à la taille de police de l’élément racine HTML de la page.
Pratique - Unité relative : pourcentage
Les objectives de travail pratique
- Apprendre à utiliser l’unité relative : % (pourcentage).
Code source
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html{
height: 100%;
}
body{
font-size: 20px;
height: 100%;
}
p{
font-size: 100%;
width: 70%;
height: 30%;
background-color: pink;
}
</style>
</head>
<body>
<h1>Qu'est-ce que l'ordinateur</h1>
<p>
Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">
ordinateur</a> est un appareil électronique capable de
réaliser rapidement des opérations mathématiques,
logiques, des manipulations de chaînes de caractères
ou des recherches. Il est composé de deux grandes parties :
</p>
</body>
</html>
Résultat
Pratique - Unité relative : em et rem
Les objectives de ce travail pratique sont les suivant :
- Apprendre à utiliser les unité relative em et rem
- comprendre la différence entre eux.
Code source
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html{
/* font-size: 16px; */
}
body{
font-size: 24px;
}
h1{
font-size: 1em;
}
p{
font-size: 1rem;
}
a{
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Qu'est-ce que l'ordinateur</h1>
<p>
Un <a href="https://fr.wikipedia.org/wiki/Ordinateur" target="_blank">ordinateur</a> est un appareil électronique capable de
réaliser rapidement des opérations mathématiques,
logiques, des manipulations de chaînes de caractères
ou des recherches. Il est composé de deux grandes parties :
</p>
</body>
</html>
Résultat
