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

Écrire les propriétés

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Il existe deux manières d'écrire des propriétés : soit de manière étendue, en égrainant une à une chaque propriété d'une famille, soit de manière abrégée, en n'utilisant qu'une seule propriété, globale, en une seule ligne.
07:11

Transcription

Les propriétés peuvent s'écrire de manière étendue ou abrégée. Au sein d'une même déclaration, on va pouvoir écrire de diverses manières la même propriété. Regardons par exemple sur un élément, un sélecteur quelconque, une section par exemple, et jouons sur les marges. En fait, on a la manière étendue d'écrire les marges, qui va être de pouvoir définir marge par marge : la marge du haut, la marge de droite, la marge du fond, de la gauche avec des valeurs unitaires à chaque fois, en disant 10 pixels à chaque fois. On s’aperçoit que c'est toujours la même chose. Donc on va pouvoir l'écrire de manière abrégée. Pour l'écrire de manière abrégée, on a plusieurs syntaxes, en fonction de certaines propriétés on a une multitude de possibilités. Certaines propriétés ne peuvent d'ailleurs pas être écrites de manière abrégée. Si je prend par exemple la propriété margin tout court, c'est à dire que je ne spécifie plus top, right, bottom, left. Je vais devoir le faire de manière abrégée en l'indiquant dans l'ordre très précis haut, droite, bas, gauche. Ça part de midi et ça tourne dans les aiguilles d'une montre. Je peux avoir des valeurs différentes, je suis pas obligé d'avoir toujours 10px. Je pourrais avoir 2 pixels, 10 pixels, 0, 0 par exemple. On a encore une autre manière de l'écrire abrégé, peut-être que vous l'avez déjà rencontré, sur certaines feuilles de style vous pouvez avoir trois chiffres. Si vous avez trois chiffres, c'est pas un oubli du dernier chiffre, c'est simplement que l'on va gérer : le premier chiffre sera le haut, le deuxième chiffre sera une valeur identique à gauche et à droite, donc dans le sens horizontal, et le dernier chiffre sera le bas. On peut encore le retrouver avec deux valeurs. Deux valeurs c'est toujours de l'abrégé, mais cette fois-ci on va avoir directement dans un premier sens le vertical et ensuite l'horizontal. Donc là j'aurai 10 pixels en haut et 10 pixels en bas, 10 pixels à droite et 10 pixels à gauche. Bien sûr que les valeurs peuvent être différentes, par contre elles seront identiques dans le sens vertical et identiques dans le sens horizontal. La dernière manière de pouvoir utiliser les valeurs abrégées, c'est avec une seule valeur qui dira « j'ai 10 pixels de marge aussi bien en haut, à droite, qu'à gauche, en bas » Donc il y a plusieurs manières de pouvoir écrire la même chose, la même propriété. Comme je vous le disais, toutes les propriétés n'ont pas la possibilité d'être écrites de manière abrégée. On va en regarder quelques-unes. On a vu déjà la marge, qui permettait de dire « j'ai le haut, droite, bas, gauche » On a aussi la manière d'écrire la font. On pourrait très bien écrire de manière étendue font family, font size, font color, font tout ce que vous voulez. On va pouvoir définir toutes les valeurs une par une, mais on peut les définir tout simplement au travers d'une seule propriété, la propriété font. Attention, l'ordre est aussi important à respecter. Dans un premier temps c'est le style : je vais écrire en italique ; la variante : c'est des small caps ; la graisse de la font (weight) : là ce sera du bold par exemple ; la double valeur pour le corps d'écriture et la hauteur de ligne. Généralement, par défaut, la hauteur de ligne est une valeur de 1.5. Ici j'ai écrit 12 pixels, 14 pixels, mais j'aurais très bien pu écrire 12 pixels, 1.x c'est à dire le rapport pourcentage qu'il y aurait entre 12 et 14. Généralement c'est 1.5 sans devoir spécialement spécifier l'unité. Et enfin, la famille. On verra juste après dans un petit exemple de démonstration, il faut faire attention. Si vous écrivez de manière abrégée, c'est très bien, alors il faut être sûr de ne pas omettre quelque chose ou de ne pas entrer en conflit avec une valeur qui serait omise. Ce que je viens de vous dire ça fonctionne quelles que soient les propriétés, dans la mesure où on écrit en mode abrégé. Ici avec la bordure c'est classique, on l'utilise. On a le border width, le border color, le border style, on les fait directement. Écrire une seule ligne gagne de la place, c'est beaucoup plus sympa et généralement on fournit toujours toutes les valeurs dont on a besoin en mode abrégé. Le list style qui va nous permettre de choisir d'une part une valeur de représentation de la liste qui serait le type par défaut. Par contre, si vous précisez une image, c'est l'image qui va prendre le dessus. Si l'image ne peut pas être chargée pour une raison ou pour une autre, c'est le type qui prendra la place. outside c'est de savoir si je le mets en dehors du bloc conteneur de la liste ou à l'intérieur du bloc. Ce qui est très important à prendre en considération également, c'est la gestion des arrières-plans. Souvent, on va écrire background red, background orange, mais on omet toutes les autres valeurs. C'est vrai qu'on a plusieurs valeurs à placer dans le background qui sont la couleur, l'image, le fait de répéter ce background et la position qui est indiquée en deux valeurs. Elle ne peut avoir qu'une valeur indiquée, mais ce sera une valeur commune. Si je mets par exemple center tout seul, on sait que ce sera centré horizontalement et centré verticalement. Ensuite, on a le dernier élément : la transition. Dès qu'on va travailler sur des transitions, on n'est pas obligé de passer directement la propriété de transition, la durée, le délai et j'appelle ça l’accélérateur, le timing fonction, qui va dire si on a du rebond, si on a de l'élasticité etc. Vous avez beaucoup de propriétés qui peuvent s'écrire de manière abrégée, il n'est pas nécessaire faire transition property, transition duration, transition timing, transition delay etc. Vous pouvez directement l'écrire en une seule ligne. Cependant, comme je vous disais tout à l'heure, il nous faut faire attention si on fait une omission. Regardez, ici on va dire que quelque part dans ma feuille de style CSS... Alors là avant tout, il faut dire que les deux sont concentrés l'un après l'autre, donc on peut vite voir l'erreur. Mais imaginez-vous d'avoir 8 à 900 lignes de code CSS, et lui est placé au début, lui est placé à la fin, allez trouver l'erreur, vous allez passer un certain temps. Donc ici on a un article, on a décidé d'écrire avec un font-variant, small caps, qui permet d'avoir ce rendu particulier de tout écrire en small caps, c'est à dire qu'on a tout en majuscule. La différence c'est que les vraies majuscules et les vraies hauts de casse sont toujours respectés dans cette font. On a défini notre article et un peu plus loin, pour une raison ou une autre on a besoin de redéfinir le paragraphe et on va redéfinir surtout le fait qu'il soit écrit en gras, qu'il ait un caractère de 12 pixels avec un interlignage de 30 pixels, qu'il soit écrit en Georgia et en Sérif, si on ne trouve pas de Georgia. Jusque là, super. Sauf qu'ici entre bold et 12px, on a omis de définir la font variant. C'est un oublis, de devoir définir qu'on resterait en small caps ou qu'on inherite, c'est à dire qu'on hérite de cette valeur. Mais là on ne le fait pas. J'enregistre, si j'actualise on perd le small caps. C'est à dire qu'on vient d'apporter tout, et automatiquement le moteur de rendu prend la valeur par défaut. Puisqu'on est en forme abrégée, il se dit que tout doit être défini, si c'est pas défini il remet les valeurs par défaut, qui sont les valeurs par défaut du navigateur au niveau de la font. Faites bien attention quand vous utilisez les formes abrégées ou étendues. Des fois, c'est très intéressant d'utiliser de l'abrégé, comme par exemple pour border, parfois pour les font faites attention, vous pouvez casser votre style, après pour aller trouver la problématique, je vous souhaite du temps et du courage. Donc à vous de voir quelle est la manière d'écrire votre CSS la plus appropriée en fonction des déclarations que vous êtes en train d'écrire.

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 !