Cours / Tutorials CSS - Les textes
Dans le détail : les textes
Bon d'accord, ce n'était pas si simple de vous laisser vous débrouiller seul. L'idée était de vous faire réfléchir un peu parce qu'il me semble que c'est plus facile de retenir de cette manière que si vous lisez tout. Certains sites vont vous donner une liste de tout ce qu'il est possible de faire en vous disant de la consulter au besoin. Il me semble que c'est une perte de temps pour la suite. Il vaut mieux les apprendre par la pratique et avec un petit peu d'aide de l'intellisense, vous n'en serez que plus efficace et productif.
Ceci dit, vous êtes peut-être passé à coté de quelques points importants. Nous allons donc les voir ici. Les CSS permettent une infinité de combinaisons que vous allez avoir tout le temps de découvrir au fil de votre apprentissage puis de vos recherches. Comme d'habitude, nous ne verrons pas tout ce qui peut être fait mais l'essentiel vous permettant d'avancer sans difficulté.
La taille des caractères
Nous avons vu la manière la plus courante de sélectionner une couleur. Nous allons maintenant voir la plus courante de sélectionner la taille d'une police de caractère. Cette sélection va se faire en pixels. Le pixel est un petit carré de votre écran. Si votre résolution est de 1024 x 768, cela veut dire que votre écran est divisé en 1024 pixels sur la largeur et 768 sur la hauteur. Plus cette résolution est grande, plus les pixels sont petit et meilleure est votre définition (qualité) d'image. Lorsqu'un texte fait "du 16 pixels de haut", cela veut dire qu'il prend 16 des petits carrés de votre écran dans la hauteur. Si votre résolution est basse, un texte de 16 pixels paraitra donc plus gros que dans une résolution élevée. Vous allez avoir, au fil des prochains cours, l'occasion de mieux appréhender tout cela.
En CSS, la taille d'un caractère va donc se noter avec un nombre suivi des lettres "px" SANS ESPACE, dans l'attribut "font-size". Par exemple, nous avons vu précédemment que l'on pouvait changer la taille des caractères dans un paragraphe :
p
{
font-size:13px;
}
Les attributs les plus courants
p
{
font-family:Verdana, Tahoma;
font-size:14px;
font-style:italic;
font-weight:bold;
text-align:center;
text-decoration:underline;
text-indent:20px;
text-transform:capitalize;
color:#000000;
letter-spacing:2px;
line-height:3px;
}
font-family permet de sélectionner une police. Dans l'exemple ci-dessus, la police préférée sera verdana. Si elle est introuvable, le navigateur cherchera alors la police tahoma. En effet, lorsque vous créez votre page, vous pensez souvent pouvoir utiliser la police de votre choix. Il ne faut pas. Pensez que tout le monde n'a pas forcément vos polices. Tenez-vous en aux typos (autre nom pour police) les plus courantes : Arial, Tahoma, Verdana, Impact, Arial Black, Courrier New, Trebuchet MS et Times New Roman qui sont, cela tombe bien, des plus faciles à lire sur un écran.
font-size est déjà vu. Cela pemet de définir la taille de votre police pour la balise donnée. Plus tard, nous verrons qu'il est possible de sélectionner des tailles relatives les unes aux autres. C'est ce qui vous sera conseillé pour ce que nous appellerons l'accessibilité.
font-style permet de changer le style d'un caractère. Il peut-être italic, normal ou oblique. Par défaut, il est "inherit", ce qui veut dire qu'il hérite du style de la balise supérieur dans la hiérarchie (sauf pour des balises comme "<i>".
font-weight change l'épaisseur de la typo. Elle peut être bold (gras), bolder, lighter, normal ou 100, 200, 300, 400, 500 et 600.
text-align permet de changer l'alignement du texte dans son bloc (avec ce que nous avons vu pour l'instant, sur la page). Il peut être left (gauche), right(droite), center (centre) ou justify (aligné à gauche et à droite).
text-decoration permet de "décorer" votre texte en le soulignant par exemple. Nous utilisons généralement underline ou none.
text-indent permet d'indenter une balise. Par exemple, un paragraphe indenté de 20px sera décalé des autres vers la droite 20 pixels.
text-transform peut être capitalize(capitale, tout en majuscule), uppercase (les premières lettres de chaque mot en majuscule), lowercase (tout en minuscule) ou none (reste tel qu'il est tapé).
letter-spacing vous permet d'augmenter ou réduire l'espacement entre les lettres, souvent noté en pixels (2px par exemple)
line-height vous permet de choisir une hauteur de ligne. Avec un ligne height important dans un paragraphe, il y aura plus d'espace entre chaque ligne.
Enfin, color permet de changer la couleur du texte, comme nous l'avions déjà vu.
Maintenant que vous avez vu tout ça, retournez faire des essais !
>>> Retour au cours "premiers pas" >>>