Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel des CSS

Utiliser les unités fixes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les unités fixes sont nombreuses et vous permettent de répondre précisément en fonction des contextes d'utilisation ou des périphériques de sortie. Mettez en place un atelier de comparaison.
05:46

Transcription

Bien souvent, nous allons devoir utiliser des propriétés qui vont définir des mesures, des mesures soit fixes, statiques ou des mesures proportionnelles. Je vous propose de nous focaliser pour l'instant sur cette étape au travers des mesures fixes. Bien que le pixel soit une des mesures qui soit également proportionnelle puisqu'elle va dépendre de la relation de l'écran, aujourd'hui on va dire que tous les navigateurs s'entendent à dire que 1 inch vaut 96 pixels. On verra le pixel dans les unités de mesure fixes pour l'instant. Ici, le pixel ça nous parle, c'est cette distance qu'on a d'un petit point allumé sur l'écran. Le point va être plutôt proche du point d'impression. Il y a une différence entre le pixel et le point. Souvent on s'entendait de dire qu'on raisonne en 300 pixels ou en 300 points c'est pareil. On verra que non, pas tout à fait. Le inch et le centimètre sont des unités qui vont être très intéressantes lors de l'impression, car on va se retrouver sur du papier donc le centimètre va être une unité de mesure qu'on reconnaît. Le inch pour les mesures anglo-saxonnes et le pica qui est une unité qui provient de la typographie, qui va aussi avoir peut-être son intérêt en fonction des typo, des font qu'on va utiliser pour les espaces justement insécables si on veut faire un travail typographique relativement propre. Ici je vous propose de télécharger un arrière-plan, un background qui est une image grid de 10png En fait, cette grille va être quadrillée tous les 100 pixels, tous les 50 pixels on a une ligne en pointillé, légèrement, puis en vert, on aura une ligne tous les 5 cm, donc on repérera les 10, 20 cm en hauteur. Pour pouvoir travailler, on va utiliser divers paragraphes qu'on décommentera au fur et à mesure, chacun possédant une classe appropriée à la mesure qu'on va explorer. Par exemple, pour commencer on va décommenter la partie pixel pour pouvoir la faire apparaître. On met le titre « Pixel », pour mieux le reconnaître. On va venir définir toutes les valeurs de cette classe pixel, ici, en pixel. C'est-à-dire qu'on va dire qu'on a une marge de 100 pixel, une hauteur de 100 pixels, une largeur de 700 pixels pour avoir un peu plus de visu là-dessus, et on va donner une couleur d'arrière-plan. Donc on va faire ça pour chacune des unités. Vous voyez que ici si je prends 100 pixels de marge, je suis exactement pile-poil à l'intersection des deux lignes. Et puis la hauteur de 100 pixels également. On voit que le 700 pixels maintenant dépasse. Il va jusqu'à 800 en réalité. Parce que j’ai 700 pixel de large, mais j'ai 100 pixels de marge dès le départ. qu'il faut penser à additionner. Donc maintenant on va répéter l'opération pour chacune des unités pour mieux les comparer. Donc tour à tour on aura 100 points sur 700 points, et 100 points de hauteur ; 1 inch, 7 inch, 1 inch ; 1 cm, 10 cm, 5cm de hauteur ; margin 10 pica, 100 pica, 10 pica. Chaque fois, on a des couleurs qui vont nous permettre de distinguer mais surtout on a le titre pour chacun des éléments. Vous voyez qu'on n'a pas besoin d'avoir des commentaires mais on voit bien que le pixel et le point n'ont pas du tout la même hauteur alors qu'ils ont 100 pixels, 100 points chacun d'écart. On s'aperçoit que le inch va pouvoir être respecté quelque part, par contre, on voit qu'on a différentes unités de mesures qui vont chacune correspondre à des valeurs différentes. Je vous laisse le soin de venir les explorer, les détailler, les commenter par vous-même. Ce qui va nous importer surtout, c'est de pouvoir avoir une relation entre elles. Alors on aura une formule un peu bateau qui va nous permettre de porter, vous pouvez en trouver diverses origines sur le Web, je vais laisser un peu de marche ici pour pouvoir la voir en entier. Je vais passer à l'intérieur de la feuille de style pour pouvoir mieux bénéficier de la coloration du commentaire. On va dire 1em = 16px, on reviendra sur la notion du EM. C'est une unité proportionnelle qu'on n'a pas ici, qu'on n'a pas vu. On voit ici qu'on a 16px, qui vaut 0,17 inch qui vaut 12 points, qui vaut 1 pica, qui vaut 4,2 mm ou 0,42 cm entre la palisse [inaudible] Après on peut s'amuser à rentrer dans un style générique,, une partie que je n'ai pas décommentée ici qui est une classe générique, L'idée globale serait de pouvoir commenter l'intégralité des feuilles de styles, que je vais faire directement ici par rapport au pixel, pour ne pas être ennuyés par ces éléments-là. Ici on pourrait rentrer dans une classe générique qui pourrait avoir diverses valeurs afin de pouvoir vérifier la similitude des valeurs. Ici on a une classe générique, la seule chose ici pour pouvoir mieux le tester c'est de supprimer directement tout le HTML parce qu'on a des commentaires qui sont enchevêtrés. Ce qu'on va faire c'est qu'on va supprimer toute cette partie du HTML, Ctrl + S je récupère la valeur et ici je suis sur mon terme générique, pour l'instant avec simplement background. Je vous invite à venir décommenter au fur et à mesure chacune de ces valeurs pour s'apercevoir en fait qu'on a une similitude de valeur entre 100 pixels, ça vaut 75 points, ça vaut 1,04166677 inch, ou 2,601 cm ou 6,25 pica. Donc ici comme ça vous pouvez avoir une corrélation entre les diverses unités. Je vous invite aussi à vous rapprocher de ce convertisseur en ligne, il en est un parmi tant d'autres. Vous tapez dans Google, « Recherche de convertisseur online » et vous trouverez. Ici, si je veux dire que j'ai une marge de 100pixels, qu'est-ce que cela donne si je passe par exemple en pica au niveau du computer. voyez, ici j'ai une valeur, qu'est-ce que ça donne si je passe en pica au niveau d'une imprimante. Comme ça je vais pouvoir faire varier toutes mes valeurs d'un endroit à l'autre, pour pouvoir avoir une correspondance. Essayez de rattraper des valeurs fixes en fonction de votre support, en fonction de vos besoins et de votre recherche, et non pas d'essayer de faire des prouesses et dire : « Mon site est tout fait en Pica ou mon site a été fait tout en pixel » Non, vous avez plusieurs unités de valeurs, elles sont là pour pouvoir vous aider en fonction des contextes.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !