L'essentiel des CSS

Comprendre les diverses valeurs

Testez gratuitement nos 1299 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Si les propriétés sont toujours composées de mots, les valeurs peuvent prendre diverses représentations. Elles peuvent être numéraires, des chaînes de caractères, de fonctions, de mots-clés et bien d'autres.
09:54

Transcription

Au vu de la diversité et du nombre de modules auxquels on a affaire en CSS on peut s'attendre à avoir divers types de valeurs, divers types d'unités pour définir chacune de ces propriétés. On a vu jusqu'à présent qu'on avait écrit 10px mais des fois on avait écrit hsl, argb, etc. Ce que je vous propose, c'est de regarder tous ces types de valeurs que l'on peut avoir au sein de nos déclarations. N'oublions pas à ce sujet que le W3C est en candidate recommendation, au niveau des value et unit de niveau 3 qui permet de retracer assez précisément l'ensemble de ces différentes valeurs que l'on peut trouver et comment elles vont évoluer dans le temps et surtout vers quoi elles vont amener les possibilités des représentations CSS. De manière assez classique, on peut trouver des nombres avec ou sans unité derrière comme on le voit par exemple ici sur l'exemple du pixel, du pour cent, de l'EM. Des nombres qui sont aussi décimaux : 3.5 ce n'est pas une virgule attention ! La virgule est un séparateur. La virgule n'est pas un séparateur décimal. Et puis le 0 qui n'a pas besoin d'unité. Si vous marquez 0 px, cela ne va pas vous porter de souci mais faites attention, parce que si vous changez la valeur parfois ça peut donner des incohérences si vous travaillez toute votre typo en pixel et que d'un coup vous marquez 0 px, si après vous décidez de passer à une typo en EM, si vous mettez 0 px ce n'est pas grave. Ça fonctionnera toujours, ce sera toujours 0. Mais dans votre cohérence, dans votre logique vous allez penser que les typos ont pu être définies en pixel par ailleurs. Gardez une certaine cohérence, gardez le 0 en valeur 0. Ensuite, vous allez avoir des valeurs textuelles, comme sur une typographie Times New Roman. Comme c'est très long et que c'est trois mots, on le met entre guillemets pour être sûr que le moteur comprenne qu'on parle du 'Times New Roman' et pas du Times puis de la typo New puis de la typo Roman. Enfin, les valeurs unicodes, on va les placer \201C On avait déjà vu dans l'exemple des annotations. Vous allez utiliser des strings, des double quotes "" de chaque côté de la valeur. Après on va avoir ce qu'on appelle des mots-clés. Dans les mots-clés, on a deux familles. C'est personnel. Le W3C parle de mot-clé tout court. Personnellement j'ai tenu à différencier deux types de mots-clés. Les mots-clés qui vont être des mots-clés comme inherite, important, initial Il y en a quelques-uns comme ça. Par rapport à des mots-clés qui vont être des valeurs établies, comme xx small x small, italic, bold ce sont des mots-clés mais ce sont des valeurs établies. Alors qu'inherite n'est pas une valeur établie, ça va prendre la valeur de quelque chose. Important ; attention, ça passe au-dessus. Initial : tu remets la valeur qu'il y avait au départ, avant la modification. Je fais une distinction entre ces deux types de familles de mot-clé. Après vous allez pouvoir utiliser des couleurs. On peut les représenter de plein de manières différentes. Mais vous voyez, c'est du fonction. C'est quelque chose() si vous faites du javascript on se retrouve vraiment dans la fonction. D'un coup ça peut être de l'hexadécimal avec du #6600EE qui peut être représenté en méthode courte #60E. On verra bien sûr toutes ces valeurs en détail un peu plus tard et à quoi elles correspondent. On pourra trouver aussi des fonctions pures de chemin d'accès comme URL ou URL/ pour dire : "attention ça va être un chemin défini relatif ou un chemin relatif à la racine du site. C'est bien compris dans ce sens-là. Après on pourra avoir des expressions qui vont nous permettre de faire des calculs, de faire des attributs, de récupérer des valeurs, des vraies fonctions qui vont fonctionner avec ce qu'il se passe en temps réel dans nos feuilles de style CSS. Pour soritr un peu de ce côté théorique encore une fois je vous propose de passer sur un petit exemple assez sommaire qui est composé d'une partie HTML de 3 articles, tous avec un h1 qui a un attribut data ref vous voyez où on va en venir, et une classe article éditoriale qui distingue le premier article des deux autres. Faites attention, il n'y a pas de conteneur parent si ce n'est le body Tous les articles sont au même niveau les uns des autres. Ici, on va pouvoir utiliser des valeurs de type string, ou des valeurs de type numéraire. Si je prends par exemple dans l'article ici je vais pouvoir rajouter une marge de 10 px et de 0 On voit bien que tous les articles vont s'adapter à cette marge-là. Les articles ne vont pas bouger dans ce sens-là dans la mesure où 10px est leur valeur par défaut. Si on mettait par exemple, 30 px maintenant, ctrl+S, j'enregistre. On voit bien que tout bouge, puisqu'il y a... Oh ! Je suis passé à 310 carrément ! Vous voyez, les marges numéraires vont fonctionner dans ce sens. Ensuite on pourrait rentrer dans du string. Pour le string on avait vu la typo, c'est un très bon exemple. Ici, si je viens dans body et que je dis font-family là je suis dans une syntaxe étendue donc je ne parle que de la propriété famille de la propriété font et je dis tu vas écrire un "avant-garde." L'avant-garde je le mets entre guillemet parce qu'elle est séparée. Si tu ne trouves pas avant-garde séparée c'est vrai que certains fabricants de typo l'ont écrit de manière unique comme ça, avant garde donc tu prendras celle-là. Si tu ne trouves ni l'une ni l'autre, tu prendras la typo Sans Serif par défaut de l'utilisateur. Après, on ne va pas forcément les faire dans l'ordre qu'on a vu au niveau de la roue mais maintenant je vais pouvoir définir des couleurs. Si je viens définir une couleur RGBA Rouge Vert Bleu avec une couche alpha de 0,85 je vais pouvoir aussi donner une propriété abrégée qui est background. Dans le background, je vais lui dire, la couleur est FFF. L'URL est une image. Cette image, c'est un simple petit trait qui fait x pixel de large et qui fait un pixel de haut et qui a une couleur grise. Si je lui dis tu prends cette image et tu me la répète dans le sens Y il va faire une colonne. Je vous propose d'enregistrer, ctrl+S on charge notre page et vous voyez que notre colonne a été faite. Petit souci, d'un coup maintenant, je me retrouve avec l'article qui s'écrit à moitié sur du gris. Ce que je vais faire, c'est dire : je vais faire une marge. Avant de faire une marge, je vais aller le styler au niveau de sa couleur. Je vais pouvoir lui donner une couleur pour l'écrire autrement qu'en olive et une font-size ici. Je vais donner une taille de typo qui va être 1.2 EM déjà du décimal, voyez c'est des valeurs à virgule. On en avait déjà vu une ici, dans cette partie-là. En plus, je donne une unité proportionnelle qui est le EM. Quand j'écris, tout a été écrit avec ce gris clair et ça a changé la taille de la typo. Maintenant je vais utiliser pour cette marge, quelque chose de particulier : une fonction de calcul Je vais utiliser une propriété étendue, en utilisant que margin-left et je vais lui dire : tu me calcules 200 px, pourquoi 200px ? Tout simplement parce que ce bestiau-là fait 200 px en dur de large. Tu prends 200 px mais j'aimerais que tu m'ajoutes 2 * 1.2 EM. C'est quoi ce 1.2 EM ? C'est la taille de la typo. Au lieu de m'écrire au bord de l'élément, je veux que tu m'écrives à deux fois la taille de la typo en plus de ces 200 px. Je fais un ctrl+S, j'y vais, j'actualise. Ça fonctionne bien. On va aller encore un peu plus loin. On avait vu tout à l'heure des mots-clés. Ici on pouvait utiliser des mots-clés prédéfinis. donc le h1, je pourrais dire que son écriture font-size va être écrite en Xlarge. Quand j'actualise, vous voyez que là maintenant, ma taille de typo au niveau de la h1 a bien changé à ce niveau-là. Ensuite, on peut utiliser des mots-clés qui eux ne changent pas. Il ne sont pas des valeurs établies. Ce sont des valeurs qui vont se fusionner avec l'élément parent. Donc ici, si je dis pour editorial, tu vas utiliser une couleur qui va être l'héritage, de qui ? De son parent. Quand je vais actualiser, qui est le parent ? Le parent, c'est... (je regarde mon HTML) c'est body. Là, au lieu d'utiliser la couleur de article qui a été donnée, je vais utiliser la couleur du body. Qui est le body ? Le body c'est cette couleur-là. Je vais utiliser la couleur parente de l'élément. Si je modifie la couleur du parent, automatiquement l'editorial s'adaptera. Enfin une dernière valeur juste pour la route. Bon, on va en faire deux. On va faire le fameux h1 after. On l'a déjà fait plusieurs fois, on va le refaire. On va faire un content qui sera égal à un espace plus l'attibut dataref. Ces attributs qui ont été placés ici. On va concaténer à la fin un petit espace. Plus on va concaténer... Attention, là il n'y a pas d'espace. C'est comme si j'avais un séparateur entre lui et lui. J'aurais pu tout écrire d'une seule ligne. J'aime bien séparer mes éléments. Ici je vais mettre un élément unicode qui va être représenté par un élément de type trèfle. Quand j'actualise, la référence apparaît et le petit trèfle qui apparaît et qui va être l'élément là. Enfin, on a des valeurs calculées. On en avait fait une encore ici pour le calcul. On peut calculer des compteurs. Je vais dire que je vais créer un compteur tout en le réinitialisant au niveau du body. quand la règle du body va se faire, je vais faire un compteur reset, que je vais appeler 'Titre'. Le compteur reset 'Titre' est remis à zéro donc 'Titre' vaut zéro. Quand vais-je incrémenter ce 'Titre' ? A chaque fois que je vais rencontrer un article. Chaque fois que je vais rencontrer un article, je vais mettre la propriété counter increment 'Titre' Il sait qu'il va incrémenter 'Titre' donc le premier coup, il va passer de 0 à 1, 2, 3... autant d'articles qu'il y aura. Quand vais-je utiliser cet élément 'Titre' ? Je vais l'utiliser dans une variable avec le before par exemple. "Devant chacun de mes articles, tu vas m'écrire dans un content qui sera le counter 'Titre' tu vas m'écrire cet élément-là et tu me mettras entre les guillemets un espace, un trait d'union, un espace. Je fais un ctrl+S, j'actualise et voilà ce qu'il s'est passé. Il faudrait donner un petit peu plus de place pour que ce soit plus sympa. Ici, ça nous donne une numérotation article par article. Voilà un peu toutes les valeurs que l'on peut placer dans les propriétés. Voyez, la palette est assez large. On peut s'amuser avec les CSS. On n'est pas forcément obligés de dire, ceci est égal à cela. On peut dire ceci est égal à : "Calcule-moi ce qui va se passer dans cela." Je vous invite à passer à l'étape suivante où on va continuer à explorer toutes ces unités.

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 !