4/11/14
Pour comprendre la mise en place des boites, il est plus qu'utile, il est indispensable de d'abord les voir ! Cela permet de ne pas faire d'erreur sur l'interprétation que l'on a du rendu fait par le navigateur.
Nous voulons visualiser les boites d'éléments sur une page Web : le meilleur moyen de visualiser une boite est de lui mettre une bordure.
Lorsqu'il s'agit d'une seule boite, il est facile d'ajouter une propriété CSS de définition de bordures pour l'élément ; mais il serait fastidieux d'écrire cette règle pour chaque boite de la page. Pour voir l'ensemble des éléments html d'une page, il est plus simple d'utiliser un sélecteur CSS particulier appelé sélecteur universel et représenté par le caractère asterisque (*).
Exemple :
* { border : 1px dotted red}
Dans cette règle, l'astérisque est le sélecteur, elle signifie que la règle s'applique à toute balise du document ; donc dans le document html concerné, tous les éléments auront une bordure en pointillé rouge de 1 pixel de large ce qui permettra de bien visualiser leur placement.
Ouvrez le document "keepers" et rajoutez la règle CSS ci-dessus. Vous obtenez ainsi des bordures pour toute boite d'élément.
Remarque : on voit ainsi l'existence des valeurs par défaut des marges et des espacements : les boites ne se touchent pas ; il n'y a pas de normalisation sur ces valeurs par défaut, elles peuvent être différentes d'un navigateur à l'autre.
On peut vouloir mettre à zéro les marges et espacements au lieu d'accepter ces valeurs par défaut ; cela permet de controler de A à Z l'apparence du document. C'est là que le sélecteur universel est très utile :
* { margin : 0px ; padding:0px;}