Partout Les forums Les lexiques Les tutoriaux

Apprendre les langages du web c'est si simple avec nous

Le texte - XwZ

Ce tutorial traite des différentes mises en page du texte.
Tout d'abord la balise de mise en forme d'un texte, la balise <span ...></span> et je vais aussi vous présenter vôtre première notion CSS (feuille de style).
Comment s'en servir ?
Tout d'abord il faut définir une classe CSS ici ça sera une classe nommé style1 :

<style>
.style1 {
  color: la_couleur_du_texte;
  background: la_couleur_de_l'arrière plan;
  font-familly: 3_nom_de_police;
  font-weight: bold/none;
  font-style: italic/none;
  text-decoration: underline/none;
  font-size: taille_d'écriture;
}
</style>

Remarque : Il faut placer ce code entre les balises header.
Et maintenant la balise <span> :

<span class="style1">le texte ici</span>

Explication :
-> color : La couleur peut-être désignée de trois façons différentes :
---> littéralement avec le nom anglais de la couleur (exemple: blue = blue, bleu foncé = darkblue)
---> ou alors avec les valeurs hexadécimales rvb (exemple : blanc = (r=255,v=255,b=255) #FFFFFF, noir = (r=0,v=0,b=0) #000000). Certains logiciels de traitements d'images donnent les noms des couleurs en "HTML".
---> Si vous n'avez pas la possibilité de voir le nom sous forme hexadécimale, vous pouvez utiliser une fonction : rgb( ) qui est très utile pour les couleurs personnalisées. Le fonctionnement est simple, il suffit de mettre : rgb(taux de rouge en naturel , taux de vert en naturel , taux de bleu en naturel).

-> background : pour la couleur du background, c'est le même principe que color mais on peut mettre une image à la place d'une couleur. Pour cela il faut utiliser la fonction url( ) à l'intérieur des parenthèses, il faut le chemin de l'image.

-> font-familly : on peut mettre 3 noms de police d'écriture sachant que la première sera celle utilisée, mais si le navigateur ne la trouve pas il utilisera alors la deuxième et s'il ne la trouve toujours pas il utilisera alors la troisième.

-> font-weight : pour mettre le texte en gras il faut mettre "bold" et si vous ne le voulez pas en gras ne mettez pas font-weight ou alors mettez "none"

-> font-style : pour mettre le texte en italique il faut mettre "italic" et si vous ne le voulez pas en italique, mettez pas de font-style ou alors mettez "none"

-> text-decoration : pour souligner un texte il faut mettre "underline" et si vous ne le voulez pas souligné mettez pas de text-decoration ou alors mettez "none"

Les commentaires :