L'essentiel des CSS

Utiliser le détourage

Testez gratuitement nos 1257 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
À l'instar de la propriété border, il existe la propriété outline qui se configure de la même manière. Cette propriété peut être très utile, outre en ornementation, mais aussi en débogage ou en portage de site.
02:29

Transcription

Reprenons volontairement l'étape sur les bordures. Nous avons vu que nous pouvons placer sur des éléments un ensemble de bordures, allant de solid, dotted, dashed, jusqu'à ridge et inset par exemple. On a une autre propriété intéressante qui s'appelle outline et ici, outline va être un détourage qui va se programmer de la même manière que les bordures. Donc si ici je mets 6px, solid, par contre je vais prendre lightblue, si ça ne vous embête pas...voilà. Si je l'enregistre et que j'actualise, vous voyez, je viens de placer un outline, c'est-à-dire quelque chose au-delà de la bordure qui n'entrera pas dans le modèle de boîte que l'on verra tout à l'heure, qui n'entrera pas dans les dimensions de l'objet, qui va se mettre en supplément autour de l'objet et de la façon dont on va le définir. C'est-à-dire que rien ne m'empêche de dire que je le veux double, et si je le mets double, on aura bien sûr un outline double sur le côté. Donc, quel va être l'intérêt ? Eh bien ça va nous apporter une souplesse supplémentaire autour de la bordure suivant les ornementations qu'on va faire dans nos éléments de boîtes, mais aussi lors du débogage, des fois, ça m'arrive de reprendre d'anciens sites où il y a des parties en tableau. Et donc on va pas toujours voir que ça a été fait en tableau au départ, on va regarder notre site, j'ai une feuille de débogage dans laquelle j'ai tous les éléments de type table, je mets un outline, red, 2, 4px, solid, ce qui fait que quand je visualise le site sur lequel je travaille je vois tous les éléments ressortir de cette manière. Donc, j'ai utilisé outline plutôt pour du débogage que pour de la création de CSS et j'aurai des feuilles de style qui me permettront d'isoler les images. Si ce sont des img, est-ce que ce sont des images apportées par les CSS, ou sont-elles directement taguées ? Eh bien si vous mettez img, outline, 6px, purple, solid, toutes vos images avec un petit carré mauve vont être des images qui sont dans le contenu. Donc la outline est un outil qui, je trouve, n'est pas assez exploité, et il y a un ouvrage remarquable qui est paru dans la fin des années 1990, écrit par Christopher Schmitt et qui s'appelle « Tableless site », pour faire des sites CSS sans tableaux et c'était hallucinant parce que c'est lui, Christopher Schmitt, qui a apporté cette philosophie de travailler avec les bordures pour justement mettre en relief toutes les parties du contenu d'une page pour pouvoir travailler dessus. Donc ici, outline peut être utilisé en supplément de bordure de la même manière que les bordures et sans tenir compte du modèle de boîte.

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 !