docCSS-bordures - Technomultimedia
download 
Plainte Transcription
CSS-bordures - Technomultimedia
| bts cv || mma |
css,
les bordures & marges, arrière-plans & images
Mettre en forme
les bordures
CSS permet d’entourer très simplement les divers éléments de type bloc d’une page web par des
bordures aux caractéristiques (style, épaisseur, couleurs) libres.
Cette possibilité est également offerte aux balises <img>, par exemple.
Les différents styles de bordures
La propriété border-style met en place le type des bordures d’un élément. Tous les
navigateurs ne reconnaissent pas les dix styles de bordures possibles :
_ dashed : tirets ;
_ dotted : pointillés ;
_ doublee : deux traits pleins d’épaisseur égale et séparés par un espace vide de même
épaisseur ;
_ groove : effet 3D gravé dans la page, opposé de ridge ;
_ hidden : pas de bordure mais influe sur la bordure mitoyenne ;
_ inset : effet entrant, élément incrusté dans la page (opposé d’outset) ;
_ none : pas de bordure ; équivaut à border-width: 0 ;
_ outset : effet sortant, élément extrudé de la page (opposé d’inset) ;
_ ridge : effet 3D sortant de la page, opposé de groove ;
_ solid : trait plein.
L’épaisseur des bordures
La propriété border-width définit l’épaisseur des bordures, et n’a de sens qu’en
accompagnement d’un style (border-style) ou d’une couleur de bordure (border-color).
Certains navigateurs n’interprètent d’ailleurs que les bordures ayant renseigné ces deux
propriétés.
On peut préciser les épaisseurs de plusieurs manières (l’interprétation des trois premières
dépend du navigateur) :
_ thin : bordure fine ;
_ medium : bordure moyenne ;
_ thick : bordure épaisse ;
_ avec une mention numérique de longueur reprenant la syntaxe habituelle.
La couleur des bordures
Elle est mise en place par la propriété border-color, qui ne s’applique qu’en complément
d’un style (border-style) ou d’une épaisseur de bordure (border-width). Sans cela, la
bordure est inexistante.
Les marges
En HTML, matière première de CSS, chaque élément est considéré comme une boîte. Au
dimensions induites par le contenu s’ajoutent souvent les espaces de marges externes (margin)
ou internes (padding) et la bordure (border).
Malheureusement IE interprète mal ces données...
HTML
<div>
<p>paragraphe de contenu</p>
</div>
IE va afficher une boîte de 150px, alors que les
autres navigateurs conformes W3c afficheront un
bloc de 170px.
pour faire face il faudra écrire
CSS
div {
width: 150px;
padding-right: 20px;
}
CSS
div {
width: 150px;
}
div p {
margin-right: 20px
}
| jcg
||
2007/2008 |
1
|
Arrière-plans et
images de fond
| bts cv || mma |
Afficher une couleur de fond
Tous les éléments HTML peuvent bénéficier d’une couleur de fond par la propriété
background-color.
Insérer une image d’arrière-plan
La propriété background-image associe une image de fond à l’élément sur lequel elle porte.
Pour mettre en place une image d’arrière-plan valable pour tout le document, on la placera sous
la balise <body>.
body {
background-image: url(fond.jpg);
}
Par défaut, cette image sera répétée en damier (ou papier peint) à partir du coin supérieur
gauche. On peut toutefois modifier ce comportement en jouant sur les autres attributs CSS de la
propriété background.
Positionner l’image à sa convenance
Avec background-position, on pourra placer dans un élément une image d’arrière-plan
définie par background-image. Cet attribut s’utilise surtout en l’absence de répétition
(background- repeat).
div#global {
width: 300px;
height: 200px;
background-color: #99CC00;
background-image: url(fond.jpg);
background-repeat: no-repeat;
background-position: right top;
}
Répéter l’image ou non
Par défaut, toute image d’arrière-plan se répète comme une mosaïque en emplissant l’espace
de l’élément qui la contient. La propriété background-repeat permet de modifier ce
comportement et reconnaît pour cela quatre valeurs :
_ repeat : c’est la valeur et le comportement par défaut, où l’image se répète sur les deux axes.
_ no- repeat : l’image n’apparaît qu’une fois, sans répétition.
_ repeat-x : l’image ne se répète que dans le sens horizontal (exemple : frise)
_ repeat-y : l’image ne se répète que dans le sens vertical
(exemple : bordure graphique verticale ou marge)
Par exemple :
body {
background-image: url(frise.jpg);
background-repeat: repeat-x;
background-position: top;
}
Fixer l’image par rapport au contenu
Une image d’arrière-plan accompagne par défaut son élément si celui-ci est déplacé dans une
barre d’ascenseur (scroll). On peut toutefois la fixer par rapport à la fenêtre du navigateur avec la
propriété background-attachment.
Pour mieux comprendre le principe, il suffit d’appliquer une image de fond au document entier :
body {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
}
| jcg
||
2007/2008 |
2
|
