28173 sujets
CSS et mise en forme, CSS3
Hello,
Pour commencer, la propriété (et non pas commande) CSS display est définie comme suit :
http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-display
D'une manière peut-être un peu plus simple, on pourrait juste dire que cette propriété permet de demander un type d'affichage particulier pour un élément, chaque élément HTML ayant un type d'affichage par défaut (via les styles par défaut du navigateur).
Par exemple, un élément p a un affichage par défaut de type bloc (display: block). Il aura donc un retour à la ligne avant et après lui. Même chose pour tout un tas d'éléments (div, blockquote, ul, form, etc.).
li par contre a un affichage de type item de liste (display: list-item). Si on passe des li en display: block, ils restent les uns sous les autres, mais les puces disparaissent. Si on les passe en display: inline, les puces disparaissent, et les li sont tous les uns à la suite des autres, exactement comme si on avait des span plutôt que des li (on aura compris au passage que les éléments tels que a, span, em, etc., ont un affichage par défaut de type en-ligne -- display: inline).
Pour comprendre comment tout ça marche, le plus simple est de se faire une page de test, et de voir les conséquences du passage d'un type d'affichage à un autre.
Pour finir, on peut souligner l'existence de nombreux type d'affichage pour les éléments de tableau. Concrètement, cela signifie :
- qu'un élément de tableau peut avoir un affichage de type en-ligne ou bloc, c'est à dire que l'on peut par exemple mettre deux colonnes de tableau l'une en dessous de l'autre, grâce à display: block ;
- que des éléments ne s'affichant normalement pas comme un tableau peuvent être affichés comme tels, grâce en particulier à display: table et display: table-cell.
Sur ce dernier point, faire le test : mettre deux paragraphes à la suite. Par défaut, ils s'affichent l'un en dessous de l'autre. Maintenant, les passer tous les deux en display: table-cell. On obtient deux colonnes de tableau, plutôt que deux paragraphes.
Pour finir, il faut rappeler le cas particulier qu'est display: none : l'élément est supprimé de la page, le navigateur considère que l'élément n'appartient même pas à la page.
Pour commencer, la propriété (et non pas commande) CSS display est définie comme suit :
http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-display
D'une manière peut-être un peu plus simple, on pourrait juste dire que cette propriété permet de demander un type d'affichage particulier pour un élément, chaque élément HTML ayant un type d'affichage par défaut (via les styles par défaut du navigateur).
Par exemple, un élément p a un affichage par défaut de type bloc (display: block). Il aura donc un retour à la ligne avant et après lui. Même chose pour tout un tas d'éléments (div, blockquote, ul, form, etc.).
li par contre a un affichage de type item de liste (display: list-item). Si on passe des li en display: block, ils restent les uns sous les autres, mais les puces disparaissent. Si on les passe en display: inline, les puces disparaissent, et les li sont tous les uns à la suite des autres, exactement comme si on avait des span plutôt que des li (on aura compris au passage que les éléments tels que a, span, em, etc., ont un affichage par défaut de type en-ligne -- display: inline).
Pour comprendre comment tout ça marche, le plus simple est de se faire une page de test, et de voir les conséquences du passage d'un type d'affichage à un autre.
Pour finir, on peut souligner l'existence de nombreux type d'affichage pour les éléments de tableau. Concrètement, cela signifie :
- qu'un élément de tableau peut avoir un affichage de type en-ligne ou bloc, c'est à dire que l'on peut par exemple mettre deux colonnes de tableau l'une en dessous de l'autre, grâce à display: block ;
- que des éléments ne s'affichant normalement pas comme un tableau peuvent être affichés comme tels, grâce en particulier à display: table et display: table-cell.
Sur ce dernier point, faire le test : mettre deux paragraphes à la suite. Par défaut, ils s'affichent l'un en dessous de l'autre. Maintenant, les passer tous les deux en display: table-cell. On obtient deux colonnes de tableau, plutôt que deux paragraphes.
Pour finir, il faut rappeler le cas particulier qu'est display: none : l'élément est supprimé de la page, le navigateur considère que l'élément n'appartient même pas à la page.