Mettre en forme un texte en CSS: Taille du texte

Hébergement de sites Internet


Recevez 1000 visiteurs par jour en provenance de Google
Téléchargez gratuitement notre guide explicatifgagner argent

Mettre en forme un texte en CSS




Formation Affiliation Flash

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



Taille du texte


Nous avons vu dans un cour précédent la propriété CSS qui permet de changer la taille du texte 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 

	.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; 
	}

Avidement, 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 XHTML: 

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

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



Cours precedent:
cours precedent  Utiliser les class et id


Accueil du site

 Cours suivant:
Choix de polices    cours suivant



location serveurs hébergeur de sites internet en France










purchase text links



    Active Search Results     Référencé dans l'Annuaire Mirti          Image     annuaire de france