Exemples interactifs CSS

De $1

Version de 14:30, 24 Oct 2020

cette version.

Revenir à liste des archives.

Voir la version actuelle

Introduction

Cette page contient juste des liens vers des petits exemples d'utilisation de règles CSS, la plupart de ces exemples sont interactifs et tournent dans l'IDE en ligne jsBin.com.

Déclaration simples de propriétés CSS :

Compteurs

Selecteurs

Pseudo classes

Pseudo éléments

Héritage

Propriétés background et variantes

Propriété text-decoration

Propriété font

Propriété border

Propriété margin et padding

Propriété visibility

  • La propriété visibility sert à montrer/cacher un élément. Même caché, il occupera le même espace dans la page qu'avant. Tester cet exemple interactif (modifier la valeur de la propriété visibility) :http://jsbin.com/eseceq/2/edit#html,live

Propriété display

Propriété position

Propriété z-index

Propriété float

Un élément "flotte" horizontalement à droite ou à gauche et il "pousse" les autres.

 Propriété width

Propriété height

Propriété line-height

Propriétés overflow

Cette propriété permet de gérer le comportement des éléments lorsqu'ils sont plus grand que la zone qui leur est allouée : faire apparaitre une ou deux barres de scrolling, apparaitre en superposition, etc.

Exemples complets mettant en oeuvre plusieurs éléments CSS en même temps

Barre de navigation verticale

Barre de navigation horizontale

On reprend la même approche. Cependant pour faire une barre horizontale on peut utiliser deux approches : utiliser la propriété 'inline' ou 'float' sur les éléments <li> de la liste. Si on veut des liens de même largeur il faut utiliser "float".

Galerie d'images