dsiplay-thumb

CSS : display

Pro­priété dis­play

La pro­priété CSS dis­play est indis­pen­sable pour envi­sa­ger des mise en page HTML avan­cées. En effet, par défaut, les élé­ments HTML, pour la plu­part d’entre eux(<h1>, <h2>, …, <p>, <li>, <div>), sans style spé­ci­fique, s’enchaine dans le flux, les uns en des­sous des autres.

apercu-defaut-display

Com­por­te­ment, par défaut, d’éléments HTML : 3 para­graphes, 2 listes

apercu

Voici la même struc­ture HTML avec cer­tains élé­ments ayant la pro­priété dis­play et la valeur inline

Les 3 valeurs les plus usuelles de la pro­priété dis­play sont none, block, and inline.

CSS

.ele­ment­class {

display:none;

}

Cachera l’élément HTML pos­sé­dant l’attribut class ele­ment­class. Cette valeur, none, per­met de ne pas affi­cher un élé­ment ni aucun de ses des­cen­dants. Le docu­ment est rendu comme si cet élé­ment n’existait pas dans l’arbre du docu­ment. Cette valeur offre de puis­santes pos­si­bi­li­tés, mais elle doit être uti­li­sée avec pré­cau­tion. Elle nous sera utile par la suite pour affi­cher ou cacher des élé­ments d’interfaces.
CSS.ele­ment­class {

display:inline;

}

La valeur inline HTML pos­sé­dant l’attribut class ele­ment­class.

C’est une pro­priété CSS très uti­li­sée pour les menus horizontaux.

Exemple
apercu
Télé­char­ger le code

Pour aller plus loin

www.alsacreations.com

0