Spécification taille et la position avec CSS

Dans une définition de style CSS (ou règle

), Vous pouvez décrire les positions et les tailles de plusieurs façons, en utilisant des unités de mesure peut être différent. Vous pouvez souvent choisir ce que l'unité que vous voulez, même si certains types spécifiques de mesures qui fonctionnent le mieux dans certaines situations.

Par exemple, de nombreux designers qui travaillent avec papier et 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. Utilisation absolus caractéristiques Type de taille pour un magazine ou un livre fonctionne très bien - après tout, l'utilisateur ne peut pas se rétrécir, étirer, ou modifier le rapport d'aspect d'une page dans un livre. (Ratio d'aspect est le rapport entre hauteur et la largeur.) Navigateurs, cependant, peut être redimensionnée à volonté. Si vous faites glisser un côté d'un navigateur, vous décidez de changer, ce qui rend plus mince ou plus gros. En d'autres termes, votre changement de sa forme, son ratio d'aspect, de, disons, un carré à un rectangle.

Pour les polices affichées dans un navigateur, une unité de mesure relative est supérieure aux points traditionnels. Contrairement mesures absolues telles que des points ou pouces, une unité relative évolue avec les tailles de police. En conséquence, vous obtenez des résultats plus prévisibles dans les pages Web avec des unités relatives de mesures en précisant le type de taille. Une unité par rapport utile des mesures pour un concepteur de site Web est le em. Bien que l'EM est utile, dans la pratique, la plupart des concepteurs utilisent encore des points ou pixels lorsque vous spécifiez le type de taille. Peut-être qu'il est juste la force de l'habitude, mais en tout cas les résultats semblent habituellement très 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é sur un écran - les points que vous pouvez parfois voir si vous obtenez assez près à un téléviseur. Par exemple, le réglage de votre résolution d'écran 800x600 signifie qu'il est 800 pixels de large par 600 pixels de haut.

Pixels peut être un moyen utile de préciser la taille de police, mais l'inconvénient est que si vous spécifiez pixels, qui remplace l'option de taille de police personnalisée dans Internet Explorer - afin que les utilisateurs ne peuvent pas ajuster de «grand» à «grand» et ainsi de suite. Cependant, vous devriez toujours utiliser px pour décrire image tailles. Images déjà mesurables en pixels (vous pouvez voir les mesures en chargeant l'image dans toute application graphique).

• pt (points): Un point est égal à 1/72 de pouce. Points (et pica) sont des mesures de fontes classiques. La plupart des navigateurs par défaut à un empattement de 12 points.

• pc (picas): Un pica équivaut à 12 points.

• mm (millimètres): Un millimètre est .0394 pouces, de sorte un pouce contient environ 26 millimètres. Un centimètre contient 10 millimètres. Une grande partie du monde utilise cette métrique système.

• cm (centimètres): Un centimètre est .3937 pouces, de sorte un pouce contient environ 2 1/2 centimètres.

• en pouces): Pouces sont une unité dans le Anglais ou impériale système - utilisé aux États-Unis. Angleterre et quelques vestiges de la période coloniale sont aussi restés avec le système impérial pendant une longue période, mais ont cédé récemment. Le gouvernement britannique a respecté en 2000 avec le système métrique européen et il est désormais une infraction pénale de vendre la livre partout dans le royaume de Sa Majesté. Un homme à Cornwall, par exemple, aurait eu à payer les frais de justice après avoir été pris à vendre au maquereau # 163 à 1,50 livre.

Un pouce est basée sur la distance entre la première phalange et l'extrémité du pouce d'un roi aujourd'hui oublié. Depuis 50 ans, des efforts persistants pour éduquer et légiférer loin 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. Ceci est généralement considéré comme le meilleur moyen de spécifier la taille de police en CSS, bien que quelques designers suivent ce conseil.

• ex (l'-Hauteur x): Ex est la hauteur de x, ou la hauteur de la lettre minuscule X, de la police de l'élément courant.) Navigateurs divisent habituellement em par deux pour obtenir l'ex-hauteur. Cette unité de mesure est actuellement pas aussi utile que l'em car il est pas aussi prévisible une moyenne pour tous les types de caractères.

• % (Pour cent): Les pourcentages sont excellents pour spécifier la taille relative (il peut être par rapport à un ancêtre, le parent, et ainsi de suite).

Les unités de mesure ne sont pas sensibles à la casse. Vous pouvez les capitaliser ou non, que vous le souhaitez. De même, dans IE, vous pouvez inclure un espace entre le nombre et son unité, ou non: Par exemple, dans 2 est équivalent à 2 po. Les autres navigateurs ne aiment l'espace. Pour plus de simplicité, utilisez les minuscules et en évitant les espaces inutiles est généralement une bonne idée quand on travaille avec CSS. Juste prenez l'habitude de le format de 2 po ou 24px et vous serez amende, à moins que les comités de CSS décident de se renverser dans l'avenir.

Comprendre peu em

Parce que les experts recommandent que vous utilisez em lors de la conception d'une page Web que vous voulez regarder tellement, il vaut la peine de jeter un oeil de plus près à ce que cette unité signifie réellement. Traditionnellement, l'em est la largeur de la lettre m.

Peut-être vous avez entendu le terme m-dash ou em-dash, qui est le tiret habituellement employé dans l'édition. Il est une ligne horizontale - comme celles-ci - équivalente à la largeur de la lettre de la police de caractères m (ce ne soit pas strictement un équivalent précis dans de nombreuses polices). Il ya aussi un en tableau de bord. Devinez quoi il est basé sur.

Em et ex unités sont relatif pour chaque type de caractère. Ceci est utile car cela signifie que la taille spécifiée par em change de façon précise sur la base de la résolution de l'écran de l'utilisateur, les paramètres de préférence, et d'autres facteurs. En d'autres termes, en utilisant em vous permet de spécifier ce qui se passe relatif à la police. Le résultat est proportionnelle aux autres qualités de la police de caractères et le texte environnant. En outre, les spécifications relatives comme em permettent aux personnes souffrant de handicaps pour agrandir la police de caractères dans leur navigateur que nécessaire. Spécifications fixées comme px ou pt ne proposent pas cette option à l'utilisateur.

Em et ex sont l'unité de mesure de typographe traditionnelle, mais leurs significations en CSS sont légèrement modifiées. Pour une chose, les ordinateurs calculent ex em par simple division en deux. Cela 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 em unités et compter sur eux étant relative à la société mère (ou autre) la police de l'élément.

Voici une expérience à avoir l'idée de la façon dont est em relatif à un autre élément. Dans ce code, 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, autrement dit, un jour et demi-fois la taille de la société mère. Plus tard dans le code HTML, l'élément de paragraphe est jointe (parented) par l'élément de corps. Par conséquent, le texte du paragraphe est rendu à 1.5x26 pixels (ou 39 pixels).

un texte

un texte (1,5 em du corps de parent).

un texte (39 pixels).

Le texte dans la version de la classe d'abs

est rendue la même taille que l'ordinaire

. La élément est un élément parent de la

, et

est défini comme 1.5em de son parent. Le corps de parent utilise 26 pixels que sa taille de texte, les résultats afin 26x1.5 dans 39 pixels.