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 :
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
Propriétés background et variantes
Propriété text-decoration
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
- 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.
- Autre exemple qui mélange les précédents : http://jsbin.com/itozod/2/edit#html,live