• CSS - Mise en forme de texte

    La première chose à laquelle on pense, c'est le texte.
    Voyons les différentes propriétés qui servent à le mettre en forme.

    Les propriétés de police

    font-family: valeur;

    La première chose à faire pour formater du texte, c'est indiquer une police de caractères. Cela se définit par la propriété font-family. La valeur possible est le nom d'une police. Contentez-vous d'utiliser les polices de base, qui seront lisibles par tous vos visiteurs :

    "Times New Roman" - Arial - "Trebuchet MS" - Verdana - Geneva - sans-serif

    Ici, on met comme valeur un nom spécifique de fonte, tel qu'il apparaît dans votre traitement de textes. Les noms de polices qui comportent une espace devront être mis entre guillemets. Vous pouvez mettre plusieurs noms, séparés par une virgule ( , ) ; ceci permettra à votre visiteur, s'il n'a pas la première fonte de la liste, d'utiliser la seconde... jusqu'à la fin de la liste.

    Pour vous assurer que vos visiteurs "verront" votre texte, mettez au moins une fonte générique à la fin de votre liste :

    serif - sans-serif - cursive - fantasy - monospace.

    Note : sachez rester sobre dans le choix de vos polices.

    Exemples :

    Code:
    font-family: "Trebuchet MS", Arial, Verdana, Geneva, sans-serif;
     
    font-family: "Times New Roman", serif;
    font-size: valeur;

    Avec cette propriété, vous choisirez la taille de votre police. La liste des valeurs est longue, je me contenterai de vous mettre les valeurs les plus courantes :

    pt
    px

    Une taille en points (pt), c'est celle à laquelle vous êtes habitués dans votre traitement de textes.
    Une taille en pixels (px), par comparaison, une taille de 14px équivaut à peu de chose près à 12pt.
    Les pixels vous permettent d'aller beaucoup plus loin que les points. Car les polices sont souvent limitées à 72pt.
    Alors qu'en pixels, vous pouvez aller jusqu'où vous voulez. Bon, n'abusez pas quand même !

    On est très loin des tailles de 1 à 7 du html, hein ?

    Exemple :

    Code:
    font-size: 14px;
    font-style: valeur;

    Vous allez appliquer un style à votre texte. Les valeurs possibles sont trois :

    normal
    italic
    oblique

    normal est la valeur par défaut.
    italic donne un texte en italique.
    oblique donne le même résultat que la précédente (certains navigateurs ne prennent même pas cette valeur en compte et l'affichent en normal).

    Exemple :

    Code:
    font-style: italic;
    font-weight: valeur;

    Cette propriété définit la graisse de votre texte. Les valeurs possibles sont :

    normal
    bold

    lighter
    bolder

    100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900

    normal est la valeur par défaut.
    bold donne un texte en gras.

    lighter et bolder donneront respectivement un texte moins gras et plus gras que le texte où se trouvera appelée la classe. En réalité, après maints essais, je n'ai jamais vu aucune différences entre bold et bolder. Donc je n'utilise plus bolder. Il en est de même pour lighter.

    100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900. Théoriquement, ces valeurs permettent de définir plus souplement une valeur de graisse. Le 400 correspond à du texte "normal" et 700 à du texte "bold". En fait, les navigateurs interprètent très mal ces valeurs. Elles ne sont donc pas d'une grande utilité.

    Exemple :

    Code:
    font-weight: bold;
    font-variant: valeur;

    Cette propriété vous permettra d'afficher une petite portion de texte en petites capitales. N'en abusez surtout pas, car elle peut devenir très fatiguante à la vue. Limitez cet effet à quelques titres. Valeurs possibles :

    normal
    small-caps

    Pas besoin d'explication, c'est soit l'un, soit l'autre.

    Exemple :

    Code:
    font-variant: small-caps;
    Les autres propriétés de texte

    text-align: valeur;

    Cette propriété va vous servir pour aligner votre texte. Valeurs possibles :

    left
    right
    center
    justify

    left est l'option par défaut et donne du texte aligné à gauche.
    right donne du texte aligné à droite.
    center vous permet de centrer votre texte.
    justify vous donne du texte aligné à la fois à gauche et à droite, en jouant sur les espaces entre les mots.

    Exemple :

    Code:
    text-align: center;
    text-decoration: valeur;

    Cette propriété sert à "décorer" votre texte. Valeurs possibles :

    none
    underline
    overline
    line-through
    blink

    none est l'option par défaut.
    underline soulignera votre texte.
    overline mettra une ligne au-dessus de votre texte.
    line-through barrera votre texte.
    blink permet de faire clignoter votre texte. Cette valeur n'est plus à utiliser et les navigateurs ne la prennent en compte que très rarement.

    Exemple :

    Code:
    text-decoration: underline;
    color: valeur;

    Cette propriété sert à mettre votre texte en couleur. Sa valeur peut être de trois sortes :

    un nom de couleur (ex.: black; white; blue; ...)
    une valeur hexadécimale (ex.: #000000; #ffffff; #0000ff; ...)
    un code RGB (ex.: rgb(0,0,0); rgb(255,255,255); rgb(0,0,255); ...)

    Les trois types de valeurs ci-dessus vous donnent dans l'ordre : du noir, du blanc, du bleu.
    Les noms de couleurs sont très précis et peu nombreux (il en existe environ 140).
    Une valeur hexadécimale est la plus usitée dans le monde CSS et html.
    Un code RGB peut être très précieux quand on ne connaît pas la valeur hexadécimale d'une couleur. Il faut noter toutefois que la plupart des logiciels de retouche d'images permet d'avoir la valeur hexadécimale de toute couleur RGB.

    Exemple :

    Code:
    color: #008080;
    Voici maintenant un exemple complet de classe pour gérer un texte :

    Code:
    p {
    font-family: "Trebuchet MS", Arial, Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-align: justify;
    text-decoration: none;
    color: #000000;
    margin-left: 50px;
    margin-right: 20px;
    }
    font-style et font-weight étant à leur valeur par défaut, il est inutile de les mettre en théorie. Mais n'oubliez pas la question d'héritage. Ici, il s'agit de la redéfinition de la balise <p>, la balise <body> est au-dessus, et si elle a été redéfinie avec un font-weight: bold; le texte du paragraphe restera en bold si la propriété n'est pas redéfinie à normal ici.
  • Donations Dons

    Si vous aimez ce site et que vous souhaitez nous supporter, vous pouvez effectuer un don. Tous les dons sont gracieusement acceptés.

    Indiquez la valeur souhaitée au format « xx.xx ».


    Sélectionnez votre monnaie et le montant du don que vous souhaitez effectuer, puis cliquez sur l'image ci-dessous.

  • Horloge

  • Calendrier

    Mars   2024
    Di Lu Ma Me Je Ve Sa
    1 2
    3 4 5 6 7 8 9
    10 11 12 13 14 15 16
    17 18 19 20 21 22 23
    24 25 26 27 28 29 30
    31
  • Derniers mods Derniers mods

    [Additions majeures] - vbBux &...
    - par Dadoo

    [Chat] - Demande de...
    - par lasilix

    [Portails] - vBadvanced...
    - par Dadoo

    [Additions majeures] - Librairie de...
    - par Dadoo

    [Additions majeures] - microNEWSLETTER...
    - par Dadoo

    [Additions majeures] - Tournois &...
    - par Dadoo

    [Additions majeures] - Clavier Virtuel
    - par Greggg

    [Outils d'administration] - Envoyer un...
    - par Greggg

    [Outils de modération] - Outils de...
    - par Greggg

    [Add-ons] - Copyright...
    - par Greggg