Trouver son code couleur HTML : Facile :-) - code css
Mettre en forme un texte en CSS

Trouver son code couleur html !

Les couleurs avec du CSS sont les mêmes que celles avec un code HTML.
Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. C'est bien sûr un peu moins parlant mais universel.

Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici

Il existe des couleurs nommées normalisées :

Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs :

#00FFFF
Aqua
#000000
Black
#0000FF
Blue
#FF00FF
Fuchsia
#808080
Gray
#008000
Green
#00FF00
Lime
#800000
Maroon
#000080
Navy
#808000
Olive
#800080
Purple
#FF0000
Red
#C0C0C0
Silver
#008080
Teal
#FFFFFF
White
#FFFF00
Yellow

Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal :

Couleur HTML et CSS

code css En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style.

  1. color: Gestion de la couleur du texte
  2. letter-spacing: Espace entre les lettres
  3. text-align: Alignement d'un texte
  4. text-decoration: Habiblement d'un texte

A savoir : Dans ce chapitre, la notion d'héritage est appliquée. (voir notion d'héritage sur ce lien)

Couleur d'un texte ou une phrase en CSS

Vous pouvez fixer la couleur d'un texte comme suivant : color: valeur; Les différentes valeurs sont :

  1. Nom de la couleur - exemple:(red, black...)
  2. Nombre hexadecimal - exemple:(#ff0000, #000000)
  3. Code RGB - exemple:(rgb(255, 0, 0), rgb(0, 0, 0))

Voir un exemple :
Voici un texte en bleu Voir le code CSS :
.bleutext{ color: #336699; } Voir le code dans l'élément
<span class="bleutext">Voici un texte en bleu</span>

Espace entre les lettres

code CSS Vous pouvez ajuster les espaces entre les lettres dans un texte.
Vous pouvez mettre une valeur négative. letter-spacing: valeur; Les valeurs possibles sont :
  1. normal
  2. une valeur en px

Voir un exemple :
Voici des lettres espacées de 5px
Voir le code CSS :
.espace5px{ letter-spacing: 5px; } Voir le code dans l'élément
<span class="espace5px">Voici des lettres espacées de 5px</span>

Alignement d'un texte

code CSS
Vous pouvez ajuster la position d'un texte : text-align: valeur; Les valeurs possibles sont :
  1. Gauche
  2. droite
  3. centre
  4. justifié
Voir un exemple :

Ce texte est aligner à gauche.
Ce texte est aligner centre.
Ce texte est aligner à droite.
Ce texte est aligner justifier.

Voir le code CSS :

.align_left{ text-align: left; }
.align_right{ text-align: right; }
.align_center{ text-align: center; }
.align_justify{ text-align: justify; }

Voir le code dans l'élément

<span class="align_left">Ce texte est aligner à gauche.</span>
<span class="align_center">Ce texte est aligner centre.</span>
<span class="align_right">Ce texte est aligner à droite.</span>
<span class="align_justify">Ce texte est aligner justifier.</span>

Décoration du texte

code CSS Vous pouvez habiller (barré, souliger...) un texte comme suivant : text-decoration: valeur;
Les valeurs possibles sont :
  • none (rien)
  • underline (souligner
  • overline (ligne au dessus)
  • line through (barrer)
  • blink (clignoter)

Voir un exemple :
ce texte est souligner.
Texte barré
Il ya une ligne au dessus de ce texte.
Voir le code CSS :
.underline { text-decoration:underline; }
.overline { text-decoration:overline; }
.line_through { text-decoration:line-through; }
.blink { text-decoration:blink; }
Voir le code dans l'élément
<div class="underline">ce texte est souligner.</div>
<div class="line_through">Texte barré</div>
<div class="blink">Ce texte cligniote (ne marche pas avec internet explorer).</div>
<div class="overline">Il ya une ligne au dessus de ce texte.</div>
Suite sur la gestion d'un texte en CSS >>>

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page http://www.cssdebutant.com/coder-en-css-couleur-espace-alignement-texte.html Votes: 4 / 5 étoiles - 46 vote(s) et 10 commentaires