4/11/14
Principe : si vous ne donnez pas de valeur à une propriété, le navigateur utilise une valeur par défaut.
Certaines valeurs par défaut sont définies par les normes CSS. Pour d'autres, il n'y a pas de norme, elles sont choisies par le navigateur.
Ajoutez une autre règle définissant la mise en forme de Daily tasks; choisissez la mise en forme courrier 14 px #333366.
Comment modifier une règle déjà saisie ? Par exemple la règle h2 : il suffit de sélectionner sa déclaration dans l'en-tête, puis d'aller dans le constructeur de feuille de style, de modifier la valeur de l'attribut souhaité, de mettre à jour le style et de valider. On peut aussi modifier directement la valeur dans le code, mais cela nécessite de connaitre le nom de l'attribut et ses valeurs possibles.
Comment supprimer une règle ? utiliser le bouton Supprimer (corbeille) dans le constructeur de feuille de style ou supprimez directement la règle dans le code.
Remarque : chaque sélecteur que vous crééz pour une règle ne devrait apparaitre qu'une seule fois dans les règles CSS ; s'il apparait deux fois c'est que vous avez créé deux règles avec le même sélecteur, chacune ayant sa propre liste de propriétés ; ceci ne sert à rien, il vaut mieux regrouper toutes les propriétés dans une seule règle avec le sélecteur commun.
Une liste HTML est constituée par les balises ul et li ou les balises ol et li.
Mettre une bordure à une boite permet d'en visualiser les dimensions. Les boites ont une propriété hauteur et une largeur (height et width).
Pour dessiner une boite le navigateur doit affecter des valeurs à ces deux dimensions. Comment fait-il ? Par défaut ces deux propriétés valent : auto !
Dans une règle pour body mettez border-style: solid; et width:auto. Comme vous pouvez le constater, rien ne change.
Si vous regardez le document pris pour exemple vous verrez que les boites body, h1, p, ... donnent l'impression d'avoir la plus grande largeur possible; c'est ce que signifie la valeur auto pour la largeur de ces boites.
Le terme auto peut être utilisé comme valeur dans beaucoup (pas toutes) de propriétés CSS ; mais ce terme lorsqu'il s'applique à la largeur est interprété différemment suivant le contexte et lorsqu'il s'applique à une autre propriété, par exemple la hauteur, ne signifie pas la même chose. Donc attention aux expérimentations...
Ce sont les propriétés margin et padding ; elles permettent de décider de l'espace entre des boites contigües (margin) et de l'espace entre le contenu et la bordure (padding).
Utilisez la propriété text-align:center sur h1 (de largeur 500px) ; elle permet de fixer l'alignement du texte dans sa boite.
Mettez une marge gauche à h1 de sorte que la boite soit mieux centrée dans body.
Le fond d'une boite peut être rempli par une couleur, une image, les deux. Par défaut il n'y a pas de couleur de fond : le fond d'une boite est transparent (pas blanc).
Le fond correspond à toute la partie : bordure+espacement+contenu (autrement dit si vous mettez une bordure en pointillé, le fond devrait se voir entre les pointillés).
L'image de fond peut être plus petite ou plus grande que la boite, seule la partie "dans la boite" sera visible (sauf l'exception ci-dessous).
Vous pouvez décider de la position de l'image de fond dans la boite et de sa répétition pour "paver" la boite. Par défaut elle se place à partir du coin supérieur gauche et pave la boite.
La taille d'une image de fond n'intervient pas dans le calcul des dimensions d'une boite.
Mettez une marge et une couleur de fond à body ; que remarquez vous pour la couleur de fond ? (elle "sort" de la boite)
Faites de même pour la boite html (couleur de fond, bordures, marges). Que remarquez vous maintenant pour la couleur de fond de body et celle de html ? Voyez la différence et la similitude avec le cas précédent.
Ce comportement des règles CSS pour body et html est un peu déroutant ; exprimons la norme :