SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style
Les mentions décrites ici sont appropriées à tous les repères HTML qui
créent un paragraphe distinct ou un bloc, par exemple pour <h[1-6]>, <p>, <blockquote>, <address>
ou <pre>. Les éléments de bloc sont pourtant aussi appropriés
pour des repères HTML comme <center>, <div>, <table>, <tr>, <th>
et <td>. Ainsi par exemple, il est possible de définir un 
tableau
sans quadrillage, dans lequel pourtant des cellules distinctes
reçoivent un cadre à votre bon vouloir - à savoir à l'aide de mentions de
feuilles de style. Même sur <body> les mentions de feuilles de
style décrites ici peuvent être employées - dans ce cas un cadre est tracé
autour de tout le corps visible du fichier HTML.
Si vous ne mentionnez rien d'autre dans la définition du cadre, il se peut il se peut que les éléments contenus collent de très prés au cadre qui les entourent. À cette fin, il vous est possible de définir des espaces intérieurs. Ainsi vous créez un espace entre le cadre et son contenu.
Netscape et l' Explorer Internet MS interprètent les mentions de définitions de cadres malheureusement très différemment. Dans les différentes parties on traitera des particularités. Faites attention aux remarques pour noter vos mentions de feuilles de style de telle façon qu'elles atteignent l'effet désiré avec les deux navigateurs.
En règle générale vous combinerez plusieurs mentions sur les cadres, ainsi il est pertinent de ne pas mentionner seulement l'épaisseur du cadre mais aussi la couleur désirée.
 
|
Épaisseur du cadre en haut (border-top-width)Vous pouvez fixer l'épaisseur de la ligne du cadre du côté supérieur d'un élément.
<style type="text/css">
h1,h2,h3 { border-top-width:thin; border-top-style:solid; }
body { border-top-width:5mm; border-top-style:groove; }
</style>
|
Avec border-top-width: vous pouvez spécifier l'épaisseur de la
ligne supérieure d'un élément. Une mention
numérique est permise pour l'épaisseur de la ligne ou l'une des
valeurs suivantes:
thin = fin.
medium = moyen.
thick = épais.
L' Explorer Internet MS n'interprète la mention border-top-width
que si par ailleurs la mention border-top-style est notée. Pour
cela les mêmes possibilités que pour le type
de cadre (border-style) sont offertes à savoir par exemple:
<p style="border-top-style:solid; border-top-width:thin">
Pour écrire pour les deux navigateurs, vous devez choisir une syntaxe comme
celle de cet exemple et noter les deux mentions.
L' Explorer Internet MS dessine le cadre sur toute la largeur disponible
tandis que Netscape ne tire un cadre que sur la largeur que le paragraphe ou le
bloc occupe. Vous pouvez obtenir une représentation uniforme avec des mentions
sur la largeur
d'éléments par exemple avec des mentions comme width:100% ou width:500px.
|
|
Épaisseur du cadre en bas (border-bottom-width)Vous pouvez fixer l'épaisseur d'une ligne de cadre sur le côté inférieur d'un élément.
<p style="border-bottom-width:2pt; border-bottom-style:solid;">texte</p> |
Avec border-bottom-width: vous pouvez spécifier l'épaisseur d'une
ligne sous l'élément. Une mention
numérique est permise pour l'épaisseur de la ligne ou l'une des
valeurs suivantes:
thin = fin.
medium = moyen.
thick = épais.
L' Explorer Internet MS n'interprète la mention border-bottom-width
que si par ailleurs la mention border-bottom-style
est notée. Pour
cela les mêmes possibilités que pour le type
de cadre (border-style) sont offertes à savoir par exemple:
<p style="border-bottom-style:solid; border-bottom-width:thin">
Pour écrire pour les deux navigateurs, vous devez choisir une syntaxe comme
celle de cet exemple et noter les deux mentions.
L' Explorer Internet MS dessine le cadre sur toute la largeur disponible
tandis que Netscape ne tire un cadre que sur la largeur que le paragraphe ou le
bloc occupe. Vous pouvez obtenir une représentation uniforme avec des mentions
sur la largeur
d'éléments par exemple avec des mentions comme width:100% ou width:500px.
|
|
Épaisseur du cadre à gauche (border-left-width)Vous pouvez spécifier l'épaisseur d'une ligne sur le côté gauche d'un élément.
<style type="text/css">
blockquote.brecht { border-left-width:1cm; border-left-style:inset; }
</style>
|
Avec border-left-width: vous pouvez spécifier l'épaisseur d'une
ligne à gauche de l'élément. Une mention
numérique est permise pour l'épaisseur de la ligne ou l'une des
valeurs suivantes:
thin = fin.
medium = moyen.
thick = épais.
L' Explorer Internet MS n'interprète la mention border-left-width que si par ailleurs la mention
border-left-style est notée. Pour
cela les mêmes possibilités que pour le type
de cadre (border-style) sont offertes à savoir par exemple:
<p style="border-left-style:solid; border-left-width:thin">
Pour écrire pour les deux navigateurs, vous devez choisir une syntaxe comme
celle de cet exemple et noter les deux mentions.
|
|
Épaisseur du cadre à droite (border-right-width)Vous pouvez spécifier l'épaisseur d'une ligne sur le côté droit d'un élément.
<blockquote style="border-right-width:thin; border-right-style:outset;quot;>Text</blockquote> |
Avec border-right-width: vous pouvez spécifier l'épaisseur d'une
ligne à droite de l'élément. Une mention
numérique est permise pour l'épaisseur de la ligne ou l'une des
valeurs suivantes :
thin = fin.
medium = moyen.
thick = épais.
L' Explorer Internet MS n'interprète la mention border-right-width que si par ailleurs la mention
border-right-style est notée. Pour
cela les mêmes possibilités que pour le type
de cadre (border-style) sont offertes à savoir par exemple:
<p style="border-right-style:solid; border-right-width:thin">
Pour écrire pour les deux navigateurs, vous devez choisir une syntaxe comme
celle de cet exemple et noter les deux mentions
|
|
Épaisseur du cadre sur tous les côtés (border-width)Vous pouvez fixer l'épaisseur d'un cadre autour d'un élément.
<style type="text/css">
img.spezial { border-width:2cm; border-style:groove; }
</style>
|
Avec border-width: vous pouvez spécifier l'épaisseur d'un
cadre autour d'un l'élément. Une mention
numérique est permise pour l'épaisseur de la ligne ou l'une des
valeurs suivantes :
thin = fin.
medium = moyen.
thick = épais.
L' Explorer Internet MS n'interprète la mention border-width que si par ailleurs
le type
de cadre (border-style) est noté à savoir par exemple:
<p style="border-style:solid; border-width:thin">
Pour écrire pour les deux navigateurs, vous devez choisir une syntaxe comme
celle de cet exemple et noter les deux mentions
L' Explorer Internet MS dessine le cadre sur toute la largeur disponible
tandis que Netscape ne tire un cadre que sur la largeur que le paragraphe ou le
bloc occupe. Vous pouvez obtenir une représentation uniforme avec des mentions
sur la largeur
d'éléments par exemple avec des mentions comme width:100% ou width:500px.
|
|
Couleur du cadre (border-color)Vous pouvez fixer la couleur pour un cadre en la définissant pour certains ou pour tous les côtés d'un élément.
<div style="border-width:1cm; border-style:solid; border-color:#99CCFF;">texte</div> |
Avec border-color: vous pouvez spécifier la couleur du cadre.
Une mention
de couleur. est permise.
L' Explorer Internet MS n'interprète la mention border-color que si par ailleurs
le type
de cadre (border-style) est noté à savoir par exemple:
<p style="border-style:solid; border-color:red">
Pour écrire pour les deux navigateurs, vous devez choisir une syntaxe comme
celle de cet exemple et noter les deux mentions
|
|
Type du cadre (border-style)Vous pouvez fixer pour un cadre son apparence en la définissant pour certains ou pour tous les côtés d'un élément.
<style type="texte/css">
.attention { border-style:double; border-width:1cm; }
</style>
|
Avec border-style: vous pouvez fixer le type de cadre. Les mentions suivantes sont permises.
none = pas de cadre (ou cadre invisible).
dotted = en pointillés.
dashed = en tirets.
solid = pleine.
double = doublée.
groove = ligne en relief.
ridge = effet 3D.
inset = rentrante.
outset = sortante.
Netscape 4.x n'interprète la mention border-style que si par
ailleurs l' épaisseur
du cadre (border-width) est notée à savoir par exemple:
<p style="border-style:solid; border-width:thin">
Pour écrire pour les deux navigateurs, vous devez choisir une syntaxe comme
celle de cet exemple et noter les deux mentions
L' Explorer Internet MS dessine le cadre sur toute la largeur disponible
tandis que Netscape ne tire un cadre que sur la largeur que le paragraphe ou le
bloc occupe. Vous pouvez obtenir une représentation uniforme avec des mentions
sur la largeur
d'éléments par exemple avec des mentions comme width:100% ou width:500px.
Quelques uns des effets (par exemple groove) ne se réalisent que si vous mentionnez une couleur qui se distingue du noir.
Aucun des deux navigateurs n'interprète les mentions s'appliquant à border-style complètement.
|
|
Cadre en haut en général (border-top)Cette mention regroupe les différentes mentions possibles suivantes:
border-top-width
border-(top)-style
border-color
<p style="border-top:thick inset rgb(192,192,255);">texte</p> |
Avec border-top: vous pouvez spécifier l'aspect de la ligne au dessus d'un élément. Notez les mentions sur l'épaisseur, le style de cadre et la couleur en les séparant avec des espaces comme dans l'exemple ci-dessus. L'ordre dans lequel les mentions sont faites n'a pas d'importance.
Netscape 4.x n'interprète pas ces mentions Pour pouvoir afficher les effets correspondants avec Netscape, vous devez utiliser des mentions distinctes comme border-top-style, border-top-width et border-color.
|
|
Cadre en bas en général (border-bottom)Cette mention regroupe les différentes mentions possibles suivantes:
border-bottom-width
border-(bottom)-style
border-color
<style type="text/css">
object.vrml { border-bottom:5mm solid red; }
</style>
|
Avec border-bottom: vous pouvez spécifier l'aspect de la ligne au dessous d'un élément. Notez les mentions sur l'épaisseur le style de cadre et la couleur en les séparant avec des espaces comme dans l'exemple ci-dessus. L'ordre dans lequel les mentions sont faites n'a pas d'importance.
Netscape 4.x n'interprète pas ces mentions. Pour pouvoir afficher les effets correspondants avec Netscape, vous devez utiliser des mentions distinctes comme border-bottom-style, border-bottom-width et border-color.
|
|
Cadre à gauche en général (border-left)Cette mention regroupe les différentes mentions possibles suivantes:
border-left-width
border-(left)-style
border-color
<p style="border-left:thin solid">texte</p> |
Avec border-left: vous pouvez spécifier l'aspect de la ligne à gauche d'un élément. Notez les mentions sur l'épaisseur le style de cadre et la couleur en les séparant avec des espaces comme dans l'exemple ci-dessus. L'ordre dans lequel les mentions sont faites n'a pas d'importance.
Netscape 4.x n'interprète pas cette mention. Pour pouvoir afficher les effets correspondants avec Netscape, vous devez utiliser des mentions distinctes comme border-left-style, border-left-width et border-color.
|
|
Cadre à droite en général (border-right)Cette mention regroupe les différentes mentions possibles suivantes:
border-right-width
border-(right)-style
border-color
<style type="text/css">
address { border-right:double 2cm #DDFFDD; }
</style>
|
Avec border-right:vous pouvez spécifier l'aspect de la ligne à droite d'un élément. Notez les mentions sur l'épaisseur le style de cadre et la couleur en les séparant avec des espaces comme dans l'exemple ci-dessus. L'ordre dans lequel les mentions sont faites n'a pas d'importance.
Netscape 4.x n'interprète pas cette mention. Pour pouvoir afficher les effets correspondants avec Netscape, vous devez utiliser des mentions distinctes comme: border-right-style, border-right-width et border-color.
|
|
Cadres en général (border)Cette mention regroupe les différentes mentions possibles suivantes:
border-width
border-style
border-color
<div style="border:1cm groove #FF00FF;">texte</div> |
Avec border: vous pouvez spécifier l'aspect d'un cadre autour d'un élément. Notez les mentions sur l'épaisseur le style de cadre et la couleur en les séparant avec des espaces comme dans l'exemple ci-dessus. L'ordre dans lequel les mentions sont faites n'a pas d'importance.
L' Explorer Internet MS dessine le cadre sur toute la largeur disponible
tandis que Netscape ne tire un cadre que sur la largeur que le paragraphe ou le
bloc occupe. Vous pouvez obtenir une représentation uniforme avec des mentions
sur la largeur
d'éléments par exemple avec des mentions comme width:100% ou width:500px.
.
|
|
Espace intérieur en haut (padding-top)Les espaces intérieurs sont avant tout appropriés en relation avec des cadres, des couleurs et des images d'arrière plan. Avec la mention décrite ici, vous pouvez spécifier l'espace séparant le contenu de l'élément et la limite supérieure de cet élément (visible pour les cadres, les couleurs etc...).
<style type="text/css">
td { padding-top:3mm; }
th { padding-top:5mm; }
p.lignehaut { border-top:thin solid red; padding-top:5mm; }
</style>
|
Avec padding-top: vous pouvez spécifier l'espace entre le contenu
de l'élément et sa limite supérieure. Une mention
numérique est permise
|
|
Espace intérieur en bas (padding-bottom)Les espaces intérieurs sont avant tout appropriés en relation avec des cadres, des couleurs et des images d'arrière plan. Avec la mention décrite ici, vous pouvez spécifier l'espace séparant le contenu de l'élément et la limite inférieure de cet élément (visible pour les cadres, les couleurs etc...).
<p style="border-bottom:thick groove silver; padding-bottom:10px;">texte</p> |
Avec padding-bottom: vous pouvez spécifier l'espace entre le contenu
de l'élément et sa limite inférieure. Une mention
numérique est permise.
|
|
Espace intérieur à gauche (padding-left)Les espaces intérieurs sont avant tout appropriés en relation avec des cadres, des couleurs et des images d'arrière plan. Avec la mention décrite ici, vous pouvez spécifier l'espace séparant le contenu de l'élément et la limite de gauche de cet élément (visible pour les cadres, les couleurs etc...).
<style type="text/css">
p.important { border-left:medium double blue; padding-left:12mm; }
</style>
|
Avec padding-left: vous pouvez spécifier l'espace entre le contenu
de l'élément et sa limite de gauche. Une mention
numérique est permise.
|
|
Espace intérieur à droite (padding-right)Les espaces intérieurs sont avant tout appropriés en relation avec des cadres, des couleurs et des images d'arrière plan. Avec la mention décrite ici, vous pouvez spécifier l'espace séparant le contenu de l'élément et la limite de droite de cet élément (visible pour les cadres, les couleurs etc...).
<h1 style="border-right-style:solid; border-right-width:3mm; padding-right:9mm;">texte</h1> |
Avec padding-right: vous pouvez spécifier l'espace entre le contenu
de l'élément et sa limite de droite. Une mention
numérique est permise.
|
|
Espace intérieur sur tous les côtés (padding)Les espaces intérieurs sont avant tout appropriés en relation avec des cadres, des couleurs et des images d'arrière plan. Avec la mention décrite ici, vous pouvez spécifier l'espace séparant le contenu de l'élément et les limites de cet élément (visible pour les cadres, les couleurs etc...).
<style type="text/css">
body { border: 1.5cm groove #FFDDFF; padding:1cm; }
</style>
|
Avec padding: vous pouvez spécifier l'espace entre le contenu
de l'élément et ses quatre limites haut, gauche, bas et droite. Une mention
numérique est permise.
|
| |
après: |
Mentions de feuilles de style: couleurs et images d'arrière plan
|
avant: |
Mentions de feuilles de style: espaces, marges, alignement
|
SELFHTML/Quickbar
Feuilles de style
CSS
Serge François, 13405@free.fr
