Mettre en forme un texte en CSS à travers des exemples clairs

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.

Somaire

Taille du texte

HTML & CSS

Nous avons vu dans un cour précédent la propriété CSS qui permet de changer la taille du texte qui est font-size.
Elle ne change pas. 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

Sélectionner 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 dans les balises concernées
Celons ce que vous souhaitez faire.

Exemple code HTML:
Sélectionner le code


	<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>
	
 

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 em : 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:
"1em" signifie "Taille normale".
Si vous mettez un nombre supérieur (généralement un nombre décimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande.
Pour réduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite.
C'est la méthode la plus recommandé.

Exemple: Code CSS

Sélectionner le code

	.petit-em
	{
	   font-size: 0.7em; 
	}
	.grand-em
	{
	   font-size: 1.3em; 
	}
	
 

Et bien sûre on doit déclarer les class petit-em et grand-em dans les balises concernées du code xhtml.

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 "em".
Les méthode des "em" et des % sont les plus pratiques : elles s'adaptent automatiquement aux préférences du visiteur et sont facile à utiliser.

Sélectionner le code

	.petit-em
	{
	   font-size: 70%; 
	}
	.grand-em
	{
	   font-size: 130%; 
	}
	
 
Par carabde 10 mars 2014

chapitre précédent chapitre suivant