« Le langage CSS/Texte » : différence entre les versions

Contenu supprimé Contenu ajouté
Ligne 17 :
=== <code>font-size</code> : taille des caractères ===
 
La propriété <code>font-size</code> 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#Distances et dimensions|Valeurs et unités]], les mot-clefs sont listés plus bas. Par exemple ces styles :
 
Par exemple ces styles :
p#t1 { font-size: 12px; }
<syntaxhighlight lang="css">
p#t2 { font-size: 1.5em; }
p#t3t1 { font-size: 175%12px; }
p#t2 { font-size: 1.5em; }
p#t1t3 { font-size: 12px175%; }
</syntaxhighlight>
 
avec le code HTML suivant :
<syntaxhighlight lang="css">
{{gris|&lt;p id{{=}}"t1">Paragraphe avec style #t1&lt;/p>}}
{{gris|&lt;<p id{{=}}"t2t1">Paragraphe avec style #t2&lt;t1</p>}}
{{gris|&lt;<p id{{=}}"t3t2">Paragraphe avec style #t3&lt;t2</p>}}
{{gris|&lt;<p id{{=}}"t1t3">Paragraphe avec style #t1&lt;t3</p>}}
</syntaxhighlight>
produisent ceci :
 
Ligne 36 ⟶ 43 :
 
On peut aussi utiliser des mot-clefs décrivant la taille de la police :
* de manière relative avec <code>larger</code> (plus grand) ou <code>smaller</code> (plus petit),
 
* de manière relativeabsolue avec <code>largerxx-small</code>, (plus<code>x-small</code>, grand)<code>small</code>, ou<code>medium</code>, <code>smallerlarge</code>, <code>x-large</code>, <code>xx-large</code>, dans l'ordre du (plus petit) au plus grand.
* de manière absolue avec <code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code>, 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 :