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

• Exemple de modification des "marqueurs de listes", mettre des carrés au lieu de points, etc. : http://jsbin.com/umawuk/2/edit#html,live⁴⁴
• Une image comme marqueur de liste : http://jsbin.com/ucotim/3/edit#html,live⁴⁵
  • Même exemple avec une syntaxe plus courte : http://jsbin.com/ipiquz/2/edit#html,live⁴⁶
  • Même exemple mais qui marche de manière identique sous IE et le reste des navigateurs : http://jsbin.com/atiqag/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⁷⁸