SELFHTML/Quickbar  Feuilles de style CSS  Mentions de feuilles de style


Mentions de feuilles de style: pseudo-formats

Cette page est un document avec du texte et des informations

 Généralités sur les pseudo-formats
 Pseudo-formats pour les liens (:link, :visited, :active)
 Pseudo-formats pour la première ligne d'un paragraphe (:first-line)
 Pseudo-formats pour le premier signe d'un paragraphe (:first-letter)
 Pseudo-formats pour le texte avant/après les éléments (:before, :after)

 

Généralités sur les pseudo-formats

Ce que sont les pseudo-formats a été décrit dans la partie  définir les pseudo-formats.

 

HTML4.0MS IE3.0Netscape 4.0 Pseudo-formats pour les liens (:link, :visited, :active)

exemple Exemple d'affichage: aperçu

Vous pouvez spécifier l'apparence de liens à des pages non encore visitées, à des pages déjà visitées et à de liens qui viennent d'être cliqués.

Exemple (définition de feuille de style dans l'entête de fichier):

<style type="text/css">
a:link { color:#FF0000; font-weight:bold }
a:visited { color:#990000; }
a:active { color:#0000FF; font-style:italic }
</style>

Explication:

Notez d'abord le repère HTML auquel les mentions pseudo doivent s'appliquer. Dans l'exemple ci-dessus, c'est le repère <a> qui est habituellement employé en HTML pour les  liens. Ces données sont également appropriées pour des éléments qui reçoivent le caractère de lien par  HTML dynamique. Derrière le nom du repère HTML est placé un double point suivi d'un nom pour le pseudo-élément désiré. Pour cela, les mentons suivantes sont permises.

link = pour des liens à des pages non encore visitées
visited = pour des liens à des pages déjà visitées
active = pour des liens en train d'être cliqués

Derrière, vous pouvez définir comme d'habitude entre parenthèses accolade les propriétés pour de tels éléments. À cette fin sont permises les  mentions de couleur pour la couleur du lien. Même d'autres mentions par exemple sur l'  arrière plan du passage du lien pouvant être cliqué sont possibles.

Attention:

Netscape 4.0 et l'Explorer Internet 3.0 MS n'interprètent que les mentions sur la couleur mais pas celles sur le formatage de police. Netscape 4.0 n'interprète pas non plus le pseudo-format a:active.

 

CSS2.0 Pseudo-formats pour la première ligne d'un paragraphe (:first-line)

exemple Exemple d'affichage: aperçu

Pour les paragraphes qui comportent un texte plus long, vous pouvez imposer une apparence différente pour la première ligne du paragraphe. C'est un effet typographique bien connu dans l'imprimerie.

Exemple (définition de feuilles de style dans l'entête de fichier):

<style type="text/css">
p:first-line { font-weight:bold }
h1:first-line { color:#990000; }
</style>

Explication:

Notez d'abord le repère HTML auquel doivent s'appliquer les mentions pseudo. Dans l'exemple ci-dessus, il s'agit des repères HTML <p> et <h1>. Derrière le nom du repère suit un double point suivi lui-même de la mention du pseudo-élément :first-line. Derrière, vous pouvez définir comme d'habitude entre parenthèses accolade les propriétés pour de tels éléments. Pour ce faire sont permises toutes les possibilités de formatage appropriées, par exemple des mentions sur le  formatage de police ou des mentions sur l'  arrière plan.

Attention:

Ni Netscape 4.0 ni l' Explorer Internet MS, même la version 4.0, n'interprètent encore ces mentions.

 

CSS1.0 Pseudo-formats pour le premier signe d'un paragraphe (:first-letter)

exemple Exemple d'affichage: aperçu

Pour les paragraphes qui comportent un texte plus long, vous pouvez imposer une apparence différente pour la première lettre du paragraphe. C'est un effet typographique bien connu dans l'imprimerie.

Exemple (définition de feuilles de style dans l'entête de fichier):

<style type="text/css">
blockquote.goethe:first-letter { font-size:36pt; color:blue; }
blockquote.schiller:first-letter { font-size:36pt; color:green; }
</style>

Explication:

Notez d'abord le repère HTML auquel doivent s'appliquer les mentions pseudo. Dans l'exemple ci-dessus ce sont les classes "goethe" et "schiller" du repère HTML <blockquote>. Suit un double point et enfin la mention de l'élément pseudo :first-letter. Derrière, vous pouvez définir comme d'habitude entre parenthèses accolade les propriétés pour de tels éléments. Pour ce faire sont permises toutes les possibilités de formatage appropriées, par exemple des mentions sur le  formatage de police ou des mentions sur l'  arrière plan.

Attention:

Vous pouvez d'après CSS 2.0 noter derrière la mention content:, non seulement un texte fixe prédéfini, mais aussi des contenus variables et spéciaux. De cette façon par exemple, il est possible de numéroter les paragraphes. Les commandes correspondantes n'ont été connues qu'après la rédaction de ce chapitre et ne sont pas encore décrites ici pour cette raison. La documentation originale de ces commandes très importantes à l'avenir peuvent être consultées dans la spécification CSS-2.0 sous le titre  Generated content and automatic numbering.

Ni Netscape 4.0 ni l' Explorer Internet MS, même la version 4.0, n'interprètent encore ces mentions.

 

CSS2.0 Pseudo-formats pour le texte avant/après les éléments (:before, :after)

Vous pouvez spécifier qu'avant ou après un élément, un texte soit inséré.

Exemple (définition de feuilles de style dans l'entête de fichier):

<style type="text/css">
p.remarque:before { content:"remarque: " }
p.vieilli:after { content:" (n'est plus actuel)" }
</style>

Explication:

Notez d'abord le repère HTML auquel doivent s'appliquer les mentions pseudo. Dans l'exemple ci-dessus, ce sont les classes "remarque" et "vieilli" du repère HTML <p>. Suit un double point et enfin la mention de l'élément pseudo :before, si le texte doit être inséré avant l'élément ou :after, si le texte doit être inséré après l'élément. Derrière, vous pouvez définir comme d'habitude entre parenthèses accolade la mention content:, suivie du texte que vous voulez insérer avant ou après l'élément. Le texte doit figurer entre guillemets. Le texte adopte automatiquement toutes les définitions de format de l'élément concerné. Dans les parenthèses accolades vous pouvez noter d'autres mentions de feuilles de style qui doivent s'appliquer à l'élément.

Attention:

Vous pouvez d'après CSS 2.0 noter derrière la mention content:, non seulement un texte fixe prédéfini, mais aussi des contenus variables et standard. De cette façon par exemple, il est possible de numéroter les paragraphes. Les commandes correspondantes n'ont été connues qu'après la rédaction de ce chapitre et ne sont pas encore décrites ici pour cette raison. La documentation originale de ces commandes très importantes à l'avenir peuvent être consultées dans la spécification CSS-2.0 sous le titre  Generated content and automatic numbering.

Ni Netscape 4.0 ni l' Explorer Internet MS, même la version 4.0, n'interprètent encore ces mentions.

après: Mentions de feuilles de style: positionner des éléments
avant: Mentions de feuilles de style: listes et tableaux
 

SELFHTML/Quickbar  Feuilles de style CSS  Mentions de feuilles de style

© 1998 Stefan Münz / © 2001 Traduction  Serge François, 13405@free.fr