Easy-Micro

LANGAGE Langage CSS
Modèle de conteneur

Modèle de boîte CSS

En CSS, chaque élément d'un document HTML est prise en charge sous la forme d'une boîte rectangulaire - on leur applique ensuite diverses règles de mise en forme visuelle.

CSS Attributs CSS

  • Chaque boîte est constituée de quatre éléments :
    • son contenu (texte ou image)
    • son remplissage (l'espace entre le contenu et la bordure), soit l'attributs CSS padding
    • sa bordure (visible ou pas), soit l'attribut CSS border
    • sa marge (l'espace séparant la boîte et le reste), soit l'attribut CSS margin

CSS Spécificité IE

  • Certains navigateurs :-) divergent largement de la spécification CSS lors de l'application des dimensions (marges, bordures...).

    La largeur totale de la boîte = marge + bordure + remplissage + largeur du contenu.

    Exemple de boite Mais Internet Explorer 5.x ne prenais pas en compte la largeur de la marge (margin) - on parle alors, de bug d'interprétation (plus d'infos...).

    Pour une boîte (un div par exemple) avec 100px de large (width:100px;), 10px de remplissage (padding:10px;), une bordure de 5px (border-width) et pas de marge (margin:0px;), on a un cadre de 130px de large (100+2*10+2*5+0).

    Or Internet Explorer 5.x ne réservera à cette même boîte que 100px, puis il soustraira les valeurs de paddings (2*10) et de borders (2*5) de la valeur de width. (plus d'infos...).

CSS Attribut CSS BORDER

  • border-width :
    Exemple : border-width : 5px;
  • border-style :
    border-style: dotted solid double dashed;
    Cela représente les 4 droites d'un rectangle : top, right, bottom et enfin left.

    • Le top border est dotted (petits points)
    • Le right border est solid
    • Le bottom border est double
    • Le left border est dashed (petits tirets)
  • border-color :
    Exemple : border-color : #c0c0c0;
  • Saisie rapide, les trois attributs ensemble :
    border:5px solid red;
    Soit : border-width puis border-style et enfin border-color
Plus d'infos sur l'attribut CSS BORDER sur le W3School!

< Page précédente LANGAGE CSS Page suivante >