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.
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 :
Exemple : Copier 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
Exemple : Copier 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; }
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 :
Exemple : Copier le code
p { font-weight: bold; }
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 :
Exemple : Copier 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
Exemple : Copier 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 :
Exemple : Copier 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!
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
Exemple : Copier 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
Exemple : Copier 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
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENT