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 avant tout appropriées aux repères HTML qui
créent un paragraphe distinct ou un bloc à savoir par exemple pour <h[1-6]>, <p>, <blockquote>, <address>
ou <pre>. Les éléments de blocs sont également formés par des
repères HTML comme <center>, <div>, <table>, <tr>, <th>
et <td>. Même sur <body> les mentions de
feuilles de style énumérées ici peuvent être employées - dans ce cas les
mentions concernent tout le corps visible du fichier HTML. Il est aussi possible
de couvrir des mots distincts de leur propre couleur de fond à l'aide du 
repère <span>.
Vous pouvez donc définir à l'aide de mentions de feuilles de style
pour des blocs de texte distincts et des passages de texte de votre choix, des
couleurs d'arrière plan ou des images d'arrière plan séparées qui tranchent
sur la couleur
d'arrière plan définie ou des images
d'arrière plan. Vous pouvez atteindre de très beaux effets en
combinant les mentions des couleurs d'arrière plan et des images d'arrière
plan d'éléments distincts avec les mentions
de feuilles de style pour les cadres et espaces intérieurs.
Netscape et l' Explorer Internet MS interprètent les mentions de couleur d'arrière plan et d'image d'arrière plan avec de légères différences suivant les cas. Dans les descriptions qui suivent des remarques seront faites sur les particularités.
 
|
Couleur d'arrière plan (background-color)Vous pouvez définir une couleur d'arrière plan distincte pour un élément HTML.
<style type="text/css">
h1 { background-color:#003366; }
</style>
|
Avec background-color: vous pouvez spécifier une couleur
d'arrière plan. Une mention
de couleur est permise
Netscape 4.0 ne forme pas de véritable bloc de couleur pour les paragraphes
de plusieurs lignes, mais trace la couleur vers la fin de la ligne jusqu'à la
fin du texte (voir le premier des exemples). Pour l'éviter vous pouvez noter en
plus les mentions border-style:none; border-width:thin;. Davantage de
détails à ce sujet dans les parties traitant du type
du cadre (border-style) et de l' épaisseur
du cadre (border-width).
Si pour des éléments de texte comme les titres, l'espace entre les limites
du texte et le cadre formé par la couleur d'arrière plan vous semble trop petit, vous
pouvez définir un espace intérieur (padding).
|
|
Image d'arrière plan (background-image)Vous pouvez définir une image d'arrière plan propre à des éléments HTML distincts.
<p style="background-image:url(back.gif);">Text</p> |
Avec background-image:url([nomfichier]): vous pouvez spécifier un graphique d'arrière plan. Par défaut, ce graphique est répété comme Wallpaper (papier peint), comme la mention d'une image d'arrière plan dans le repère HTML <body>. Le texte et les graphiques référencés apparaissent sur ce graphique d'arrière plan. Comme types de graphiques vous devez utiliser des graphiques GIF ou JPG comme il est usuel en HTML.
Dans l'exemple on part du principe que le fichier graphique se trouve dans le
même répertoire que le fichier HTML. Si le graphique se trouve dans un autre
répertoire, vous devez mentionner le chemin relatif ou absolu. Cela fonctionne
exactement comme pour incorporer
des graphiques en HTML.
Si l'élément pour lequel le graphique d'arrière plan est défini est plus petit en hauteur ou en largeur que le graphique d'arrière plan, celui-ci sera coupé à la taille de l'élément pou être représenté.
|
|
Effet de répétition (background-repeat)En principe un graphique d'arrière plan est répété dans un effet de papier peint sur tout l'espace qu'il a à sa disposition. Vous pouvez pourtant imposer un autre effet.
<style type="text/css">
body { background-image:url(back.gif); background-repeat:no-repeat; }
</style>
|
Avec background-repeat: vous pouvez contrôler l'effet de répétition d'un graphique d'arrière plan que vous incorporez avec background-image. Un des données suivantes est permise.
repeat = répéter (réglage par défaut).
repeat-x = ne répéter que sur une "ligne" horizontalement.
repeat-y = ne répéter que sur une "colonne" horizontalement.
no-repeat = ne pas répéter, n'afficher que comme image unique.
Netscape 4.0 interprète bien cette mention mais a eu lors des tests d'énormes difficultés pour représenter le contenu des éléments.
|
|
Effet de filigrane (background-attachment)Pour des éléments plus longs, une image d'arrière plan bouge avec le texte quand on le fait défiler. Il est pourtant possible d'imposer à l'image d'arrière plan de rester fixe (effet de filigrane).
<div style="background-image:url(back.gif); background-attachment:fixed;">Text</div> |
Avec background-attachment: vous pouvez contrôler lors du défilement la conduite que doit adopter un graphique d'arrière plan que vous incorporez avec background-image. Une des données suivantes est permise.
scroll = défile avec le texte (réglage par défaut).
fixed = l'image d'arrière plan reste fixe.
Netscape 4.x n'interprète pas cette mention. Les tests ont montré que l'effet de filigrane ne fonctionne chez l' Explorer Internet MS que s'il est appliqué sur le repère <body> et non sur des paragraphes de texte ou autres.
|
|
Position d'arrière plan (background-position)Cette mention n'est intéressante que si vous imposez grâce à la
mention correspondante d' effet
de répétition (background-repeat) que le graphique ne soit affiché
qu'une fois. Pour ce cas, il vous est possible de fixer la position d'arrière
plan exacte où le graphique doit être placé dans l'élément HTML.
<style type="text/css">
body { background-image:url(back.gif); background-position:1cm 2cm; }
</style>
|
Avec background-position: vous pouvez fixer où le coin supérieur gauche du graphique doit être par rapport à l'élément HTML pour lequel le graphique d'arrière plan a été défini. Sont permises soit deux valeurs numériques, la première pour l'espace de gauche et la deuxième pour l'espace du haut. Ou bien une ou une combinaison judicieuse des données suivantes.
top = aligné en haut verticalement.
center = centré horizontalement.
middle = au milieu verticalement.
bottom = aligné en bas verticalement.
left = aligné à gauche horizontalement.
right = aligné à droite horizontalement.
Netscape 4.0 n'interprète pas cette mention. Il représente l'image d'arrière plan mais ignore les mentions sur son placement imposé.
|
|
Arrière plan (en général) (background)Cette mention regroupe les différentes mentions possibles suivantes:
image d'arrière plan (background-image)
effet de répétition (background-repeat)
effet de filigrane (background-attachment)
position d'arrière plan (background-position)
<p style="background:url(back.gif) no-repeat middle center;">Text</p> |
Avec background: vous pouvez regrouper les mentions pour un graphique d'arrière plan. Notez les mentions pour le graphique d'arrière plan, l'effet de répétition et l'effet de filigrane ainsi que pour la position séparées par des espaces comme dans l'exemple ci-dessus. L'ordre des différentes mentions n'a pas d'importance. Il n'est pas indispensable de noter quelque chose pour toutes les mentions.
Netscape 4.0 n'interprète pas les mentions avancées pour l'image d'arrière plan et a eu lors des tests d'étranges problèmes de représentation.
|
| |
après: |
Mentions de feuilles de style: listes et tableaux
|
avant: |
Mentions de feuilles de style: cadres et espaces intérieurs
|
SELFHTML/Quickbar
Feuilles de style
CSS
Serge François, 13405@free.fr
