CSS en détail

Publié le par Marie-Ange MALROUX

La dernière fois que je me suis penchée sur les CSS, je n'étais pas entrée dans le détail et quelques points me paraissaient obscurs. Revenons donc là-dessus pas à pas.

body
{
    margin: 10px 0 ;
    padding: 0 ;
    text-align: center ;
    font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
    background: #dea ;
}

pre
{
    overflow: auto ;
    background: #dea ;
    border: 2px solid #9b2 ;
    padding: 5px 0 0 5px ;
    font-size: 1.2em ;
}


1 - A quoi corresp
ondent les valeurs 10px 0 dans margin ?

Attribution des marges si plusieurs mentions sont définies (depuis CSS2 uniquement et donc non reconnu par les anciens navigateurs) :

  • si 2 valeurs : première mention pour le haut et le bas, seconde pour droite et gauche.
  • si 3 valeurs : première mention pour le haut, seconde pour droite et gauche, troisième pour le bas.
  • si 4 valeurs : les quatre mentions sont respectivement attribuées aux espaces haut, droite, bas et gauche.
Source : http://wiki.media-box.net/documentation/css/margin

2 - Pourquoi définir padding à 0 ? N'est-ce pas sa valeur par défaut ?

padding permet de définir l’espace intérieur d’un élément, entre ses bords et son contenu. On le règle à 0 car le navigateur opéra définit d'autres valeurs par défaut. N'oublions pas que nous voulons concevoir une application web qui soit utilisable sur tous les navigateurs.

3 - Pourquoi utiliser "em" pour la taille de la font ? Je connaissais "px" ou "%", c'est quoi ça ? Voici une définition claire de la chose.

em :

Il s'agit d'une des mesures de tailles les plus intéressantes, avec les % et les pixels. On peut l'utiliser pour définir des tailles de polices, mais surtout pour définir des largeurs ou des hauteurs. Un em vaut une grosse lettre de la police dans laquelle on se trouve (un peu plus gros qu'un M majuscule, en général). Il y a un avantage et un inconvénient :

- Inconvénient : c'est moins précis qu'un pixel ou qu'un %.
- Avantage : c'est beaucoup plus souple que le pixel.

Ainsi, une marge d'un em fera toujours environs 1 gros caractère de largeur ou de haut, caractère redéfini dynamiquement selon la police utilisée dans la zone. Un seul style défini en em peut donc générer des tailles de marges différentes selon les parties du site, mais toujours proportionnelles à la police active dans cette partie. Si on ne définit pas la taille de sa police, ce qui est souvent conseillé (la taille de la police est alors définie par le navigateur lui-même, et chacun règle alors à sa préférence), on peut créer des marges, hauteurs ou largeurs qui s'ajusteront automatiquement.

Source : http://batraciens.net/css-astuces/apprendre-css.htm

4 - A quoi sert la propriété overflow pour la balise de préformatage (pre) ?

La feuille de style ou css (cascading style sheets) overflow permet de gérer les dépacements de blocs (calque, champ formulaire...).La feuille de style ou css overflow peut prendre la valeur de :

- visible, rend visible tout ce qui dépasse.
- hidden, cache tout ce qui dépasse.
- scroll, met une barre de défilement horizontale et verticale.
- auto, met une barre de défilement horizontale ou verticale si besoin.
- inherit, hérite de son parent (css2).

Attention visible ne fonctionne pas de la même manière sous IE et Netscape. Sous IE la zone du bloc s'agrandit, sous Netscape le texte dépasse du bloc sans que ce dernier ne  s'agrandisse.

Publié dans CSS

Commenter cet article