SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
 |
Pseudo-formats |
|
|
 | |
Pour la définition des pseudo-formats, se référer à la partie 
définir des pseudo-formats.
 |
:link, :visited, :hover, :active, :focus (pseudo-formats pour les liens)Vous pouvez spécifier l'apparence de liens à des pages non encore visitées, à des pages déjà visitées et à des liens qui viennent d'être cliqués.
<html><head><title>:link, :visited, :hover, :active</title>
<style type="text/css">
a:link { font-weight:bold; color:#0000E0; text-decoration:none }
a:visited { font-weight:bold; color:#000080; text-decoration:none }
a:hover { font-weight:bold; color:#E00000; text-decoration:none }
a:active { font-weight:bold; color:#E00000; text-decoration:underline }
a:focus { font-weight:bold; color:#00E000; text-decoration:underline }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<h1>Services de recherche connus</h1>
<p>
<a href="http://fr.yahoo.com/">Yahoo (page d'accueil)</a><br>
<a href="http://www.google.fr/">Google (moteur de recherche)</a><br>
<a href="http://web.de/">Web.de (page d'accueil)</a><br>
<a href="http://www.abondance.com/audit/meta.html">Abondance (moteur de recherche Meta)</a>
</p>
</body></html>
|
Les pseudo-formats sont notés globalement dans un passage style. Les pseudo-formats décrits ici s'appliquent à l'élément a en HTML, raison pour laquelle est noté avant les deux points, le a. Dans les définitions de formats pour les différents pseudo-formats vous pouvez affecter les propriétés CSS appropriées que vous voulez. Les pseudo-formats signifient:
:link = pour les liens aux pages qui n'ont pas encore été visitées
:visited = pour les liens aux pages qui ont déjà été visitées
:hover = pour les liens sur lesquels l'utilisateur passe avec la souris
:active = pour les liens en train d'être cliqués
:focus = pour les liens qui deviennent actifs (focus) par exemple lors d'une "recherche" par tabulateur
Pour obtenir une représentation correcte des pseudo-formats, vous devez les noter l'ordre suivant:
:link, :visited, :hover, :active.
Netscape 4.x et l'Explorer Internet 3.0 n'interprètent pas encore toutes les mentions. Tout particulièrement Netscape 4.x qui ne réagit pas encore au pseudo-format a:hover. L'Explorer Internet 5.x ne connaît pas encore la mention a:focus.
:focus fonctionne aussi pour d'autres éléments que des liens. Si par exemple vous définissez des propriétés de feuilles de style pour h1:focus et qu'ensuite vous cliquez avec la souris sur un titre h1 celui-ci prendra aussi longtemps que la souris reste cliquée les propriétés définies.
|
|
:first-line, :first-letter, :first-child (Pseudo-formats pour les paragraphes)Vous pouvez imposer une apparence séparée pour la première ligne des paragraphes avec un flux de texte plus long. En outre vous pouvez imposer une apparence séparée pour le premier signe de la première ligne. Et enfin, vous pouvez même spécifier que le premier élément enfant d'un élément reçoive un aspect particulier. Ce sont des effets typographiques qui nous sont connus par les produits d'imprimerie.
<html><head><title>:first-line, :first-letter, :first-child</title>
<style type="text/css">
p:first-line { font-weight:bold }
p:first-letter { font-size:300%; color:red }
div { background-color:#E0E0E0 }
div p:first-child { background-color:#C0C0C0; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<p>On ne peut établir des ponts qu'entre des rives qui sont séparées. Car où il n'y a pas de ravin, il n'y a pas là de différences non plus, et où il n'y a pas de différences,il n'y a pas de vie.</p>
<div>
<p>Et la morale de l'histoire:</p>
<p>Ne te fie pas aux philosophes!</p>
</div>
</body></html>
|
Les pseudo-formats sont notés globalement dans un passage style. Les pseudo-formats décrits ici sont conçus pour les éléments HTML typiques pour les paragraphes et pour les titres. Dans les définitions de format pour les différents pseudo-formats vous pouvez affecter les propriétés CSS appropriées que vous voulez. Les pseudo-formats signifient:
:first-line = la première ligne de l'élément reçoit les propriétés CSS
:first-letter = la première lettre du texte reçoit les propriétés CSS
:first-child = le premier élément enfant de l'élément reçoit les propriétés CSS
L' Explorer Internet n'interprète pas encore :first-child.
|
|
:before, :after (Pseudo-formats pour le texte généré automatiquement)Vous pouvez spécifier qu'avant ou après, un élément du contenu soit inséré automatiquement. Il peut s'agir de texte statique mais aussi de contenus variables.
<html><head><title>:before, :after</title>
<style type="text/css">
td.Prix:before { content:"Prix: "; }
td.Prix:after { content:",- EUR"; }
td.Produit:before { content:url(list_style_image.gif)" "; }
td.Produit:after { content:" "attr(title); }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<table border="1">
<tr>
<td class="Produit" title="(pour les enfants et les adultes)">lapin en peluche</td>
<td class="Prix">29</td>
</tr>
<tr>
<td class="Produit">boules de cristal</td>
<td class="Prix">39</td>
</tr>
</table>
</body></html>
|
Les pseudo-formats sont notés globalement dans un passage style. Les pseudo-formats décrits ici signifient:
:before = contenu qui doit être inséré avant le contenu noté pour l'élément
:after = contenu qui doit être inséré après le contenu noté pour l'élément
Dans les parenthèses accolades, vous spécifiez alors avec content:, ce qui doit être inséré automatiquement avant ou après le contenu de l'élément noté en HTML.
Dans l'exemple ci-dessus il est spécifié pour les éléments td avec le nom de classe Prix, qu'avant le contenu de l'élément, le texte statique Prix: soit affiché, et après le contenu de l'élément, le texte EUR,-; il suffit ensuite en HTML de noter seulement les chiffres.
Pour les cellules de tableau avec le nom de classe Produit il est spécifié qu'avant le contenu de l'élément, un graphique soit affiché. Pour cela, vous pouvez utiliser la syntaxe url([URI]) pour référencer le graphique. Pour cette même classe de cellules de tableau il est fixé que si dans le repère d'ouverture <td> un attribut title= est noté, la valeur qui lui a été affectée sera insérée comme texte après le contenu de l'élément. Pour ce genre de contenu variable vous pouvez utiliser la syntaxe attr([nom d'attribut]) comme indiqué dans l'exemple ci-dessus.
Le texte statique derrière content: doit être placé entre guillemets. Vous pouvez voir aussi dans l'exemple ci-dessus qu'il est possible de combiner les mentions. Ainsi la mention content:url(list_style_image.gif)" "; signifie que derrière le graphique, un espace statique doit encore être inséré.
Ces mentions ne sont pas encore interprétées par l'Explorer Internet 5.x.
|
|
Numérotation automatiqueUne syntaxe avancée des pseudo-formats :before, :after permet aussi la numérotation automatique d'éléments par exemple pour des titres de chapitres.
<html><head><title>:before, :after</title>
<style type="text/css">
h1:before { content:counter(niveau01);
conter-increment(niveau01);
counter-reset(niveau02);
}
h2:before { content:counter(niveau01) ". ";
counter(niveau02);
conter-increment(niveau02);
}
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<h1>Titre N° 1</h1>
<p>texte</p>
<h2>Titre N° 2</h2>
<p>texte</p>
<h2>Titre N° 2</h2>
<p>texte</p>
<h1>Titre N° 1</h1>
<p>texte</p>
<h2>Titre N° 2</h2>
<p>texte</p>
<h2>Titre N° 2</h2>
<p>texte</p>
<h2>Titre N° 2</h2>
<p>texte</p>
<h1>Titre N° 2</h1>
<p>texte</p>
</body></html>
|
En principe, vous mentionnerez pour la numérotation automatique un élément de titre comme h1 ou bien h2 et placerez la numérotation devant le texte de cet élément. Alors, vous devez noter dans le passage style des sélecteurs comme h1:before ou bien h2:before. Dans les parenthèses accolades suit ensuite la propriété content: comme c'est courant avec :before et :after. Derrière content:, peuvent suivre trois fonctions en rapport avec la numérotation automatique qui contrôlent les compteurs. Séparez plusieurs appels de fonction par des points virgules (;).
Avec counter([Nom]) vous insérez la valeur du compteur avec le nom Nom à l'endroit actuel. À la première occurrence, le compteur a la valeur 1. Dans les parenthèses arrondies notez le nom du compteur. Dans l'exemple ci-dessus, ce sont les noms niveau01 et niveau02. Vous pouvez affecter ces noms librement.
Avec counter-increment([Nom]) vous incrémentez de 1 la valeur du compteur dont le nom est mentionné. Normalement, notez d'abord counter([Nom]) et ensuite counter-increment([Nom]), pour insérer d'abord la valeur actuelle du compteur avant de l'incrémenter pour la prochaine occurrence du type de l'élément.
Avec counter-reset([Nom]) vous réinitialisez un compteur à sa valeur de départ (1) . C'est important avant tout si vous travaillez avec des chapitres et des sous-chapitres comme dans l'exemple ci-dessus. Là, quand un nouvel élément h1 est rencontré, le compteur pour l'élément h2 est réinitialisé sur 1.
Outre les fonctions pour le contrôle de compteur, du texte statique peut être aussi noté. Dans l'exemple ci-dessus, un point est noté derrière l'appel de counter(niveau01) comme texte statique. Ainsi dans l'exemple, apparaît par le gestion des deux compteurs pour les titres N° 1 et N° 2 un schéma de numérotation comme 1, 1.1, 1.2, 2, 2.1, 2.2., 2.3, 3 etc...
La numérotation automatique n'est jusqu'alors soutenue ni par Netscape ni par l'Explorer Internet, elle l'est par contre par le navigateur Opera.
|
| |
 |
Positionnement et affichage d'éléments
|
 |
Formatage de tableaux
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
