Css langage

Disponible uniquement sur Etudier
  • Pages : 13 (3174 mots )
  • Téléchargement(s) : 0
  • Publié le : 24 décembre 2010
Lire le document complet
Aperçu du document
Les caractères
[modifier] font-size : taille des caractères
La propriété font-size permet de modifier la taille des caractères. On peut utiliser une unité de distance ou un mot clef se référant à une taille prédéfinie dans le navigateur web ou modifiant une taille héritée d'un élément parent. Les unités utilisables sont répertoriées dans le chapitre Valeurs et unités, les motclefs sont listésplus bas. Par exemple ces styles :
p#t1 { font-size: 12px; } p#t2 { font-size: 1.5em; } p#t3 { font-size: 175%; }

avec le code HTML suivant :
Paragraphe avec style #t1 Paragraphe avec style #t2 Paragraphe avec style #t3

produisent ceci :
Paragraphe avec style #t1

Paragraphe avec style #t2

Paragraphe avec style #t3
On peut aussi utiliser des mot-clefs décrivant la taille de la police:
• •

de manière relative avec larger (plus grand) ou smaller (plus petit) de manière absolue avec xx-small, x-small, small, medium, large, x-large, xx-large, dans l'ordre du plus petit au plus grand

Dans le premier cas la taille est relative à celle spécifiée pour un parent et dans le second cas la taille correspond à une valeur prédéfinie dans le navigateur. Exemple ces styles :
div {font-size: medium; } p { font-size: smaller; }

produisent ceci lorsqu'on imbrique le p dans le div :
Texte hors du paragraphe Texte dans le paragraphe

Texte hors du paragraphe
Texte dans le paragraphe [modifier] Spécificités à connaître 1. Les Internet Explorer 5.0 à 7.0 de Microsoft ne permettent pas à l'utilisateur de modifier la taille de la police affichée lorsque l'unité utilisée estle pixel. De ce fait il est recommandé pour des raisons d'accessibilité de ne jamais spécifier de tailles de police en pixels pour permettre d'agrandir le texte.

2. La taille relative small correspond généralement à 16 pixels dans Internet Explorer et à 12 pixels dans les autres navigateurs. Il est donc peu recommandé à nouveau d'utiliser ce genre de spécification, à moins d'utiliser unefeuille de style spéciale pour Internet Explorer.

[modifier] color : couleur des caractères
La propriété color définit la couleur des caractères. Par défaut celle-ci est héritée du parent. Pour la changer, il faut utiliser une valeur de couleur selon les possibilités indiquées dans le chapitre Valeurs et unités. Exemple :
em {color: #800;} span {color: #004580;}

Rend ces couleurs :
Texte emet texte span

Texte em et texte span

[modifier] Gras, italique
[modifier] font-style La propriété font-style permet de passer en texte italique ou de revenir en texte droit, lorsqu'on est déjà dans un passage en italique. Les différentes valeurs possibles sont les suivantes :
• • • normal, texte normal italic, texte en italique oblique

La police utilisée doit avoir une variantecorrespondant à chaque valeur de cette propriété. Aussi, comme bien souvent la variante oblique n'existe pas, on se contentera des deux premières valeurs. Par exemple ceci :
strong {font-style: italic;} em {font-style: normal;}

donne :
Texte strong et texte em

Texte strong et texte em NB: le style standard de strong est caractères gras et celui de em est caractères en italique. [modifier]font-weight La propriété font-weight définit la graisse de la police. Les valeurs possibles sont :
• • • • • normal, texte normal bold, texte gras bolder lighter

une valeur entre 100 et 900 par pas de 100

À nouveau seules les deux premières valeurs sont utiles car les navigateurs ne proposent aujourd'hui pas de graisse variable. Par exemple ceci :
strong {font-weight: normal;} em {font-weight:bold;}

donne : Texte strong et texte em NB: le style standard de strong est caractères gras et celui de em est caractères en italique.

[modifier] text-decoration : souligné, surligné, barré
La propriété text-decoration permet d'ajouter un trait au texte. Les valeurs possibles sont :
• • • • none, texte normal underline, texte souligné overline, texte surligné line-through, texte barré...
tracking img