SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style
Ce que Netscape avait introduit en son temps avec la version 3.0 de son
navigateur - la possibilité du 
texte
à plusieurs colonnes - a maintenant été promu comme partie du
standard officiel grâce aux mentions de feuilles de style. Les commandes HTML
correspondantes de Netscape qui n'entrèrent jamais dans le standard officiel et
n'étaient pas non plus beaucoup employées dans la pratique, deviendront sûrement
à l'avenir obsolètes pour cette raison (possible mais pas souhaité). Le
défaut des mentions de feuilles de style décrites ici est pourtant qu'elles ne
font partie que du standard CSS-2.0. Ni Netscape ni l' Explorer MS Internet
n'interprètent ces mentions dans leur version 4.x.
Du texte sur plusieurs colonnes permet la répartition automatique de
passages de texte plus importants sur plusieurs colonnes de texte. À la
différence des tableaux
sans quadrillage, vous n'avez pas besoin de vous soucier de quoi va dans
quelle colonne. Le navigateur place la césure automatiquement pour la
présentation de façon à ce que le texte se répartisse au mieux dans le
nombre des colonnes définies.
Les mentions décrites ici sont appropriées avant tout pour les repères HTML qui définissent un passage plus important, en particulier pour <div>...</div>. Ainsi vous pouvez noter dans le passage d'autres éléments de structure comme des titres, des paragraphes de texte, des graphiques etc... qui se placeront tous dans le texte sur plusieurs colonnes.
 
|
Nombre de colonnes (columns)Pour définir pour un élément HTML ou un passage un texte sur plusieurs colonnes, vous devez mentionner le nombre des colonnes.
<style type="text/css">
div.deuxcolonnes { columns:2; }
</style>
|
Avec columns: vous pouvez déterminer le nombre de colonnes désirées. Les césures seront alors placées automatiquement sur le texte de façon à ce que toutes les colonnes soient remplies au mieux.
|
|
Espace entre les colonnes (column-gap)Vous pouvez déterminer la taille de l'espace entre les différentes colonnes. Pour plus de deux colonnes, cette mentions vaut alors pour les espaces de toutes les colonnes.
<div style="columns:3; column-gap:0.5cm">contenu</div> |
Avec column-gap: vous pouvez spécifier l'espace entre les colonnes.
Une mention
numérique est permise.
|
|
Épaisseur du trait de séparation (column-rule-width)Vous pouvez déterminer l'épaisseur du trait de séparation entre les
colonnes. Pour plus de deux colonnes, le trait de séparation sera répété
entre les colonnes. Vous devez toujours combiner cette mention avec la mention
sur le type
du trait de séparation. Ce n'est qu'avec les deux mentions que des
traits de séparation sont définis.
<style type="text/css">
div.troiscolonnes { columns:3; column-rule-width:1mm; column-rule-style:solid; }
</style>
|
Avec column-rule-width: vous pouvez spécifier l'épaisseur d'un
trait de séparation entre les colonnes.
Une mention
numérique est permise.
|
|
Type du trait de séparation (column-rule-style)Vous pouvez spécifier que les colonnes d'un texte en plusieurs colonnes
soient séparées par des traits de séparation verticaux. Pour cela, vous
pouvez mentionner quel doit être l'aspect de ces traits de séparation. Cette
mention doit toujours être combinée avec une mention sur l' épaisseur
du trait de séparation. Ce n'est qu'avec les deux mentions que des
traits de séparation sont définis.
<div style="columns:2; column-rule-style:solid; column-rule-width:2mm">contenu</div> |
Avec column-rule-style: vous pouvez déterminer l'aspect des traits
de séparation entre les colonnes. Les mêmes mentions sont permises que pour le type
du cadre pour un cadre autour d'un élément HTML de votre choix:
none = pas de trait de séparation (réglage normal).
dotted = traits de séparation en pointillés.
dashed = traits de séparation en tirets.
solid = traits de séparation en tirets continus.
double = traits de séparation en doubles tirets continus.
groove = traits de séparation avec effet 3D.
ridge = traits de séparation avec effet 3D.
inset = traits de séparation avec effet 3D.
outset = traits de séparation avec effet 3D.
|
|
Couleur du trait de séparation (column-rule-color)Vous pouvez déterminer la couleur des lignes de séparation des colonnes
d'un texte sur plusieurs colonnes. La condition préalable en est que les
mentions sur l' épaisseur du trait de séparation et le type du
trait de séparation soient faites en même temps.
<style type="text/css">
div.Glosse { columns:2; column-rule-style:solid; column-rule-width:2mm; column-rule-color:#FF0000; }
</style>
|
Avec column-rule-color: vous pouvez spécifier la couleur des
traits de séparation. Une mention
de couleur. est permise
|
|
Trait de séparation en général (column-rule)Cette mention regroupe les différentes mentions possibles suivantes:
épaisseur
du trait de séparation (column-rule-width)
type de
trait de séparation (column-rule-style)
couleur
du trait de séparation (column-rule-color)
<div style="column-rule:2mm solid green">contenu</div> |
Avec column-rule: vous pouvez regrouper des mentions sur le traits de séparation entre les colonnes. Notez les mentions sur l'épaisseur du trait de séparation, sur le type de trait de séparation ainsi que sur la couleur du trait de séparation séparées par des espaces comme dans l'exemple ci-dessus. L'ordre des différentes mentions n'a pas d'importance. La mention de la couleur du trait de séparation est facultative.
|
| |
après: |
Mentions de feuilles de style: mise en page et saut de page
|
avant: |
Mentions de feuilles de style: positionner des éléments
|
SELFHTML/Quickbar
Mentions de feuilles de style
Serge François, 13405@free.fr
