oujood.com

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

Les feuilles de styles CSS - Tutoriel pour mettre en forme un texte.Donner un style aux textes (gras italique etc.)
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.

search |

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



Trafic Booster
hebergement web


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Tutoriel AJAX

Tutoriel AJAX : AJAX est l'art de l'échange de données avec un serveur et les parties de la mise à jour d'une page web - sans recharger la page entière.

overflow

Spécifie ce qui se passe si les débordements contenu d'un élément boîte

Balise th

Définit une cellule d'en-tête dans un tableau



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci