En spécifiant Taille et Position avec CSS - les nuls

Dans une définition de style CSS (ou rule ), vous pouvez décrire les positions et les tailles, en utilisant peut différentes unités de mesure. Vous pouvez souvent choisir l'unité que vous voulez, bien que certaines mesures spécifiques fonctionnent mieux dans certaines situations.

Par exemple, de nombreux concepteurs travaillant avec du papier et de l'encre sont utilisés pour spécifier des polices de caractères en points . Un point est une longueur absolue: 1/72 de pouce. L'utilisation de spécifications absolues de taille de caractères pour un magazine ou un livre fonctionne parfaitement - après tout, l'utilisateur ne peut pas réduire, étirer ou modifier le format d'une page dans un livre. ( Le rapport d'aspect est le rapport entre la hauteur et la largeur.) Les navigateurs peuvent être redimensionnés à volonté. Si vous faites glisser un côté d'un navigateur, vous le modifiez, ce qui le rend plus mince ou plus épais. En d'autres termes, vous changez sa forme, son rapport d'aspect, par exemple, d'un carré à un rectangle.

Pour les polices affichées dans un navigateur, une unité de mesure relative est supérieure aux points traditionnels. Contrairement aux mesures absolues telles que les points ou les pouces, une unité relative s'adapte aux tailles de police. Par conséquent, vous obtenez des résultats plus prévisibles dans les pages Web avec des unités de mesure relatives spécifiant la taille du type. Une unité de mesure relative utile pour un concepteur Web est le em . Bien que le em soit utile, en pratique, la plupart des concepteurs utilisent encore des points ou des pixels lors de la spécification de la taille du type. Peut-être que c'est juste la force de l'habitude, mais en tout cas les résultats semblent généralement bien dans la plupart des navigateurs.

Longueur de mesure

Ici, ils sont en un mot … toutes les unités qui mesurent la longueur:

• px (pixels): Les pixels sont la plus petite unité d'un affichage - les points vous pouvez parfois voir si vous vous approchez suffisamment de la télé. Par exemple, si vous définissez la résolution de votre moniteur sur 800 × 600, cela signifie que la résolution est de 800 pixels de large sur 600 pixels de haut.
Les pixels peuvent être un moyen utile de spécifier la taille de police, mais l'inconvénient est que si vous spécifiez des pixels, cela remplace l'option de taille de police personnalisée dans Internet Explorer - les utilisateurs ne peuvent pas passer de "grand" à "plus grand".. Cependant, vous devez toujours utiliser px pour décrire les tailles image . Images déjà mesurables en pixels (vous pouvez voir les mesures en chargeant l'image dans n'importe quelle application graphique).

• pt (points): Un point est égal à 1/72 de pouce. Les points (et les picas) sont des mesures de caractères classiques. La plupart des navigateurs utilisent par défaut une police serif de 12 points.
• pc (picas): Un pica équivaut à 12 points.
• mm (millimètres): Un millimètre est.0394 pouces, donc un pouce contient environ 26 millimètres. Un centimètre contient 10 millimètres. Une grande partie du monde utilise ce système métrique .

• cm (centimètres): Un centimètre est. 3937 pouces, donc un pouce contient environ 2 1/2 centimètres.
• in (pouces): Les pouces sont une unité du système English ou imperial - utilisé aux États-Unis. L'Angleterre et quelques vestiges de la période coloniale sont restés longtemps dans le système impérial, mais ont récemment cédé. Le gouvernement britannique s'est conformé en 2000 à la métrique européenne et c'est désormais une infraction criminelle de vendre à la livre n'importe où dans le royaume de Sa Majesté. Un homme de Cornwall, par exemple, aurait dû payer des frais de justice après avoir été surpris en train de vendre du maquereau à 1 £. 50 une livre.

Un pouce est basé sur la distance entre la première phalange et la fin du pouce d'un roi maintenant oublié. Depuis 50 ans, les efforts persistants pour éduquer et légaliser le système impérial en faveur de la métrique ont échoué aux États-Unis.
• em: Em est une unité de mesure dérivée de la largeur approximative de la lettre < m d'une police. Cela est généralement considéré comme le meilleur moyen de spécifier la taille de la police dans CSS, même si peu de concepteurs suivent ce conseil. ex (la hauteur x):
• Ex est la hauteur x, ou la hauteur de la lettre minuscule x , de la police de l'élément courant.) Les navigateurs se divisent généralement de moitié pour obtenir l'ex-taille. Cette unité de mesure n'est pas actuellement aussi utile que les em car elle n'est pas aussi prévisible qu'une moyenne pour toutes les polices de caractères.

% (pourcentage):

• Les pourcentages sont excellents pour spécifier la taille relative (il peut s'agir d'un ancêtre, du parent, etc.). Les unités de mesure ne sont pas sensibles à la casse. Vous pouvez les capitaliser ou non, comme vous le souhaitez. De même, dans IE, vous pouvez inclure un espace entre le nombre et son unité, ou pas: Par exemple, 2 in est équivalent à 2in. Les autres navigateurs n'aiment pas l'espace. Par souci de simplicité, l'utilisation de minuscules et l'évitement d'espaces inutiles sont généralement une bonne idée lorsque vous travaillez avec CSS. Prenez simplement l'habitude du format 2in ou 24px et tout ira bien, à moins que les comités CSS ne décident de s'inverser dans le futur.

Comprendre le petit em

Parce que les experts vous recommandent d'utiliser em lors de la conception d'une page Web que vous voulez regarder, il vaut mieux regarder de plus près ce que cette unité signifie réellement. Traditionnellement, le em était la largeur de la lettre

m . Peut-être avez-vous entendu le terme

m-dash ou em-dash , qui est le trait habituellement employé dans la publication. C'est une ligne horizontale - comme celles-ci - équivalente à la largeur de la lettre m de la police (ce n'est pas strictement un équivalent précis dans beaucoup de caractères). Il y a aussi un en-dash. Devinez de quoi il s'agit.

Les unités Em et ex sont

relatives à chaque police de caractères. Ceci est utile car cela signifie que la taille spécifiée par em change de façon précise en fonction de la résolution de l'écran de l'utilisateur, des paramètres de préférence et d'autres facteurs.En d'autres termes, utiliser em vous permet de spécifier ce qui se passe relatif à la police. Le résultat est proportionnel aux autres qualités de la police de caractères et du texte environnant. En outre, les spécifications relatives comme em permettent aux personnes handicapées d'agrandir la police de caractères dans leur navigateur si nécessaire. Les spécifications fixes comme px ou pt n'offrent pas cette option à l'utilisateur. Em et ex sont l'unité de mesure traditionnelle des typographes, mais leurs significations en CSS sont légèrement modifiées. D'une part, les ordinateurs calculent ex en divisant simplement par deux en deux. C'est plus facile à calculer, mais seulement une approximation pour la plupart des polices. Em en CSS est la taille de la police en pixels. Ceci est utile car vous pouvez spécifier des unités em et les utiliser par rapport à la police de l'élément parent (ou autre).

Voici une expérience pour comprendre comment em est

relatif à un autre élément. Dans ce code, le texte dans l'élément est défini comme 26px, mais le texte dans l'élément de paragraphe est défini comme 1. 5em, ou, en d'autres termes, une fois et demie la taille du parent. Plus tard dans le code HTML, l'élément de paragraphe est entouré (parenté) par l'élément body. Par conséquent, le texte du paragraphe est rendu à 1. 5 × 26 pixels (ou 39 pixels). body {font-size: 26px;}

p {font-size: 1. 5em;}

p. abs {font-size: 39px;}

du texte

du texte (1. 5 em du corps parent).

du texte (39 pixels).

Le texte dans la version de classe abs de

est rendu de la même taille que le

ordinaire. L'élément est un élément parent de

, et

est défini comme 1. 5em de son parent. Le corps parent utilise 26 pixels comme taille de texte, donc 26 × 1. 5 résultats en 39 pixels.