CSS prend en charge plusieurs unités de longueur. Elles peuvent être divisées en deux catégories principales : les unités de longueur absolue (définissant la longueur en dimensions absolues indépendantes du dispositif d'affichage) ; les unités de longueur relative (définissant la longueur par rapport aux autres unités connues du navigateur) ;
Les mesures de longueur absolue peuvent être mesurées en cinq unités : pouces (in), centimètres (cm), millimètres (mm), points (point, écrit en pt) et hauteur des caractères (pica, écrit en pc). La hauteur du point et du caractère est couramment utilisée comme unités typographiques, où 1pica=12pt. CSS définit 1pica comme 1/72in, c'est-à-dire 72pica=1in. C'est également la définition utilisée par le langage postscript d'Adobe, couramment utilisé par les imprimeurs de haute qualité.
CSS prend également en charge les longueurs « absolues » en pixels : les pixels sont un point sur un écran d'ordinateur. Cependant, en raison des différences de densité de pixels et du choix de la résolution d'affichage par l'utilisateur (le même écran d'affichage peut prendre en charge une résolution de 640*480 ou une résolution de 1024*768), la taille absolue des pixels variera selon les différents écrans. . Ainsi, la longueur en pixels dépend en réalité de l’affichage. L’avantage d’utiliser les pixels comme unités d’affichage d’ordinateur est que les pixels sont des unités strictement définies. Cependant, les unités de pixels peuvent poser des problèmes lors de l'impression de documents Web.
Les unités de longueur absolue telles que les pouces et les centimètres sont très utiles dans la mise en page d'impression car elles fournissent le positionnement absolu nécessaire pour disposer un document sur un papier de taille fixe. C'est pour cette raison que la longueur absolue ne doit pas être utilisée dans les documents à affichage électronique. En effet, l'affichage sera différent entre les écrans de 6 pouces * 4 pouces et 21 pouces de diagonale, et il n'y a aucune garantie que le navigateur affichera la même longueur sur une surface donnée. affichage. Les documents peuvent être affichés à l'aide d'une zone de fenêtre fixe (la taille de la fenêtre peut être sélectionnée par l'utilisateur). Compte tenu de ces différences, il convient d'utiliser des unités qui s'adaptent automatiquement à la taille de la zone d'affichage ou à la taille de la police du texte. Heureusement, il existe trois unités de longueur CSS qui permettent ce comportement.
Les mesures de longueur relative peuvent prendre trois formes : unités em, unités ex et pourcentage. Les unités em et ex définissent la longueur par rapport à la taille de la police. L'unité em définit la longueur par rapport à la taille réelle en points de la police : ainsi, si la taille de police actuelle est de 12 pt, alors 1,5em = 18 pt. En revanche, les unités ex définissent la longueur par rapport à la hauteur x de la police : c'est-à-dire par rapport à la hauteur de la lettre « x » dans la police actuelle. De cette manière, la taille ex d'une unité dépend à la fois de la taille de la police et du type de famille de polices, puisque la hauteur x réelle pour une taille de points donnée variera d'une famille de polices à l'autre.
Actuellement, les unités em sont plus fiables que les unités ex : pour une meilleure compatibilité entre les différents navigateurs, il est préférable d'utiliser des unités em. Mais sachez que les unités em et ex peuvent causer des problèmes d’impression.
L'unité de pourcentage est la troisième unité relative. Cette unité définit la longueur en pourcentage de la longueur relative. Selon la spécification CSS, la longueur pertinente est soit la taille de la police de l'unité parent, soit la largeur de l'unité de format parent - chaque cas varie en fonction des caractéristiques de la question. Il y a une mise en garde extrêmement importante : les navigateurs existants ne calculent pas les valeurs en pourcentage par rapport à la largeur des cellules et n'implémentent donc pas correctement les longueurs en pourcentage. Au lieu de cela, tous les navigateurs calculent la longueur en pourcentage indépendante de la police en pourcentage de la largeur totale de la fenêtre du navigateur.
Le format de la valeur de longueur se compose d'un signe ("+" ou "-", la valeur par défaut est "+") suivi d'un nombre puis d'un identifiant d'unité (une abréviation à deux caractères). Il existe deux formes d'unités de longueur : les unités relatives et absolues. Les feuilles de style utilisent des unités relatives pour faciliter le contrôle de la mise à l'échelle d'un support à un autre (par exemple, d'un ordinateur à une imprimante laser). Les unités de pourcentage et les valeurs clés (telles que « x-large ») présentent les mêmes avantages. comme suit:
H1 { margin : 0,5em } hauteur de la police de l'élément
H1 { margin: 1ex } La hauteur de la lettre « x »
en unités de pixels par rapport à la résolution graphique de l'écran. Si la densité de pixels du périphérique de sortie diffère considérablement de celle d'un écran d'ordinateur standard, l'utilisateur redimensionnera les valeurs de pixels. La valeur de pixel recommandée est de 90 dpi à bout de bras du lecteur. Les éléments enfants héritent de la valeur du résultat calculé au lieu de la valeur relative, par exemple :
BODY {
taille de police : 12 pts ;
retrait du texte : 3em ;
}
H1 { font-size: 15pt }
Dans l'exemple ci-dessus, la valeur 'text-indent' de 'H1' est de 36 pt, et non de 45 pt.
==================================
Balise em --balise d'accentuation
* Les balises em apparaissent par paires, avec Commencez par
* Propriétés:
* Commun – propriétés générales
* em est l'abréviation de accentuation