On s'intéresse au dernier point ici : comment un navigateur visuel utilise-t-il le CSS pour formater visuellement le HTML ?
color
: couleur du textebackground-color
: couleur du fondblack
, red
…) dans la liste#F0B
, #FE87B7
Chaque boîte est constituée de diverses parties
padding
: pour « écarter » le contenu des bords de la boîte.
padding: 5px
met le padding à 5px de tous les côtéspadding: 5px 10px
met le padding à 5px en haut et en bas, et à 10px à droite et à gauchepadding: 5px 20px 10px 5px
donne dans l'ordre top, right, bottom, left (ordre des aiguilles d'une montre)padding-left, padding-top
, etc.margin
similaire à padding
border
est une « propriété-raccourci » pour contrôler la bordure
d'une boîteborder: solid black 1px
donne une bordure
border-style
). Autres valeurs : none
, dotted
, dashed
…border-color
)border-width
)border-left, border-top
… Mais cette fois chaque propriété est aussi un raccourci (pour border-left-style
, border-left-width
, etc.)width
et height
34px
). Pratique pour contrôler précisément l'apparence… sauf si l'internaute a changé la taille du texte30%
). Attention, pour la hauteur, il faut que le parent ait une hauteur fixée.
attention, pour les marges et paddings, le pourcentage réfère à la *largeur* de l'élément parent (y compris les marges et paddings verticaux !) [ref]
em
, unité qui dépend de la taille du texte (1em
est égal
à la font-size
de l'élément)
sauf dans font-size, où c'est égal à la font-size du parent
attention: la taille d'un em est historiquement liée à la largeur d'un M majuscule,
mais ce n'est plus spécialement le cas. En particulier, 1em ne dépend pas de la police
utilisée !
Les unités qui dépendent de la police sont ex (hauteur d'un x) et ch (largeur d'un zéro).
Très peu de détails sur ch (il semble que ce soit maintenant implémenté sous Chrome, mais je ne sais pas où trouver «officiellement» cette info),
un des rares trucs que j'ai trouvés : cette page sur la définition de ch
rem
, unité qui réfère à la taille de police de l'élément html
(16px
dans la plupart des navigateurs, sauf si cette taille est fixée dans la CSS)width
et height
contrôlent
la dimension du contenu du bloc !
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
box-sizing
width
et height
permettent de fixer la taille
du contenu, sans compter le padding et la bordurebox-sizing
(introduite avec CSS3) permet de changer çacontent-box | padding-box | border-box | inherit
box-sizing: content-box
est le modèle classiquebox-sizing: border-box
, c'est-à-dire la boîte entière, avec ses borduresoverflow
:
overflow:hidden
, ce qui dépasse est caché. À n'utiliser que si
vous savez ce que vous faites (c'est particulièrement déconseillé si la boîte contient du texte) !overflow:scroll
, le navigateur ajoute des ascenseurs (scrollbars) à la boîteoverflow:visible
, le contenu est affiché en-dehors de la boîte (c'est le comportement par défaut)overflow:auto
, le navigateur ajoute des ascenseurs uniquement si c'est nécessaire, ce qui est le comportement le plus désirable en général.overflow-x
et overflow-y
.
border-radius
inset
pour une ombre à l'intérieur de la boîte (le décalage et l'extension fonctionne un peu différemment,
voir figure)text-align
ne marche que pour les éléments inline !center
, left
, right
justify
: à utiliser pour des vrais paragraphes de texte, avec
une largeur suffisantemargin
margin:auto
est une valeur spéciale qui centre le bloc horizontalement dans son conteneur
(à condition qu'il ait une largeur fixée, sinon il prend toute la place et le centrage ne se voit pas…)margin:auto
ne marche pas (la valeur auto
vaut 0 pour les marges verticales)vertical-align:middle
ne fait pas ce qu'il semblerait naturel qu'il fasse
(sauf pour une cellule de tableau) (voir cours suivant sur la mise en page)