Renvoie une chaîne en majuscules
Il est possible de faire beaucoup pour ajouter de la personnalité et améliorer la lisibilité du contenu d'un site Web. Voici un cours pour en savoir plus sur le choix des polices et de la typographie pour le Web
Gestion des polices, en CSS (feuille de style): Mettre en forme un texte en CSS à travers des exemples clairs.
Quelles sont les propriétés CSS pour formater du texte avec des mentions sur la police, la taille de police, la couleur de police etc...
Dans ce chapitre on va voir comment définir la taille du texte.
Nous avons vu dans un cours précédent la propriété CSS qui permet de changer la taille du texte qui est font-size.
C'est toujours la même. Mais on peut indiquer la taille du texte de quatre manières :
1• En pixels : C'est une façon précise d'indiquer la taille du texte.
Pour avoir un texte de 16 pixels de hauteur, vous devez écrire :
font-size:16px;
2• En donnant une valeur relative : En écrivant "gros", "très gros", "petit", "minuscule". Mais bien sur en anglais.
Voici la liste des différentes valeurs :
• xx-small : minuscule
• x-small : très petit
• small : petit
• medium : moyen
• large : grand
• x-large : très grand
• xx-large : euh... gigantesque
Exemple:
Code CSS à metre dans la balise <style></style> ou dans votre feuille de style:
Exemple : Copier le code
.minuscule{
font-size: xx-small;
}
.trespetit{
font-size: x-small;
}
.petit{
font-size: small;
}
.moyen{
font-size: medium;
}
.grand{
font-size: large;
}
.tresgrand{
font-size: x-large;
}
.supermegagigatresgrand{
font-size: xx-large;
}
Evidement, vous devez déclarer les class (minuscule, trespetit,petit,moyen etc...) dans le code html des balises concernées
Celons ce que vous souhaitez faire.
Exemple code HTML:
Sélectionner le code
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Taille du texte en css</title>
<style>
.minuscule{
font-size: xx-small;
}
.trespetit{
font-size: x-small;
}
.petit{
font-size: small;
}
.moyen{
font-size: medium;
}
.grand{
font-size: large;
}
.tresgrand{
font-size: x-large;
}
.supermegagigatresgrand{
font-size: xx-large;
}
</style>
</head>
<body>
<body>
<p class="minuscule">Texte en xx-small</p>
<p class="trespetit">Texte en x-small</p>
<p class="petit">Texte en small</p>
<p class="moyen">Texte en medium</p>
<p class="grand">Texte en large</p>
<p class="tresgrand">Texte en x-large</p>
<p class="supermegagigatresgrand">Texte en xx-large</p>
</body>
</body>
</html>
Utilisez surtout cette méthode pour indiquer la taille du texte plutôt que d'utiliser des pixels.
Votre site sera bien adaptable aux différentes configurations de vos visiteurs.
3• En rem : c'est une façon d'indiquer de manière relative la taille du texte. C'est une méthode pratique.
On doit indiquer la taille du texte par rapport à la taille normale de la police. C'est à dire:
"1rem" signifie "Taille normale".
Si vous mettez un nombre supérieur comme par exemple "1.3rem", le texte aura une taille 1,3 fois plus grande que la taille normale.
Pour réduire la taille du texte on met par exemple: "0.8rem" et votre texte aura une taille 0,8 fois plus petite.
C'est la méthode la plus recommandé.
on peut aussi utiliser em à la place du rem
Rem et em sont tous deux des unités de taille évolutives, mais avec em, l'unité est relative à la taille de la police de son élément parent, tandis que l'unité rem est uniquement relative à la taille de la police racine du document body ou html.
Exemple: Code CSS
Exemple : Copier le code
.petit-rem{
font-size: 0.7rem;
}
.grand-rem{
font-size: 1.3rem;
}
Et bien sûre on doit déclarer les class petit-rem et grand-rem dans les balises concernées du code html.
4• En pourcentage : Si vous indiquez "100%", le texte aura une taille "normale".
Si vous mettez "130%", le texte aura une taille correspondant à 130% de la taille normale. C'est comme "rem".
Les méthode des "rem" et des % sont les plus pratiques : elles s'adaptent automatiquement aux préférences du visiteur et sont facile à utiliser.
Exemple : Copier le code
.petit-taille{
font-size: 70%;
}
.grand-taille{
font-size: 130%;
}
Par carabde 10 mars 2014 mis à jour 08 janvier 2022chapitre précédent chapitre suivant