L'effet de Cascade
Définition
La cascade permet de modifier le design d'éléments particuliers. Elle consiste à assigner des propriétés CSS en fonction des éléments dans lesquels il s'intégre ou dépend.
Il existe 3 modes de définition
- Le design dissocié
- le design commun
- Le design parallèle
Une autre définition indique que l'effet de cascade permet d'assigner un desing d'un élément en factorisant certaine propriété pouvant s'appliquée à son élément parent.
Le design commun
Le design commun va permettre d'associer des propriété CSS en fonction de leur tag (I.E le nom de la balise)
On peut le considéré comme le des général de la balise
- a{text-decoration:none;padding:0 3px;}
- a:hover{font-variant:bold;}
ce qui signifie que (sauf style dissocié) toutes les balises d'ancrages n'auront pas de soulignement, un padding de 3px en largeur et celles-ci se graissera lorsque l'utilisateur passera la souris dessus
Le design dissocié
Il permet d'assigner un style à un élément mais dont l'intégration est différente de sa définition classique
- menu li a{
- background:#EDEDED;
- padding: 0 8px;
- color:#000;
- text-decoration:none;
- }
Dans cet exemple, nous ne definissons pas toutes les balises d'ancrages mais seulement celles intégrées dans des list-item eux-mêmes intégrés dans un menu
Le design parallèle
Le design parallèle permet d'associer des propriété CSS communes à différente intégration. Il complète et factorise le design dissocié
- menu li a,ul li a{
- background:#EDEDED;
- padding: 0 8px;
- color:#000;
- text-decoration:none;
- }
Dans cet exemple, nous ne definissons pas toutes les balises d'ancrages mais seulement celles intégrées dans des list-item eux-mêmes intégrés dans un menu et dans des listes non ordonnées.
Donc ces intégrations prendront la définition
- <menu>
- <li>
- <a href="#">ACCEUIL</a>
- </li>
- <li>
- </menu>
- <ul>
- <li>
- <a href="#">ITEM 1</a>
- </li>
- <li>
- </ul>
Mais celle-ci : non
- <p>
- <a href="#">cliquez ici</a>
- </p>