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 qui forment un bloc, à savoir par exemple pour <h[1-6]>, <p>, <blockquote>, <address> ou <pre>. Les blocs d'éléments sont aussi des repères comme <div>, <table>, <tr>, <th> et <td>. Même avec <body> les mentions de feuilles de style décrites ici se laissent employer - dans ce cas, la totalité du corps visible d'un fichier HTML est traité comme un bloc.
La marge ou l'espace signifient: la marge ou l'espace de l'élément actuel avec son "élément parent" logique. Dans le corps de texte normal c'est le repère <body>, dans une cellule de tableau, c'est le repère <td>- ou <th>, dans lequel l'élément actuel se trouve. Si l'élément actuel se trouve par exemple dans un repère <div>, qui lui-même définit des marges ou espaces, c'est par rapport à eux que les mentions sont relatives.
Avec des valeurs relatives, des mentions comme par exemple -18mm, vous pouvez
obtenir aux fins de structure particulière, que des éléments se chevauchent.
À un autre endroit de ce document, vous en trouverez 
un
exemple.
 
|
Espace/marge du haut (margin-top)Vous pouvez fixer la marge supérieure ou l'espace supérieur d'un élément avec celui qui le précède.
<style type="text/css">
h1,h2,h3 { margin-top:2cm; }
div.exemple { margin-top:30px; }
div.exemple h1,h2,h3 { margin-top:1cm; }
</style>
|
Avec margin-top: vous pouvez spécifier la marge/l'espace du haut.
Une mention
numérique est permise. Dans l'exemple ci-dessus un espace de 2
cm les séparant de l'élément précédent a été défini pour les titres
N°1,N°2 et N°3. En outre une classe exemple a été
définie pour le repère <div>. De tels passages ont 30 pixels
d'espace avec l'élément précédent d'après la définition dans l'exemple.
Pour les titres N°1, N°2 et N°3 qui se trouvent dans un tel passage, un
espace de 1cm a été fixé.
Netscape 4.x et l' Explorer Internet MS (3.x, 4.x) réagissent en partie
différemment quand un élément contient un espace défini en bas et
l'élément suivant un espace défini en haut.
Pour Netscape la mention margin-top (pour l'espace en haut) a
dans tous les cas priorité sur la mention margin-bottom (pour
l'espace en bas). Si donc un élément a un espace du bas de 1cm et l'élément
suivant un espace du haut de 2cm, Netscape représentera les deux éléments
avec un espace de 2cm.
L' Explorer Internet MS compare les deux mentions et interprète celle qui a la
valeur la plus élevée. Si donc un élément a un espace du bas de 1cm et que
l'élément suivant a un espace du haut de 2cm, alors l' Explorer Internet MS
représente les deux éléments avec un espace de 2cm. Si par contre l'élément
suivant a un espace du haut de 3cm, l' Explorer Internet MS augmentera l'espace
qui sépare les éléments à 3cm tandis que Netscape laissera l'espace à 2cm.
|
|
Espace/marge du bas (margin-bottom)Vous pouvez fixer l'espace inférieur/la marge inférieure d'un élément avec l'élément qui le suit.
<p style="margin-bottom:20pt">texte</p> <p style="margin-top:15pt">texte</p> |
Avec margin-bottom: vous pouvez spécifier la marge/l'espace du bas.
Une mention
numérique est permise. Dans l'exemple ci-dessus un espace de 20
points le séparant du paragraphe qui suit a été défini.
Netscape 4.x et l' Explorer Internet MS (3.x, 4.x) réagissent en partie
différemment quand un élément contient un espace défini en bas et
l'élément suivant un espace défini en haut.
Pour Netscape la mention margin-top (pour l'espace en haut) a
dans tous les cas priorité sur la mention margin-bottom (pour
l'espace en bas). Si donc un élément a un espace du bas de 20points et l'élément
suivant un espace du haut de 15points (comme dans l'exemple ci-dessus), Netscape représentera les deux éléments
avec un espace de 15points.
L' Explorer Internet MS compare les deux mentions et interprète celle qui a la
valeur la plus élevée. Si donc un élément a un espace du bas de 20points et que
l'élément suivant a un espace du haut de 15points, alors l' Explorer Internet MS
représente les deux éléments avec un espace de 20points.
|
|
Espace/marge à gauche (margin-left)Vous pouvez fixer l'espace gauche/la marge gauche d'un élément. Si l'élément a un voisin sur sa gauche (par exemple pour deux graphiques juxtaposés celui de droite), alors la mention signifie l'espace le séparant de l'élément de gauche. Si l'élément n'a pas de voisin sur sa gauche (par exemple un paragraphe de texte normal), alors la mention signifie la marge par rapport à l'élément parent (par exemple à la marge de page qui est fixée pour le repère <body>). S'il n'existe plus élément parent (par exemple pour le repère <body> lui même), alors la mention concerne l'espace gauche séparant l'élément du bord de la fenêtre d'affichage.
<style type="text/css">
body { margin-left:20px; }
p,ul,ol,blockquote,table,img { margin-left:15px; }
hr { margin-left:-20px; }
</style>
|
Avec margin-left: vous pouvez spécifier la marge/l'espace de
gauche.
Une mention
numérique est permise. Dans l'exemple ci-dessus, une marge de
gauche de 20pixels a d'abord été définie, en affectant cette mention au
repère <body>. Pour des paragraphes de texte courant, des
listes, des citations, des tableaux et des graphiques a été définie une marge
supplémentaire de 15pixels, de façon à ce que ces éléments aient en tout
une marge gauche de 35pixels par rapport au bord gauche de la fenêtre. Les
titres par exemple pour lesquels rien n'est fixé, apparaissent donc en retrait
sur la gauche. Pour les lignes de séparation a été définie dans l'exemple
une marge gauche négative de -20pixels. Ainsi les lignes de séparation
peuvent commencer à l'extrême gauche malgré la marge gauche de 20pixels
définie pour la page.
Si par exemple vous référencez deux graphiques à côté l'un de l'autre et travaillez pour le faire avec des valeurs pour margin-left ou margin-right Netscape (4.x) réagit en partie très différemment et de façon particulièrement obscure.
|
|
Espace/marge à droite (margin-right)Vous pouvez fixer l'espace droit/la marge droite d'un élément. Si l'élément a un voisin sur sa droite (par exemple pour des graphiques juxtaposés celui de gauche), alors la mention signifie l'espace le séparant de l'élément de droite. Si l'élément n'a pas de voisin à droite (par exemple un paragraphe de texte normal), alors la mention signifie la marge par rapport à l'élément parent (par exemple à la marge fixée pour le repère <body>). Quand il n'y a plus d'élément parent (par exemple le repère <body> lui-même), alors la mention concerne l'espace droit qui sépare l'élément du bord de la fenêtre d'affichage.
<img src="image1.gif" style="margin-right:1cm"> |
Avec margin-right: vous pouvez spécifier la marge/l'espace de
droite.
Une mention
numérique est permise. Dans l'exemple ci-dessus un graphique
référencé reçoit une marge droite de 1cm.
Netscape 4.x ignore margin-right.
|
|
Espace/marge en général (margin)Cette mention est un résumé des mentions distinctes facultatives suivantes:
margin-top
margin-bottom
margin-left
margin-right
<style type="text/css">
body { margin:2cm; } /* 2cm haut, droite, bas et gauche */
p.typA { margin: 1cm 2cm; } /* 1cm haut et bas, 2 cm droite et gauche */
p.typB { margin: 1cm 2cm 3cm; } /* 1cm haut, 2cm droite et gauche et 3 cm bas */
p.typC { margin: 1cm 2cm 3cm 4cm; } /* 1cm haut, 2cm droite, 3 cm bas et 4 cm gauche */
</style>
|
Avec margin: vous pouvez spécifier une marge/un espace uniforme
pour le haut, le bas, la gauche et la droite.
Une à quatre mentions
numériques sont permises
Une mention signifie: Les quatre bords reçoivent le même espace/ la même marge.
Pour plusieurs données, les mentions sont interprétées en interne d'après un ordre accepté pour 1=haut, 2=droite, 3=bas, 4=gauche.
Deux mentions signifient : la première mention signifie l'espace pour en haut
et en bas, le deuxième chiffre pour la droite et la gauche.
Trois mentions signifient: la première mention signifie l'espace pour le haut,
la deuxième l'espace pour la droite et la gauche et la troisième l'espace pour
le bas.
quatre mentions signifient: la première mention signifie l'espace pour le haut,
la deuxième l'espace pour la droite, la troisième l'espace pour le bas et la
quatrième l'espace pour la gauche.
|
|
Retrait du texte (text-indent)Vous pouvez spécifier pour un texte de plusieurs lignes que la première ligne soit mise en retrait. Cette élément de structure est très répandu dans les livres et les revues.
<p style="text-indent:7.5mm">beaucoup de texte</p> |
Avec text-indent: Vous pouvez spécifier un retrait pour la
première ligne.
Une mention
numérique est permise.
Avec une valeur négative pour text-indent vous appliquez un retrait extérieur à la première ligne de texte.
|
|
Interligne (line-height)Vous pouvez spécifier un interligne pour des éléments avec beaucoup de
texte. Cette mention est avant tout intéressante avec une mention sur la taille
de police.
<style type="text/css">
p.grand { font-size:14pt; line-height:16pt; }
p.petit { font-size:8pt; line-height:8pt; }
</style>
|
Avec line-height: Vous pouvez spécifier un interligne.
Une mention
numérique est permise.
Pour les interlignes imposés il est pensable qu'un programme d'interprétation accorde à cette mention la priorité et coupe des éléments qui seraient plus hauts, par exemple un graphique référencé dans du texte courant.
|
|
Alignement vertical (vertical-align)Vous pouvez aligner des éléments juxtaposés de diverses hauteurs, par exemple les cellules d'un tableau dans une rangée du tableau ou des passages de texte avec des tailles de police variables l'un par rapport à l'autre sur une ligne.
<table> <tr> <td style="vertical-align:top">...</td> <td style="vertical-align:middle">...</td> <td style="vertical-align:bottom">...</td> </tr> </table> |
Avec vertical align: vous pouvez spécifier l'alignement vertical. Les données suivantes sont possibles:
top = aligner en haut.
middle = aligner au milieu.
bottom = aligner en bas.
baseline = aligner sur la ligne de base (ou en bas s'il n'y a pas de
ligne de base.
sub = mettre en indice (sans réduire la taille de la police).
super = mettre en exposant (sans réduire la taille de la police).
text-top = aligner sur le bord supérieur de l'écriture.
text-bottom = aligner sur le bord inférieur de l'écriture.
Pour le texte courant, une mention en pourcentage est également possible. L'alignement s'oriente alors sur la hauteur de ligne propre à chaque élément.
|
|
Alignement horizontal (text-align, alignment)Vous pouvez aligner des paragraphes de texte.
<style type="text/css">
p,blockquote { text-align:justify }
p,blockquote { alignment:justify }
</style>
|
Avec text-align: ou alignment: vous pouvez aligner les éléments désirés contenant du texte. Les données suivantes sont possibles:
left = aligner à gauche (réglage par défaut).
center = centrer.
right = aligner à droite.
justify = justifier.
Dans la version 1.0 des feuilles de style CSS a été proposée la syntaxe text-align qui est supportée aussi bien par Netscape que par l' Explorer Internet MS. Dans la version 2.0 du langage CSS le consortium W3 a proposé la syntaxe alignment qui n'est pas (encore) interprétée par les navigateurs. L'emploi de text-align est à privilégier actuellement parce qu'il est plus proche de la pratique.
|
|
Césure (white-space)Vous pouvez spécifier comment la césure doit se faire dans les éléments avec du texte.
<p style="white-space:pre">Text Text</p> <p style="white-space:nowrap">Text Text</p> |
Avec white-space: vous pouvez fixer comment le passage à la ligne doit se faire. Les mentions suivantes sont possibles:
normal = passage à la ligne automatique (comme pour tous les les
repères HTML à l'exception de <pre> et de <nowrap>).
pre = césure comme la saisie est faite dans l'éditeur (donc
comme pour <pre>).
nowrap = Pas de césure automatique, la césure est possible par les
repères HTML correspondants.
Cette mention fait partie de la version 2.0 du langage de feuilles de style. L' Explorer Internet MS ne les interprète pas du tout encore, Netscape 4.0 interprète au moins la valeur pre.
|
| |
après: |
Mentions de feuilles de style: cadres et espaces intérieurs
|
avant: |
Mentions de feuilles de style: formatage de police avec fichier de polices
|
SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style
Serge François, 13405@free.fr
