Faire son site 11 : Référence CSS - <percentage>

<percentage>

De nombreuses propriétés CSS utilisent des valeurs exprimées en pourcentages. Le plus souvent il s'agit de définir des tailles en fonction de la taille de l'élément parent. Il peut également s'agir de la taille d'une police de caractères calculée en fonction de la taille de la police courante.

Les valeurs de type <percentage> sont représentées par un nombre suivi du caractère % sans espace entre le nombre et le signe.


<style>
.bloc {
  width: 450px;
  height: 180px;
  font-size: 20px;
  background-color: palegreen;
}
#petit {
  font-size: 50%;
  background-color: thistle;
}
#grand {
  font-size: 150%;
  background-color: yellow;
}
</style>

<div class="bloc">
Un texte en taille normale (20px)<br><br>
  <span id="petit">Un texte dont la taille est deux fois plus petite</span><br><br>
  <span id="grand">Un texte dont la taille est moitié plus grande que la taille normale</span>
</div>

Un texte en taille normale (20px)

Un texte dont la taille est deux fois plus petite

Un texte dont la taille est moitié plus grande que la taille normale


<style>
#bloc1 {
  width: 450px;
  height: 180px;
  background-color: yellow;
}
#pave1 {
  width: 60%;
  height: 30px;
  margin-left: 10%;
  background-color: red;
}
</style>

<div id="bloc1">
  <div id="pave1"></div>
</div>