Tous les éléments CSS définissent une ‘boite’ virtuelle à l’écarn, qui est une zone sur laquelle s’appliquera le style de l’élement et de ses propriétés.
Une boite a :
une taille (width, height),
un contour (border),
une marge par rapport à la fenêtre (margin)
et un espacement par rapport au contenu (padding)
Ces propriétés peuvent se subdiviser pour la plupart, en propriété du haut, drot, bas, gauche de la boite.
Par défaut une propriété s’applique à tous les bords de la boite.
On peut préciser explicitement quel bord si on le souhaite.
Implicitement les valeursde la propriété s’appliquent dans les ens des aiguilles d’une montre : top, right, bottom, left.
border-width: 2px; /* concernetous les bords */
border-width: 2px 4px 4px 2px /* des bords + fort à droite et en bas */; border-bottom-width: 6px; /*concerne le bas de la boite uniquement */
Voyons quelques types de présentation possibles, en jouant sur les propriétés des boites.
Le document ci-après montre un paragraphe d etexte formatté de différentes façons.
et le source responsable de ces merveilles est le suivant :
<html>
<!– on veut appliquer des styles différents aux paragraphes
on utilisera un selecteur de classe sur <P> –><head>
<style>
/* un contour épais pointillé…et coloré */p.boite1{
border-width: 3px;
border-style: dotted;
border-color: #82C02F;
}/* une boite à largeur fixe, à fond clair
avec un contour épais plein coloré */p.boite2{
width: 300px;
border-width: 3px;
border-style: solid;
border-color: #82C02F;
background-color: #B2F05F;
}/* une boite avec des cotés spécifiques :
qui donnent un peu de relief
et une marge pour ne pas la coller aux bords */
p.boite3{
width: 300px;
margin: 20px;
border-width: 2px;
border-style: solid;
border-color: #82C02F;
border-right-width: 6px;
border-bottom-width: 6px;
border-right-color: #CCCCCC;
border-bottom-color: #999999;
background-color: #B2F05F;
}/* une boite avec des cotés spécifiques :
qui donnent un peu de relief
et une marge pour ne pas la coller aux bords */
p.boite4{
width: 300px;
margin: 20px;
padding: 0.3cm 0.2cm;
border-width: 2px;
border-style: solid;
border-color: #82C02F;
background-color: #B2F05F;
}
</style>
</head><body>
Quelques pangrammes : <p>
<p class= »boite1″>
Je gobe au wharf mes six vodkas à cinq zlotys
(un ‘border’ pointillé …et vert)
</p>
<p class= »boite2″>
Je gobe au wharf mes six vodkas à cinq zlotys
(un fond en + et une largeur fixe)
</p>
<p class= »boite3″>
Je gobe au wharf mes six vodkas à cinq zlotys
(avec un ‘margin’ pour décoller du bord de la fenetre
et des couleurs de bords spécifiques pour ‘ombrer’)
</p>
<p class= »boite4″>
Je gobe au wharf mes six vodkas à cinq zlotys
(avec du padding, pour écarter le texte des bords de la boite, c’est + joli!)
</p>
</body>
</html>