Accueil » Développement » CSS » Propriétés CSS

Sommaire
  1. Propriétés de couleur et de fond
    1. background-color
    2. background-image
    3. background-position
    4. background-repeat
      1. round
      2. space
    5. background-size
    6. background-attachment
    7. color
  2. Propriétés de boîte
    1. border
    2. height
    3. width
    4. margin
    5. padding
    6. vertical-align
  3. Propriétés des polices
    1. font
    2. font-style
    3. font-variant
    4. font-weight
    5. font-size
    6. font-family
  4. Propriétés de texte
    1. Letter-spacing
    2. Line-height
    3. Text-decoration
    4. Text-align
    5. Text-indent
    6. Text-shadow
    7. White-space
    8. Word-spacing
    9. Quotes
  5. Propriétés de positionnement
    1. Clear
    2. Display
    3. Float
    4. overflow
    5. Position
    6. Top, right, bottom, left
    7. Z-index

1-Propriétés de couleur et de fond

La propriété background sert à définir l'arrière-plan d'un site web ou encore une image dans un conteneur.

Elle peut être associée avec les propriétés suivantes :

  • - background-color
  • - background-image
  • - background-position
  • - background-repeat
  • - background-size
  • - background-attachment

Background-color :

Ci-dessous, un fond bleu ciel :


body {background:SkyBlue}  /*expression raccourcie*/
body {background-color:SkyBlue} /*expression recommandée*/

Par défaut, si vous ne renseignez pas de couleur, le background est transparent. Il est possible de renseigner une couleur de différentes manières (voir plus bas la propriété color).


Background-image :

/*expression raccourcie*/

body{

background:url('dossier/votre_image.jpg') no-repeat

}   


/*expression recommandée*/

body{

background-image:url('dossier/votre_image.jpg') no-repeat

} 


On constate qu'une image apparaît en arrière-plan (haut à gauche par défaut).

Il faut impérativement renseigner (correctement) le chemin de l'image via l'url. Par ailleurs, il est possible de placer des images au format gif, jpg, png, svg...


Background-position :

body { 

background: url( "dossier/votre_image.jpg" ) bottom right no-repeat 

} /*expression raccourcie*/

body { 

background-image: url( "dossier/votre_image.jpg" );
background-position: bottom right;
background-repeat:no-repeat 

}/*expression recommandée*/

body { 

background: url( "dossier/votre_image.jpg" ) 100% 100% no-repeat 

}
/*variante : on indique la position à l'aide de chiffres*/

L'image se trouve bien en bas à droite du cadre.


Background-repeat :

Répéter une image :


body{background: url('dossier/votre_image.jpg') repeat}   /*expression raccourcie*/
body{background-image: url('dossier/votre_image.jpg') repeat} /*expression recommandée*/

Image originale :

L'image se répète en arrière-plan.

Répéter une image horizontalement ou verticalement :


/*horizontale*/
body { background: url( 'dossier/votre_image.jpg' ) repeat-x }   /*expression raccourcie*/
body { background-image: url( 'dossier/votre_image.jpg' ) repeat-x } /*expression recommandée*/

/*verticale*/
body { background: url( 'dossier/votre_image.jpg' ) repeat-y }
body { background-image: url( 'dossier/votre_image.jpg' ) repeat-y }

NB : X = axe horizontal. Y = axe vertical.

  1. round : L'image est répétée et étirée au maximum du conteneur sans rognage ni espace.
  2. space : L'image est répétée de manière égale sans rognage dans le conteneur.
round

.class{
width:400px;
height:200px;
background:url(image) repeat round}

space

.class{
width:400px;
height:200px;
background:url(image) repeat space}

Il est également possible de répéter plusieurs background :


.class{
background:url(image) repeat-x,url(image) repeat-y;
width:300px;
height:200px}

Informations complémentaires


Background-size :

body {
background: url( "dossier/votre_image.jpg" ) no-repeat bottom right;
background-size:valeur valeur
} /*expression raccourcie*/

body { 

background-image: url( "dossier/votre_image.jpg" ) 100% 100% no-repeat;
background-size:valeur valeur

} 

/*expression recommandée*/

Image originale :

L'image est bien redimensionnée.

La propriété background-size peut se définir de deux façons différentes :

-Contain : permet à l'image de remplir toute la surface sans subir de déformation, mais l'image sera tronquée.

-Cover : spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi petite que possible tout en assurant que les deux dimensions soient supérieures ou égales aux dimensions de la surface de positionnement.

Exemple de background-size

Par ailleurs, en plus de background-size, de nouvelles propriétés sont apparues avec CSS3 :

-background-clip : cette propriété permet de définir les limites de l'arrière-plan à l'intérieur d'un bloc.

Elle comprend trois valeurs :

  1. border-box : L'arrière plan s'étend jusqu'à la limite de chaque bord.
  2. padding-box : Aucun arrière-plan sera présent en-dessous de la bordure : l'extrême limite sera celle de l'espacement.
  3. content-box : L'arrière-plan se limite au contenu.

Exemple d'utilisation de background-clip

-background-origin :

La propriété background-origin positionne le point d'origine de l'image d'arrière plan.

  1. border-box : La position de l'arrière-plan est relative au bord : l'image peut donc se positionner derrière les bords.
  2. padding-box : La position de l'arrière plan est relative à la marge interne.
  3. content-box : La position de l'arrière plan est relative au contenu.

-Multiples background :

Exemple plusieurs background
Background-attachment :

Il existe trois valeurs possibles :

  1. scroll
  2. fixed
  3. inherit

La propriété background-attachment sert à déterminer si une image de fond suit le déroulement du contenu ou bien si elle reste fixe. Par défaut, la valeur est scroll, ce qui signifie que l'image suivra le déroulement de la page.

background-attachment :

Exemple avec la valeur fixed
Color :

La propriété color permet de définir tout simplement une couleur.


.votre_class{color:black}

Dans le code ci -dessus, la couleur sera donc noire (pour être précis, elle sera de valeur noire, le noir comme le blanc étant des valeurs et non des couleurs)

Remarque : il est possible d'écrire de différentes manières la couleur d'un élément :

-Soit en utilisant le nom des couleurs (par exemple blue pour bleu)

-Soit en utilisant une valeur hexadécimale (par exemple #ffff00 pour rouge, peut s'écrire aussi #ff0 dans sa forme courte)

-Soit en utilisant une valeur décimale (par exemple color:rgb(0,0,0) pour noir), à laquelle il est possible d'ajouter de la transparence. Par exemple color:rgba(0,0,0,.4), le noir devient moins opaque.

-Soit en utilisant les coordonnées cylindriques HSL (par exemple color:hsl(237,100%,50%) pour bleu, et de la même manière qu'avec RGB, on peut ajouter de la transparence. Par exemple color:hsla(237,100%,50%,.4).

Pour connaître la différence entre RGB et HSL.

2-Propriétés de boîte

Border :

La propriété border (bordure en français) permet de placer une bordure autour d'un élément. Elle regroupe différentes propriétés :

  1. border-color
  2. border-style
  3. border-width

Par ailleurs, on peut renseigner la propriété border avec :

  1. border-left
  2. border-bottom
  3. border-right
  4. border-top

Exemple classique :


.votre_class{border:1px solid black}

Autre exemple classique :


.votre_class{border:1px solid red;border-top:1px solid black}

Exemple avec la valeur double :


.votre_class{border:3px double #555}

Exemple avec la valeur dotted :


.votre_class{border:3px dotted #555}

Exemple avec la valeur dashed :


.votre_class{border:3px dashed #555}

Exemple avec la valeur groove :


.votre_class{border:5px groove red}

Exemple avec la valeur ridge :


.votre_class{border:5px ridge red}

Exemple avec la valeur inset :


.votre_class{border:5px inset red}

Exemple avec la valeur outset :


.votre_class{border:5px outset red}

NB : Sur Internet Explorer, une bordure bleue apparaît sur les images qui ciblent des liens. Pour enlever ce contour, il faut mettre la valeur "none".


Height :

La propriété height désigne la hauteur d'un élément.

Exemple :

La hauteur de ce rectangle est de 50 pixels.


Width :

La propriété width désigne la largeur d'un élément.

Exemple :

La largeur de ce rectangle est de 200 pixels.


Margin :

Il est possible de définir l'espacement d'un élément qui le séparera des autres éléments avec la propriété margin.

Pour exemple, on souhaite mettre une marge de 20 pixels sur chaque bord à l'élément <p> qui se trouve dans la div (entourée d'une ligne noire) ci-dessous :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget ligula quis libero mollis dapibus. Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Aenean sollicitudin.

Nous aurons une marge de 20 pixels en haut, en bas, à droite et à gauche de la div.

On peut par ailleurs spécifier une marge différente pour chaque côté, comme par exemple :


/*nous obtenons une marge de 20 pixels en haut et en bas, et de 10 pixels à gauche et à droite.*/
p{margin:20px 10px 20px 10px}


Padding :

Le padding se différencie du margin en ceci que le padding permet un espacement à l'intérieur même d'un élément et non à l'extérieur comme le fait la propriété margin.

Reprenons l'exemple plus haut et ajoutons à l'élément <p> un padding de 10px sur chaque côté.

Nous avons donc défini une marge extérieure de 20 pixels et une marge intérieure de 10 pixels à l'élément <p> par rapport à la <div> dans lequel il se trouve.

Dans le cas où vous allez définir une largeur et une hauteur à un élément de type block, pensez bien que les marges vont diminuer la taille originale. C'est ce qu'on appelle le box model.

Mais heureusement, avec le CSS3, est arrivée la propriété border-sizing. Le padding et le margin d'un élément n'augmentent plus sa largeur.

A noter qu'il peut y avoir des rendus différents selon les navigateurs, c'est pourquoi il est recommandé de mettre ce code dans votre feuille de style via le sélecteur universel symbolisé par une astérisque :


/*On met ainsi les compteurs à zéro et on travaille sur une base saine et vierge.*/
*{margin:0;padding:0}

Vertical-align :

La propriété vertical-align désigne comment doit se positionner un élément verticalement à l'intérieur d'une boîte en ligne (<span> ou <img> par exemple) ou à l'intérieur d'une cellule d'un tableau (table).

Elle regroupe de nombreuses valeurs :

  1. baseline (valeur par défaut)
  2. sub
  3. super
  4. text-top
  5. text-bottom
  6. middle
  7. top
  8. bottom

Elle peut être associée avec des unités de longueurs (valeurs positives ou négatives) telles que : px, %, ex, rem, em...

Dans le cas d'un tableau :

vertical-align:inherit vertical-align:middle vertical-align:top vertical-align:bottom

.votre_class{vertical-align:middle}

Dans le cas d'un bloc en ligne :

Vertical-align baseline

Vertical-align middle

Vertical-align sub

Vertical-align super

Vertical-align top

Vertical-align text-top

Vertical-align bottom

Vertical-align text-bottom

Vertical-align text-bottom

Vertical-align 80%

Vertical-align -80%

3-Propriétés des polices

Font :

La propriété font (police de caractères en français) permet de définir une police au sein d'un document web.

Elle est associée aux propriétés suivantes :

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size
  5. line-height
  6. font-family

On peut définir la taille de la police ainsi que la taille du line-height dans sa version raccourcie comme ceci :


.votre_class{font:12px/14px}


Font-style :

La propriété font-style permet de définir l'orientation de la police.

On distingue trois valeurs à la propriété font-style :

  1. italic
  2. normal
  3. oblique

Voici un exemple classique :

Ceci est un texte en italique

.votre_class{font-style:italic}


Font-variant :

La propriété font-style permet de définir la police en petites majuscules.

Voici un exemple :

ceci est un texte en petites majuscules

.votre_class{font-variant:small-caps}


Font-weight :

La propriété font-weight permet de définir la graisse de police d'un élément.

On peut aussi écrire en valeurs numériques : entre 100 et 900, 500 correspond à la graisse par défaut et 700 à gras.

Par défaut, voici ce que l'on obtient :

Ceci est un texte avec graisse par défaut

.votre_class{font-weight:500}

Ceci est un texte en gras

.votre_class{font-weight:700} /*ou*/ .votre_class{font-weight:bold}


Font-size :

La propriété font-size permet de définir la taille de la police.

Elle peut s'écrire avec différentes unités de longueur comme em, rem, px, % (pourcentage)... (voir unités de longueur)

On différencie deux types de taille : taille relative et taille absolue.

Tailles relatives :

  1. smaller
  2. larger
  3. pourcentage

Tailles absolues :

  1. xx-small
  2. x-small
  3. small
  4. medium
  5. large
  6. x-large
  7. xx-large

Les tailles absolues dépendent du navigateur et de l'OS (système d'exploitation).


Font-family :

La propriété font-family permet de définir une ou plusieurs polices de caractères. Elle s'écrit de cette manière :


body{font-family:"Roboto",Helvetica,sans-serif}

Si l'on indique plusieurs polices, c'est au cas où l'internaute ne possèderait pas la police spécifiée (ici "Roboto") sur son ordinateur, il aura alors à la place la police Helvetica. La police que l'on met entre guillemets est celle qui est prioritaire.

La propriété font-family peut être associée à la règle @font-face. Si vous souhaitez mettre en place une police de caractères plus originale, voici comment s'y prendre :

Rendez-vous sur Google fonts ou sur Fontsquirrel. Vous choisissez une police. Pour l'exemple, nous prendrons la police Lato.

Sur Google Fonts, vous récupérez le lien où se trouve la police. Il doit ressembler à ceci :


<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

Soit vous mettez ce code directement dans votre document (entre <head> et </head>), soit vous récupérez la css associée et vous l'intégrez à votre propre feuille CSS. Pour récupérer la police de caractères, ouvrez un onglet dans votre navigateur et prenez dans le code Google cette partie :


http://fonts.googleapis.com/css?family=Lato

Vous devriez voir ceci :


/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Copiez puis collez ce code dans votre feuille de style. Avec cette méthode, inutile de mettre le lien dans l'entête de votre document.

Sur FontSquirrel, il vous suffit de choisir une police et de la télécharger. Vous avez également la possibilité d'uploader une fonte en .ttf et vous obtiendrez différents formats (.eot, .svg, .woff) ceci pour la compatibilité entre navigateurs.

Propriétés du texte

Letter-spacing :

La propriété letter-spacing permet de définir un espacement entre chaque lettre d'un mot.

Vous pouvez renseigner l'espacement en px, en em, en rem... mais pas en pourcentage. Les valeurs négatives sont acceptées.

Letter spacing

.votre_class{ letter-spacing: .5rem }

Letter spacing

.votre_class{ letter-spacing: -.1rem }


Line-height :

La propriété line-height sert à définir la hauteur d'un élément. Elle peut s'appliquer à toute les balises XHTML/HTML de type inline.

Exemple sans line-height : (le texte se trouve en haut de la div)

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Exemple avec line-height :

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.votre_class{height:60px;line-height:60px}/*ou*/.votre_class{line-height:60px}

Vous constatez que le texte est désormais centré horizontalement.

comprendre line-height


Text-decoration :

La propriété text-decoration permet de personnaliser l'apparence d'un texte, d'un titre, d'un lien.

On utilise souvent cette propriété pour enlever le trait sur un lien hypertexte.

Exemple de soulignement :

texte souligné

.votre_class{text-decoration:underline}

Exemple de surlignement :

texte surligné

.votre_class{text-decoration:overline}

Exemple de texte barré :

texte barré

.votre_class{text-decoration:line-through}

Exemple sans soulignement :

texte sans soulignement

.votre_class{text-decoration:none}

Exemple avec plusieurs valeurs :

texte avec plusieurs valeurs

.votre_class{text-decoration:underline line-through}

Aller plus loin : un article sur le sujet


Text-align :

La propriété text-align permet l'alignement d'un texte. Elle regroupe cinq valeurs :

  1. center
  2. justify
  3. left
  4. right
  5. inherit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt est nec magna varius pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam mattis, dui in tempor posuere, sem nibh efficitur elit, et bibendum eros lorem ac massa.

.votre_class{text-align:center}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt est nec magna varius pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam mattis, dui in tempor posuere, sem nibh efficitur elit, et bibendum eros lorem ac massa.

.votre_class{text-align:justify}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt est nec magna varius pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam mattis, dui in tempor posuere, sem nibh efficitur elit, et bibendum eros lorem ac massa.

.votre_class{text-align:left}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt est nec magna varius pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam mattis, dui in tempor posuere, sem nibh efficitur elit, et bibendum eros lorem ac massa.

.votre_class{text-align:right}


Text-indent :

La propriété text-indent permet de définir le retrait à appliquer à la première ligne d'un bloc de texte. Elle sera uniquement appliquée à la première ligne de texte :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel congue neque. Vestibulum posuere purus et porta auctor. Nulla vulputate mi eget augue tincidunt, nec lacinia sem dapibus.

.class { 
  text-indent: valeur; 
 
}

Vous pouvez utiliser une valeur négative pour appliquer un retrait à la première ligne, comme par exemple si vous souhaitez masquer un texte en le remplacant par une image par exemple.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel congue neque. Vestibulum posuere purus et porta auctor. Nulla vulputate mi eget augue tincidunt, nec lacinia sem dapibus.

Cette propriété permet également de personnaliser l'apparence d'un texte. Il est possible de définir plusieurs décorations en énumérant et séparant d'un espace.


Text-shadow :

La propriété text-shadow, spécificité CSS3, permet de créer des ombres sur un texte. Elle regroupe quatre valeurs :

  1. offset-x : Décalage vers la droite
  2. offset-y : Décalage vers le bas
  3. blur : Valeur du flou
  4. color : Couleur

Exemple de texte ombragé


.votre_class{text-shadow:3px 3px 3px rgba(0,0,0,.4)}

Voir aussi la rubrique CSS3


White-space :

La propriété white-space permet de gérer les espaces et les retours à la ligne d'un bloc de texte par rapport à son conteneur.

Elle regroupe les valeurs suivantes :

  1. normal (autorise le retour à la ligne)
  2. nowrap (pas de retour)
  3. pre (similaire à la balise html <pre>)
  4. pre-line
  5. pre-wrap
  6. inherit

Les propriétés word-break et word-wrap peuvent également être employées pour déterminer comment s'effectuent les retours à la ligne d'un texte au sein d'un élément.


Word-spacing :

La propriété word-spacing peut pendre une valeur :

  1. numérique positive ou négative suivie de px ou % ou pt ou em. Le pixel est la valeur par défaut.
  2. normal, valeur par défaut, dépend du navigateur.
  3. inherit, hérite de son parent.

L'espace va dépendre du navigateur et de la justification du texte (text-align).


Quotes :

La propriété quotes permet de modifier le rendu visuel des guillemets dans les éléments HTML de citations.

Pour cela, une ou plusieurs paires de guillemets doivent être précisées. De base, cette propriété se présente de cette manière :


q {
quotes: " « "  " » ";
}

L'élément HTML <q> (quote, à ne pas confondre avec la propriété quotes) indique que le contenu d'un élément est une citation courte, ne necessitant pas plusieurs paragraphes.

Voici par défaut le rendu de l'élément <q> dans les navigateurs :

Rien ne sert de courir, il faut partir à point.

<q>Rien ne sert de courir, il faut partir à point</q>

La propriété quotes peut prendre quatre valeurs via la propriété content :

  1. open-quote
  2. close-quote
  3. no-open-quote
  4. no-close-quote

Pour une citation plus longue, il vous faudra utiliser l'élément HTML <blockquote> :

Le jour viendra où les personnes comme moi regarderont le meurtre des animaux comme ils regardent aujourd'hui le meurtre des êtres humains.


<blockquote cite="http://www.citation-celebre.com/citations/15912">
<p>Le jour viendra où les personnes comme moi regarderont le meurtre des animaux comme ils regardent aujourd'hui le meurtre des êtres humains.</p>
</blockquote>  

Ressources sur le sujet :

Propriété CSS quotes

Attribut <cite> et élément <blockquote> (EN)

Quelques exemples pour personnaliser <blockquote> (EN)

Propriété de positionnement :

Clear :

La propriété clear fonctionne sur des éléments flottant (de type block) et permet à un élément de se positionner en dessous par rapport à un élément précédent (une sorte de retour à la ligne forcée). Elle comporte plusieurs valeurs telles que :

  1. none : par défaut.
  2. left : l'élément va se positionner à gauche.
  3. right : l'élément va se positionner à droite.
  4. both : l'élément va se positionner en dessous de tous les éléments en position float.
  5. inherit : même valeur que celle de l'élément parent.

Passons maintenant à la pratique :

Exemple à gauche :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in aliquet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper pellentesque erat, aliquam finibus erat volutpat tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in aliquet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper pellentesque erat, aliquam finibus erat volutpat tincidunt.


<p style="width:200px;float:left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in aliquet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper pellentesque erat, aliquam finibus erat volutpat tincidunt.</p> 
<p style="float:left;clear:left;width:200px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in aliquet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper pellentesque erat, aliquam finibus erat volutpat tincidunt.</p> 

Exemple à droite :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in aliquet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper pellentesque erat, aliquam finibus erat volutpat tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in aliquet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper pellentesque erat, aliquam finibus erat volutpat tincidunt.


<p style="width:200px;float:right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in aliquet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper pellentesque erat, aliquam finibus erat volutpat tincidunt.</p>
<p style="width:200px;float:right;clear:right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in aliquet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper pellentesque erat, aliquam finibus erat volutpat tincidunt.</p>


Display :

La propriété display permet de définir le type de rendu que pourra avoir un élément. Par défaut, chaque élément possède la propriété display. Par exemple, une <div> est de type block, un élément <span> de type inline.

Les deux principales valeurs utilisées sont block et inline-block. Par ailleurs, la valeur none peut être très utile dans certains cas.

Article complet sur la valeur inline-block

CSS3 a introduit le module flexbox layout qui se présente comme un mode de mise en page permettant la disposition d'éléments de manière dynamique (flexible).

On y retrouve la propriété display qui comprend deux valeurs :

  1. flex : correspond à la valeur block
  2. inline-flex : correspond à la valeur inline-block

Ressources sur le module flexbox :

Guide complet flexbox

Quelques exemples flexbox sur Codepen

mise en page avec flexbox

Voir aussi sur ce blog : menu avec flexbox

Outil en ligne pour créer automatiquement des éléments avec Flexbox. Pratique et gain de temps assuré.

Mise en garde contre l'utilisation de Flexbox en ce qui concerne la mise en page d'un site. (EN)

NB : Un autre modèle de mise en page CSS a vu le jour : CSS Grid layout (EN).

mise en page avec CSS grid
Float :

En utilisant la propriété float sur un élément, on indique à celui-ci qu'il doit être retiré du flux pour se positionner selon la valeur qu'on lui aura attribuée.

La propriété float peut prendre les valeurs suivantes :

  1. none : pas de flottement, remet l'élément à sa valeur initiale.
  2. left : positionnement à gauche.
  3. right : positionnement à droite.
  4. inherit : hérite de son parent.

Cette image est positionnée à gauche (avec du texte autour) :

Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.

Cette image est positionnée à droite (avec du texte autour) :

Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.


Overflow :

La propriété overflow permet de gérer le cas où un contenu dépasse et atteint la limite fixée en hauteur ou en largeur d'un bloc. Elle comprend les valeurs suivantes :

  1. visible : par défaut. Le contenu n'est pas rogné et peut dépasser le bloc.
  2. hidden : le contenu est rogné. Il n'y a pas de barre de défilement.
  3. scroll : le contenu est rogné. Des barres de défilement apparaissent sur le bloc.
  4. auto : les barres de défilement sont affichées uniquement si le contenu dépasse la taille du bloc.

Position :

Comme son nom l'indique, la propriété position permet de positionner un élément. Elle peut prendre des valeurs telles que :

  1. static : valeur par défaut.
  2. absolute : permet à un élément de sortir du flux et de se positionner n'importe où sur la page.
  3. fixed : permet la même chose que la valeur absolute, à la différence que l'élément va suivre le défilement de la page.
  4. relative : permet de décaler l'élément par rapport à sa position initiale.
  5. sticky : spécificité CSS3 (support Firefox, Chrome, Opera et Safari). Permet de fixer un élément. Voir un exemple de la propriété sticky sur ce blog.
  6. inherit : hérite de son parent.

Top, right, bottom, left :

Ces quatre propriétés fonctionnent avec ces valeurs :

  1. absolute
  2. fixed
  3. relative
  4. sticky

Ainsi, allons-nous placer des éléments comme sur cet exemple :


.votre_class{position:absolute;top:0;left:0}


Z-index :

Cette propriété permet l'empilement d'éléments et ne fonctionne que sur des éléments positionnés (voir la propriété position plus haut).


.votre_class{position:absolute;right:0;
bottom:0;
z-index:1}

.votre_class1{
position: absolute;
right:30px;
bottom:30px;
z-index:2}   

Article sur z-index