Effet de style mettre un texte en gras et|ou en italique

On a vu dans les chapitres précédents comment choisir une police de caractére et aligner un texte. dans ce chapitre on va voir comment donner un effet se style à un texte c'est à dire mettre le texte en gras ou en italique.

Somaire

Effet de style gras, italique, majiscule ou miniscule

Mettre en italique

Pour mettre en italique en CSS on utilise font-style, qui peut prendre 3 valeurs :
italic : le texte sera mis en italique.
oblique : le texte sera mis en italique, "italic" et "oblique" reviennent au même. Choisissez donc l'un des deux
normal : le texte sera normal (par défaut). Si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :
Code CSS :

Sélectionner le code

	em
	{
	   font-style: normal; 
	}
	
 

Sur l'exemple suivant, je me sers par exemple de font-style pour mettre en italique tous mes titres <h2> :
Code : CSS

Sélectionner le code

	 h1
	{
	   text-align: center; 
	   font-family: Arial, "Times New Roman", Verdana, serif; 
	}
	h2
	{
	   font-style: italic; /* Les titres h2 seront en italique ! */
	   text-indent: 30px; /* On décale un peu les sous-titres */
	  font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif; 
	}
	
 

Mettre en gras

En CSS pour mettre en gras on utilise la propriété: font-weight,
elle prend les valeurs suivantes :
bold : le texte sera en gras.
normal : le texte sera écrit normalement (par défaut).
Exemple:Code CSS :

Sélectionner le code

	p
	{
	   font-weight: bold; 
	}
	
 

Les majuscules en CSS

Le CSS permet d'appliquer des effets très intéressants sur du texte,
pour modifiant automatiquement les majuscules.
Il y a 2 propriétés qui travaillent sur les majuscules.
1. la propriété font-variant, elle prend 2 valeurs différentes :
small-caps : le texte sera écrit en petites capitales.
normal : le texte sera écrit normalement (par défaut).
Code CSS :

Sélectionner le code

	p
	{
	   font-variant: small-caps; 
	}
	
 

2. La propriété text-transform. Elle peut prendre 4 valeurs :
uppercase : tout le texte sera écrit en majuscules.
lowercase : tout le texte sera en minuscules.

capitalize : la première lettre de chaque mot sera en majuscule.
none : pas de transformation (par défaut).
Je me sers des class .

Code : HTML

Sélectionner le code

	<h1>Racisme</h1>
	<p>...Ton christ est juif, ta pizza est italienne, <br />
	ton café est brésilien, ta voiture est japonaise, <br />
	<span class="crier">ton écriture est latine,<br />
	tes vacances sont turques, tes chiffres sont arabes et...<br />
	</span></p>
	<p class="ne_dites_rien">
	TU REPROCHE A TON VOISIN D'êTRE éTRANGER<br />
	CE PARAGRAPHE  EST éCRIT EN MAJUSCULES
	</p>
	
 

Code CSS :

Sélectionner le code

	h1
	{
	   text-align: center; 
	   font-family: Arial, "Times New Roman", Verdana, serif; 
	   text-transform: capitalize; 
	}
	.crier
	{
	   text-transform: uppercase; 
	}
	.ne_dites_rien
	{
	   text-transform: lowercase; 
	   font-style: italic; 
	}
	
 

Cette propriété text-transform est pratique pour changer l'apparence de tout le texte!

Décoration

Cette propriété CSS : text-decoration porte bien son nom
Elle permet, entre autres, de souligner le texte. Voici les valeurs qu'elle peut prendre :
underline : souligné.
line-through : barré.
overline : ligne au-dessus.
blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs.
none : normal (par défaut).
Ce CSS va vous permettre de tester les effets de text-decoration :
Code : CSS

Sélectionner le code

	 h1
	{
	   text-align: center; 
	   font-family: "Arial Black", Arial, "Times New Roman", serif; 
	   text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas sous Internet Explorer) */
	}
	.souligne
	{
	   text-decoration: underline; 
	}
	.barre
	{
	   text-decoration: line-through; 
	}
	.ligne_dessus
	{
	   text-decoration: overline; 
	}
	
 

Le XHTML qui va avec :
Code : HTML

Sélectionner le code

	<h1>A ne pas manquer !</h1> 
	<p>La propriété CSS <em>text-decoration</em> permet de décorer son texte 
	<br />
	<span class="souligne">et le souligne</span>...<br />
	<span class="barre">et le barre</span>...<br />
	et même  <span class="ligne_dessus"> mettre une ligne au-dessus</span>
	</p>
	
 

On peut créer des class combinant des styles, comme par exemple qui souligne le texte, le met en gras, et l'écrit en plus gros


chapitre précédent chapitre suivant