Glossaire des propriétés CSS

Glossaire des propri�t�s CSS

VI. Propri�t�s d'affichage et de positionnement▲

VI-A. Affichage▲

VI-A-1. Type d'�l�ment | display▲

display�: d�finit comment doit �tre affich� un �l�ment HTML.

Compatibilit�: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Notes�: la valeur inline-block n'est support�e par IE 6 que pour les �l�ments initialement inline�; les valeurs inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-group et inherit ne sont pas support�es par IE 7 et pr�c�dents. IE 8 requiert un doctype. IE 9 supporte ces valeurs.

Version CSS�: 1

On ne va reprendre ici que ceux �tant les plus utilis�s�:

none�: l'�l�ment ne sera pas affich�;
block�: l'�l�ment devient de type "bloc" (comme <div>). Un �l�ment de type bloc ajoute un espace avant et apr�s le bloc, ainsi qu'un saut de ligne�;
inline�: l'�l�ment devient de type "inline" (en ligne, comme <span>). Valeur par d�faut. Il n'y a pas d'espace avant ni apr�s et n'ajoute pas de saut de ligne�;
inline-block�: l'�l�ment est affich� comme un "inline" mais peut �tre redimensionn� comme un bloc�;
list-item�: l'�l�ment devient de type "�l�ment de liste � puce" (comme <li>)�;
table�: l'�l�ment est affich� comme une table�;
table-caption�: l'�l�ment est affich� comme le titre d'un tableau�;
table-cell�: l'�l�ment est affich� comme une cellule de tableau�;
table-column�: l'�l�ment est affich� comme une colonne de tableau�;
table-column-group�: l'�l�ment est affich� comme un groupe de colonnes (<colgroup>)�;
table-header-group�: l'�l�ment est affich� comme l'en-t�te d'un tableau�;
table-footer-group�: l'�l�ment est affich� comme le pied de page d'un tableau�;
table-row�: l'�l�ment est affich� comme une ligne de tableau�;
table-row-group�: l'�l�ment est affich� comme un groupe de lignes.

Sélectionnez

display: none;
display: block;
display: inline;
display: inline-block;

Lorem ipsum dolore sit amet, consectetur adipisicing elit

Voir la source

Sélectionnez

<style type="text/css">
    .display1 {
        display: none;
        background-color: red;
    }
 
    .display2 {
        display: block;
        background-color: red;
    }
 
    .display3 {
        display: inline;
        background-color: red;
    }
 
    .display4 {
        display: inline-block;
        background-color: red;
    }
</style>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet, 
<span class="display1">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet, 
<span class="display2">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet, 
<span class="display3">consectetur</span> adipisicing elit</div>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem ipsum dolore sit amet, 
<span class="display4">consectetur</span> adipisicing elit</div>

VI-A-2. Affichage | visibility▲

visibility�: permet d'afficher ou de masquer un �l�ment.

Syntaxe�: visible | hidden | collapse | inherit

Compatibilit�: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note�: les valeurs inherit et collapse ne sont pas support�es par IE 8 et pr�c�dents.

Version CSS�: 2.1

Contrairement � display: none;, l'�l�ment masqu� occupe toujours l'espace dans la page.

visible�: l'�l�ment est affich�;
hidden�: l'�l�ment est masqu� mais conserve son espace dans la page�;
collapse�: cache une ligne ou une colonne d'un tableau.

Sélectionnez

visibility: visible;
visibility: hidden;
visibility: collapse;
display: none;

lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase est affich�e.

lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase sera masqu�e mais l'espace est conserv�.

lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici c'est une ligne d'un tableau que l'on masque

lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase est masqu�e et l'espace supprim�.

Voir la source

Sélectionnez

<style type="text/css">
    .visible1 {
        visibility: visible;
    }
 
    .visible2 {
        visibility: hidden;
    }
 
    .visible3 {
        visibility: collapse;
    }
 
    .display {
        display: none;
    }
</style>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div class="visible1">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <p>Ici la phrase est affich�e.</p>
</div>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div class="visible2">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <p>Ici la phrase sera masqu�e mais l'espace est conserv�.</p>
</div>
<div style="margin-bottom: 10px; background-color: #93caff; padding: 10px; width: 60%;">
    <table>
    <tr id="visible3" class="visible3">
        <td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
    </tr>
    <tr>
        <td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
    </tr>
    <tr>
        <td><button>Cliquez ici</button></td>
    </tr>
    </table>
    <p>Ici c'est une ligne d'un tableau que l'on masque</p>
</div>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-color: #93caff; padding: 10px; width: 60%;">
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div class="display">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
    <p>Ici la phrase est masqu�e et l'espace supprim�.</p>
</div>

VI-A-3. Afficher seulement une partie | clip▲

clip�: permet de sp�cifier une zone visible d'un �l�ment.

Syntaxe�: <shape> | auto | inherit

Compatibilit�: IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note�: la valeur inherit n'est pas support�e par IE 7 et pr�c�dents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS�: 1

Indiquer quatre valeurs � la suite�:

Sélectionnez

clip: rect(0px, 50px, 50px, 0px);
clip: rect(10px, 90px, 60px, 10px);

Cela permet de n'afficher qu'une partie d'un �l�ment. rect() permet d'indiquer les coordonn�es du rectangle qui sera affich�.
Les valeurs 1 � 4 correspondent respectivement aux coins haut, droite, bas et gauche du rectangle.

Attention, clip ne s'applique qu'aux �l�ments dont la position est absolue.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Voir la source

Sélectionnez

<style type="text/css">
    .clip1 {
        position: absolute;
        clip: rect(0px 50px 50px 0px);
        width: 150px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
 
    .clip2 {
        position: absolute;
        clip: rect(10px, 90px, 60px, 10px);
        width: 150px;
        border: 2px solid #696969;
        background-color: #93caff;
        left: 150px;
    }
</style>
<div style="position: relative; height: 110px;">
    <div class="clip1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua.</div>
    <div class="clip2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua.</div>
</div>

VI-A-4. Limiter les dimensions | overflow▲

overflow�: permet de d�terminer comment sera affich� le contenu d'un �l�ment quand il d�passe les limites de son conteneur. C'est utilis�, entre autres, pour afficher des barres de d�filement.

Syntaxe�: visible | hidden | scroll | auto | inherit

Compatibilit�: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Note�: la valeur inherit n'est pas support�e par IE 7 et pr�c�dents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS�: 2.1

visible�: tout l'�l�ment sera affich� (par d�faut)�;
hidden�: l'�l�ment sera masqu� s'il d�passe les limites d�finies par height et width. On ne pourra pas voir la partie du texte masqu�e�;
scroll�: tout comme pour hidden, l'�l�ment sera coup� s'il d�passe les limites. Cette fois le navigateur ajoutera des barres de d�filement pour qu'on puisse voir la suite du texte. Ces barres seront obligatoirement affich�es, m�me si celles-ci ne sont pas n�cessaires�;
auto�: c'est le navigateur qui d�cide d'ajouter des barres de d�filement ou pas en fonction des cas.

Cette propri�t� peut �tre �tendue par overflow-x et overflow-y.

Sélectionnez

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies est in dui aliquet vel dictum tellus sagittis. Etiam fringilla laoreet tortor, ut dapibus ligula pharetra eget. Pellentesque faucibus eleifend faucibus. Nam sapien lacus, congue at mattis mattis, blandit ac leo.

Vestibulum at elit cursus urna lacinia dapibus vel quis magna. Nullam nibh elit, congue eget imperdiet id, bibendum in risus. Suspendisse potenti. Donec nec orci ut ante luctus pharetra. Proin tristique, nibh at porttitor tristique, enim ante aliquam justo, nec feugiat leo dolor quis dui.

Proin quis enim neque, ut ultricies sapien. Cras risus eros, placerat eget pharetra ut, molestie sit amet metus. Ut tortor purus, molestie eget dictum eget, vestibulum sed nisi. Quisque posuere feugiat arcu at mattis. Nunc vehicula dui tortor, ut convallis odio.

Voir la source

Sélectionnez

<style type="text/css">
    .myDiv {
        width: 300px;
        height: 300px;
        background-color: #93caff;
        border: 2px solid #696969;
        margin-bottom: 100px;
    }
</style>
<button onclick="overflow('overflow: visible;');">visible</button>
<button onclick="overflow('overflow: hidden;');">hidden</button>
<button onclick="overflow('overflow: scroll;');">scroll</button>
<button onclick="overflow('overflow: auto;');">auto</button>
<div class="myDiv" style="overflow: visible;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies est in dui aliquet vel dictum tellus sagittis. 
    Etiam fringilla laoreet tortor, ut dapibus ligula pharetra eget. Pellentesque faucibus 
    eleifend faucibus. Nam sapien lacus, congue at mattis mattis, blandit ac leo.</p>
    <p>Vestibulum at elit cursus urna lacinia dapibus vel quis magna. Nullam nibh elit, congue eget imperdiet id, bibendum in risus. 
    Suspendisse potenti. Donec nec orci ut ante luctus pharetra. Proin tristique, nibh at 
    porttitor tristique, enim ante aliquam justo, nec feugiat leo dolor quis dui.</p>
    <p>Proin quis enim neque, ut ultricies sapien. Cras risus eros, placerat eget pharetra ut, molestie sit amet metus. Ut tortor 
    purus,     molestie eget dictum eget, vestibulum sed nisi. Quisque posuere feugiat arcu 
    at mattis. Nunc vehicula dui tortor, ut convallis odio.</p>
</div>

VI-B. Positionnement▲

VI-B-1. Flottant | float▲

float�: permet de d�finir le flottement d'une bo�te � gauche, � droite ou pas du tout.

Syntaxe�: none | left | right | inherit

Compatibilit�: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note�: la valeur inherit n'est pas support�e par IE 7 et pr�c�dents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS�: 1

left�: l'�l�ment flotte � gauche�;
right�: l'�l�ment flotte � droite�;
none�: pas de flottement (par d�faut).

Sélectionnez

float: none;
float: left;
float: right;

NONE

LEFT

RIGHT

Voir la source

Sélectionnez

<style type="text/css">
    .float1 {
        width: 500px;
        height: 204px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
 
    .float2 {
        width: 100px;
        height: 100px;
        float: none;
        border: 1px solid black;
        background-color: white;
    }
 
    .float3 {
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid black;
        background-color: yellow;
    }
 
    .float4 {
        width: 100px;
        height: 100px;
        float: right;
        border: 1px solid black;
        background-color: red;
    }
</style>
<div class="float1">
    <div class="float2">NONE</div>
    <div class="float3">LEFT</div>
    <div class="float4">RIGHT</div>
</div>

VI-B-2. Stopper un flottant | clear▲

clear�: permet de d�finir si un �l�ment doit �tre adjacent � un autre ou plac� en dessous.

Syntaxe�: none | left | right | both | inherit

Compatibilit�: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note�: la valeur inherit n'est pas support�e par IE 7 et pr�c�dents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS�: 1

left�: l'�l�ment est d�plac� vers le bas pour se lib�rer des �l�ments flottants de gauche�;
right�: l'�l�ment est d�plac� vers le bas pour se lib�rer des �l�ments flottants de droite�;
both�: l'�l�ment est d�plac� vers le bas pour se lib�rer des �l�ments flottants de gauche comme de droite�;
none�: l'�l�ment ne se d�placera pas (par d�faut).

Sélectionnez

clear : left ;

Flottant � gauche

Flottant � gauche avec marge de 20 pixels

Flottant nettoy�

Sélectionnez

<style type="text/css">
    .div1 {
        float: left;
        border: 1px solid #696969;
        background-color: white;
        height: 50px;
    }
 
    .div2 {
        float: left;
        border: 1px solid #696969;
        background-color: yellow;
        height: 50px;
        margin-left: 20px;
    }
 
    .clear1 {
        clear: left;
    }
</style>
<div style="border: 2px solid #696969; background-color: #93caff; width: 60%; padding: 10px;">
    <div class="div1">Flottant � gauche</div>
    <div class="div2">Flottant � gauche avec marge de 20 pixels</div>
    <div class="clear1">Flottant nettoy�</div>
</div>

VI-B-3. Type de positionnement | position▲

position�: permet de d�finir le mode de positionnement d'un �l�ment.

Syntaxe�: absolute | fixed | relative | static | inherit

Compatibilit�: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note�: la valeur inherit n'est pas support�e par IE 7 et pr�c�dents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS�: 2.1

absolute�: retire compl�tement l'�l�ment du flux et le positionne par rapport � son plus proche anc�tre lui-m�me positionn� (ou par d�faut la fen�tre du navigateur) en fonction des propri�t�s top, right, bottom et left�;
fixed�: position fixe. L'�l�ment reste � sa position dans la fen�tre�;
relative�: d�place l'�l�ment par rapport � sa position dans le flux. Il n'est pas retir� du flux�;
static�: positionnement normal (par d�faut).

Voir la source

Sélectionnez

<style type="text/css">
    .div_position {
        border: 2px solid #696969;
        background-color: #93caff;
        width: 60%;
        height: 400px;
    }
 
    .position {
        width: 100px;
        height: 100px;
        background-color: red;
        left: 10px;
        top: 100px;
    }
</style>
<button onclick="position('position: static;');">static</button>
<button onclick="position('position: fixed;');">fixed</button>
<button onclick="position('position: relative;');">relative</button>
<button onclick="position('position: absolute;');">absolute (sera plac� tout en haut de la page)</button>
<div class="div_position">
    <div class="position" style="position: static;"></div>
</div>

VI-B-4. Position par rapport aux coins | top bottom left right▲

top - bottom - left - right�: permettent de d�finir la position d'un �l�ment. Valeurs en px, %, em... � utiliser pour un positionnement absolu, fixe ou relatif. Si la propri�t� position est � la valeur static, ces propri�t�s n'ont pas d'effet.

Syntaxe�: <length> | <percentage> | auto | inherit

Compatibilit�: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note�: la valeur inherit n'est pas support�e par IE 7 et pr�c�dents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS�: 2.1

Sélectionnez

top: 30px;
left: 50px;
 
bottom: 10px;
right: 30px;

Voir la source

Sélectionnez

<style type="text/css">
    .div_pos {
        position: relative;
        width: 60%;
        height: 400px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
 
    .pos1 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 30px;
        left: 50px;
        border: 1px solid black;
        background-color: white;
    }
 
    .pos2 {
        position: absolute;
        width: 100px;
        height: 100px;
        bottom: 10px;
        right: 30px;
        border: 1px solid black;
        background-color: yellow;
    }
</style>
<div class="div_pos">
    <div class="pos1"></div>
    <div class="pos2"></div>
</div>

VI-B-5. Ordre d'affichage | z-index▲

z-index�: permet, pour les �l�ments positionn�s, de d�finir quel �l�ment sera plac� au-dessus de l'autre. Plus le nombre sera grand, plus il sera au premier plan.

Syntaxe�: auto | <integer> | inherit

Compatibilit�: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note�: la valeur inherit n'est pas support�e par IE 7 et pr�c�dents. IE 8 requiert un doctype. IE 9 supporte inherit.

Compl�ment d'information�: Comprendre z-index.

Version CSS�: 2.1

Sélectionnez

z-index: 1;
z-index: 2;
z-index: 5;

Voir la source

Sélectionnez

<style type="text/css">
    .div_index {
        width: 400px;
        height: 400px;
        border: 2px solid #696969;
        background-color: #93caff;
        position: relative;
    }
 
    .index1 {
        width: 150px;
        height: 150px;
        background-color: yellow;
        z-index: 1;
        top: 50px;
        left: 50px;
        position: absolute;
    }
 
    .index2 {
        width: 150px;
        height: 150px;
        background-color: red;
        z-index: 2;
        top: 80px;
        left: 80px;
        position: absolute;
    }
 
    .index3 {
        width: 150px;
        height: 150px;
        background-color: blue;
        z-index: 2;
        top: 120px;
        left: 120px;
        position: absolute;
    }
</style>
<div class="div_index">
    <div class="index1"></div>
    <div class="index2"></div>
    <div class="index3"></div>
</div>