Exemples interactifs CSS

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

• Mettre du style simplement sur un titre H1 et sur une image : http://jsbin.com/upinet/edit#html,live
• Le même exemple avec une aggrégation des règles pour l'élément H1 : http://jsbin.com/otagic/3/edit#html,live
• Exemple avec des erreurs à corriger : http://jsbin.com/iwebel/4/edit#html,live

Compteurs

• Exemples de numérotation automatique de paragraphes : http://jsbin.com/uqeduz/edit#html,live

Selecteurs

• Exemples de selecteurs pour changer les couleurs de divers éléments, titres, paragraphes, etc : http://jsbin.com/ixabaf/edit#html,live
• Exemple avec des patterns de type "élément élément" ou "élément.class" ou ".class" : http://jsbin.com/iforor/3/edit#html,live
• Exemple avec des patterns de type "#id", "élément + élément", "élément > élément" : http://jsbin.com/inodox/2/edit#html,live
• Exemple avec des patterns de type "élément[attribut]", "élément[attribut="valeur"] et "élément[attribut~="valeur"] : http://jsbin.com/evoyod/2/edit#html,live

Pseudo classes

•  Exemple d'utilisation des pseudos classes focus et focus:over : http://jsbin.com/uzejag/2/edit#html,live

Pseudo éléments

• Exemple d'insertion de texte dans le texte à l'aide de pseudo-éléments :before, etc. : http://jsbin.com/inibin/2/edit#html,live

Héritage

• Exemple d'héritage de styles : http://jsbin.com/enedoj/3/edit#html,live

Propriétés background et variantes

• Exemple d'utilisation de background et de background-image : http://jsbin.com/ajoyin/3/edit#html,live
• Exemple de background-repeat : http://jsbin.com/oxevoc/2/edit#html,live
• Exemple de backgound avec no-repeat : http://jsbin.com/ufuzut/2/edit#html,live
• Exemple avec positionnement du background : http://jsbin.com/ixuzed/2/edit#html,live

Propriété text-decoration

• Exemple d'utilisation pour du gras, de l'italique, etc : http://jsbin.com/ukozop/3/edit#html,live

Propriété font

• Exemple d'utilisation de font avec diverses valeurs : http://jsbin.com/abahan/2/edit#html,live

Propriété border

•  Exemples d'utilisation de la propriété border : http://jsbin.com/adudaq/3/edit#html,live

Propriété margin et padding

• Exemple d'utilisation de margin et padding : http://jsbin.com/ovadoq/2/edit#html,live

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

• Cacher un élément... Mettre la valeur de display à "none" revient à cacher un élément. Différence par rapport à la propriété visibility : il n'occupera plus l'espace. Exemple : http://jsbin.com/idekey/2/edit#html,live
• Afficher un élément comme un 'block' ou comme un 'inline'. Un élément (par exemple un <li> ou un <a href>) sous forme de bloc occupe toute la largeur et possède des lignes vides avant et après lui.
  • Exemple1 : http://jsbin.com/avutax/2/edit#html,live
  • Exemple 2 : http://jsbin.com/efisus/3/edit#html,live
• Autre exemple qui mélange les précédents : http://jsbin.com/itozod/2/edit#html,live

Propriété position

• Exemple de positions relatives :
  • Exemple 1 : http://jsbin.com/eyopuf/2/edit#html,live
  • Exemple 2 qui montre que même si on décale un élément, sa position "normale" est réservée : http://jsbin.com/ikedaw/2/edit#html,live
• Exemple d'un élément qui demeure à une position fixe même quand on scrolle la page : http://jsbin.com/ohufuh/2/edit#html,live
• Exemple de position absolue : http://jsbin.com/ayugom/2/edit#html,live
• Exemple montrant les positions relatives, statiques et absolues : http://jsbin.com/epicej/2/edit#html,live

Propriété z-index

• Utile pour règler l'ordre avant/arrière lorsque plusieurs éléments sont superposés. Exemple : http://jsbin.com/itefuh/2/edit#html,live
• Autre exemple : http://jsbin.com/iparux/3/edit#html,live

Propriété float

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

• Exemple très simple d'une image flottante en position "right" : http://jsbin.com/iyepim/2/edit#html,live
• Exemple avec plusieurs images : http://jsbin.com/ototor/3/edit#html,live
• Exemple d'utilisation de la propriété "clear" qui interdit l'adjacence avec des éléments en float : http://jsbin.com/emakiv/3/edit#html,live
• Exemple d'utilisation de float : http://jsbin.com/urimuk/2/edit

 Propriété width

• Exemple d'utilisation de width, min-width, max-width, avec diverses valeurs (px, em, % etc.) : http://jsbin.com/ekodeb/2/edit#html,live

Propriété height

• Exemple d'utilisation de height, min-height, max-height, avec diverses valeurs (px, em, % etc.) : http://jsbin.com/ezajut/2/edit#html,live

Propriété line-height

• Exemple d'utilisation de cette propriété, qui permet de règler la place verticale occupée par une ligne : http://jsbin.com/ikixut/2/edit#html,live

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.

• Exemple d'utilisation d'overflow : http://jsbin.com/enodix/3/edit#html,live

Barre de navigation verticale

• Etape 1 : quatre liens HTML. Voir : http://jsbin.com/ajakuq/2/edit#html,live
• Etape 2 : on restyle la liste <ul>, on diminue les marges et le padding : http://jsbin.com/emumot/2/edit#html,live
• Etape 3 : on style les liens <a href>  : http://jsbin.com/atareh/2/edit#html,live
• Etape 3 : on gère le passage de la souris sur les liens, etc.. : http://jsbin.com/uleyil/2/edit#html,live

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".

• Avec inline :
  
  • Etape 1 : http://jsbin.com/ejoyek/2/edit#html,live
  • Etape 2 : barre complète : http://jsbin.com/afugog/2/edit#html,live
     
• Avec 'float' :
  
  • Etape 1 : http://jsbin.com/urosek/2/edit#html,live
  • Etape 2 : http://jsbin.com/osasok/2/edit#html,live

Galerie d'images

• Exemple à étudier : http://jsbin.com/asosoz/2/edit#html,live