Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 15:02, 11 Mai 2012 par MichelBuffa
0

Exemples interactifs CSS

De $1

  1. 1. Introduction
    1. 1.1. Déclaration simples de propriétés CSS :
    2. 1.2. Compteurs
    3. 1.3. Selecteurs
    4. 1.4. Pseudo classes
    5. 1.5. Pseudo éléments
    6. 1.6. Héritage
    7. 1.7. Propriétés background et variantes
    8. 1.8. Propriété text-decoration
    9. 1.9. Propriété font
    10. 1.10. Propriété list
    11. 1.11. Propriété border
    12. 1.12. Propriété margin et padding
    13. 1.13. Propriété visibility
    14. 1.14. Propriété display
    15. 1.15. Propriété position
    16. 1.16. Propriété z-index
    17. 1.17. Propriété float
    18. 1.18.  Propriété width
    19. 1.19. Propriété height
    20. 1.20. Propriété line-height
    21. 1.21. Propriétés overflow
  2. 2. Exemples complets mettant en oeuvre plusieurs éléments CSS en même temps
    1. 2.1. Barre de navigation verticale
    2. 2.2. Barre de navigation horizontale
    3. 2.3. Galerie d'images

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é list

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

 

 
Powered by MindTouch Deki Open Source Edition v.8.08