SELFHTML/Quickbar  Feuilles de style CSS  Définir des feuilles de style

Définir des formats globaux
Cette page est un document avec du texte et des informations

 Définir des formats pour les repères HTML
 Définir des sous-classes de format
 Définir des formats pour les repères HTML imbriqués
 Définir des formats indépendants
 Définir des pseudo-formats

 

CSS1.0MS IE3.0Netscape 4.0 Définir des formats pour les repères HTML

exemple Exemple d'affichage: aperçu

Vous pouvez définir grâce aux mentions de feuilles de style des formats pour des repères HTML courants par exemple des repères HTML pour les  types de paragraphes et structure de texte ou pour les  tableaux. Si vous utilisez alors le repère correspondant dans le fichier HTML tous les formats que vous avez définis pour ce repère seront utilisés. Ainsi vous pouvez définir par exemple pour le titre n°1 qu'il soit affiché une police Helvetica de 20 points en rouge gras et italique et avec un espace après le paragraphe de 16 points. Si ensuite vous définissez un titre n°1 dans le texte du fichier HTML les spécificités de format seront prises en compte lors de l'affichage par le navigateur WWW.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
h1 { font-size:48pt; color:#FF0000; font-style:italic; }
p,li  { font-size:12pt;
     line-height:14pt;
     font-family:Helvetica,Arial;
     letter-spacing:0.2mm;
     word-spacing:0.8mm; }
//-->
</style>
</head>
<body>
<h1>titre n°1</h1>
<p>un paragraphe normal</p>
<ul>
<li>un élément de liste
<li>un autre élément de liste
</ul>
</body>
</html>

Explication:

à des endroits permis il est possible d'incorporer des feuilles de style en HTML (voir  incorporer des feuilles de style en HTML).

Pour ce faire notez d'abord le repère HTML désiré et cela sans parenthèses pointues. Dans l'exemple ci-dessus les repères HTML h1 (titre n°1), p (paragraphe) et li (élément de liste) ont été notés de cette façon. Si vous voulez formater de la même façon plusieurs repères HTML entrez au clavier tous les repères désirés en les séparant par des virgules comme dans l'exemple ci-dessus p,li.

Cela signifie la même chose si vous notez:
h1 { font-family:Helvetica }
h2 { font-family:Helvetica }
ou si vous notez:
h1, h2 { font-family: Helvetica }

À la suite sont inscrites les définitions de format désirées entre parenthèses accolades { et }. Dans ces parenthèses vous pouvez définir une ou plusieurs caractéristiques de format. Chaque attribution d'une caractéristique de format comprend un nom par exemple color et une valeur par exemple #FF0000, séparée par deux points. terminez chaque définition de format par un point virgule. Le point virgule ne peut être omis que pour la dernière définition de format avant la parenthèse de fermeture.

Important: Les espaces sont bien permis dans les définitions de format mais le navigateur Netscape a montré peu de tolérance à cette possibilité - en résumé il ignore les données. Bien que ce ne soit pas aussi lisible il est provisoirement préférable pour cette raison de ne pas utiliser d'espaces dans une définition de format.

Dans l'exemple ci-dessus il a été attribué au repère de titre n°1 une taille de caractères de 48 points (font-size:48pt;), la couleur de caractères rouge (color:#FF0000;) et le style de police en italique (font-style:italic;). Si vous employez le repère HTML concerné dans le fichier HTML comme dans l'exemple ci-dessus, les formats définis seront appliqués.

Pour les caractéristiques de formatage et leurs valeurs distinctes reportez vous aux  données de feuilles de style.

Attention:

il est possible que des données de feuilles de style pour des repères HTML comme <p> ou <li> ne soient interprétés que si vous notez un repère d'ouverture et de fermeture.

 

CSS1.0MS IE3.0Netscape 4.0 Définir des sous-classes de format

exemple Exemple d'affichage: aperçu

Vous pouvez à l'aide de feuilles de style définir des sous-classes des repères HTML usuels. C'est avant tout judicieux pour des repères HTML concernant les  paragraphes et structure de texte ou ceux concernant les  tableaux. Ainsi vous pouvez par exemple créer deux variantes du repère HTML pour le titre n°1 l'une avec écriture en rouge et l'autre avec l'écriture en noir par exemple. Pour ce faire vous attribuez des noms pour les sous-classes correspondantes.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
p.normal { font-size:10pt; color:black; }
p.grand { font-size:12pt; color:black; }
p.petit { font-size:8pt; color:black; }
all.rouge { color:red; }
.bleu { color:blue; }
//-->
</style>
</head>
<body>
<p class="normal">texte normal avec écriture de 10 points noire</p>
<p class="grand ">texte du paragraphe avec écriture de 12 points noire</p>
<p class="petit ">texte du paragraphe avec écriture de 8 points noire</p>
<p class="rouge ">texte du paragraphe rouge</p>
<address class="rouge ">texte du paragraphe rouge pour des adresses</address>
<blockquote class="bleu ">citation en bleu</blockquote>
</body>
</html>

Explication:

Vous pouvez incorporer des feuilles de style dans du HTML à des emplacements permis (voir  incorporer des feuilles de style en HTML).

Vous y formez des sous-classes de repères HTML en notant d'abord le repère HTML dans l'exemple ci-dessus p. Suivent un point et le nom pour la sous-classe.

À la place d'un repère HTML déterminé, vous pouvez aussi noter le mot clé all (=tous). Ainsi vous définissez une sous-classe avec des formatages que vous pouvez ensuite utiliser sur un repère HTML quelconque. Le mot clé all peut aussi être omis. Dans ce cas la définition de format commence par un point suivi du nom de la sous-classe. Dans l'exemple ci-dessus, la sous-classe bleu a été définie de cette façon.

Les noms qui suivent le point peuvent être attribués librement. Ils ne doivent pas être trop longs et ne peuvent comporter d'espaces ou de caractères spéciaux.

Dans le corps du fichier vous pouvez utiliser des sous-classes définies en notant dans le repère d'ouverture HTML la mention class= suivie du nom de la sous-classe que vous avez attribué auparavant. Dans l'exemple ci-dessus sont notées d'abord trois variantes du texte normal de paragraphe <p>. Dans les deux lignes qui suivent vous pouvez voir l'effet du mot clé all. Différents repères HTML (dans l'exemple <p> et <address>) peuvent utiliser la même sous-classe de formats.

Pour les caractéristiques distinctes de formatage et leurs valeur possibles voyez les  données de feuilles de style.

Attention:

Il est tout à fait possible d'attribuer le même nom de classe pour plusieurs repères. Ainsi par exemple vous pouvez définir des sous-classes comme p.grand, h1.grand et li.grand.

Pour attribuer des caractéristiques déterminées de formatage à des  parties de textes plus grandes, qui comportent par exemple des titres du texte et des listes définissez de préférence des sous-classes souhaitées pour le repère HTML <div>...</div>. Ainsi vous pouvez par exemple définir une sous-classe div.rouge {color:red; }. Si ensuite vous insérer des passages de texte plus importants dans le repère <div> tous les types de paragraphes de cette partie auront leur texte de couleur rouge.

Si vous travaillez avec le mot clé all, des données comme font-size:10pt peuvent s'avérer être peu judicieuses dans certaines circonstances. Si par exemple vous mentionnez all.Mon { font-size:10pt;} et que vous notez ensuite dans le texte <h1 class="Mon"> le titre n°1 sera également représenté avec une fonte de 10 points. Il est dans ce cas plus judicieux de travailler avec des données en pourcentage qui sont également permises dans les feuilles de style. Ainsi vous pourriez par exemple définir une sous-classe générale all.Mon { font-size:150%;}. Si ensuite vous attribuez cette sous-classe à un repère HTML le texte que celui-ci contient aura une taille 1½ plus grande que la taille qu'il aurait normalement.

 

CSS1.0MS IE4.0Netscape 4.0 Définir des formats pour les repères HTML imbriqués

exemple Exemple d'affichage: aperçu

Si vous ne mentionnez rien d'autre un repère HTML à l'intérieur d'un autre repère HTML adopte les caractéristiques de ce dernier en y ajoutant seulement les siennes propres. Si par exemple pour le titre n°1 vous définissez la police Times et la couleur rouge, le texte situé dans un tel titre et formaté avec <i>...</i> apparaîtra de la même façon en rouge et avec la police Times mais en plus il sera en italique.

Vous pouvez aussi déterminer à l'aide de feuilles de style qu'un repère HTML n'aura certaines caractéristiques de formatage que s'il se trouve imbriqué dans un autre repère HTML déterminé. Ainsi vous pouvez décider par exemple que <i>...</i> placé dans des titres ne sera pas représenté en italique mais en couleur bleue alors que cette même commande placée dans d'autres repères HTML ne provoquera comme d'habitude rien d'autre qu'un affichage en italique.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
h1 { color:red; }
h1 i { color:blue; font-weight:normal; }
//-->
</style>
</head>
<body>
<h1>Nous apprenons <i>les feuilles de style</i></h1>
<p>Nous apprenons <i>les feuilles de style</i></p>
</body>
</html>

Explication:

À certains endroits autorisés vous pouvez incorporer des feuilles de style en HTML (voir  incorporer des feuilles de style en HTML).

Dans l'exemple ci-dessus il est établi que des passages de texte formatés avec les repères <i> ... </i> ne soient pas représentés comme d'habitude en italique mais normal et en couleur bleue. Mais alors seulement quand ce passage de texte se trouve dans un titre n°1. Pour cela notez d'abord le repère hiérarchiquement supérieur dans l'exemple h1 suivi séparé d'un espace du repère hiérarchiquement inférieur dans l'exemple i.

Dans la première ligne du passage <body> de l'exemple ci-dessus cette définition s'appliquera; dans la deuxième ligne par contre où le repère <i>...</i> est imbriqué dans un autre repère que h1 le repère <i>...</i> aura son effet habituel.

Pour les caractéristiques distinctes de formatage et leurs valeur possibles voyez les  données de feuilles de style.

 

CSS1.0MS IE4.0Netscape 4.0 Définir des formats indépendants

exemple Exemple d'affichage: aperçu

Vous pouvez prédéfinir des formats que vous pouvez utiliser ensuite sur les repères HTML qui s'y prêtent au choix. Ainsi par exemple vous pouvez définir un format indépendant avec la caractéristique gras italique. Vous pouvez ensuite utiliser ce format indépendant dans des repères HTML en plus d'autres formats définis pour le repère HTML concerné.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
<!--
p,li,dd,dt,blockquote { color:red;font-family:Times; margin-top:1cm; margin-left:1cm; }
#grasitalique { font-weight:bold; font-style:italic; }
//-->
</style>
</head>
<body>
<p id="grasitalique ">Formatage spécial</p>
<p>Ce texte est formaté avec <em id="grasitalique ">Formatage spécial</em></p>
</body>
</html>

Explication:

À certains endroits autorisés vous pouvez incorporer des feuilles de style en HTML (voir  incorporer des feuilles de style en HTML).

Dans l'exemple un format uniforme avec différentes données a été défini pour les repères de texte courant standard tels que <p>, <li>, <dt>, <dd> et <blockquote>. De plus un format indépendant du nom de  grasitalique a été défini. Devant des noms de formats indépendants doit être placé le signe #. Pour les noms, respectez les mêmes règles que pour les  sous-classes. Dans l'exemple ci-dessus les deux données de feuilles de style représentant un texte en gras et en italique ont été attribuées au format indépendant du nom de grasitalique.

Dans le corps du fichier vous pouvez utiliser des formats libres à l'intérieur de repères HTML. en notant la mention id= dans le repère d'ouverture suivie entre guillemets du nom du format indépendant sans le signe # (id = identifier = identificateur). Ainsi les caractéristiques du format défini indépendant sont elles attribuées au contenu placé entre le repère d'ouverture et le repère de fermeture. Dans l'exemple ci-dessus le format indépendant grasitalique est mentionné une fois après le repère d'ouverture <p> et une fois après le repère d'ouverture <em>. Vous pouvez ainsi constater comment on peut utiliser des formats indépendants et comment ils complètent par ajout d'autres formats.

Pour les caractéristiques distinctes de formatage et leurs valeur possibles voyez les  données de feuilles de style.

Attention:

L'effet des formats indépendants est en principe par ajout c'est à dire qu'ils adoptent la format disponible et y ajoutent leurs propres caractéristiques. Des formats indépendants ont cependant priorité sur les autres formatages en cas de contradiction. Si vous définissez par exemple pour le titre n°1 une couleur rouge et que vous attribuez à ce titre un format indépendant dans lequel la couleur définie est la couleur bleue est définie alors le titre sera bleu.

 

CSS1.0MS IE4.0Netscape 4.0 Définir des pseudo-formats

exemple Exemple d'affichage: aperçu

Des pseudo-éléments sont des éléments dans un fichier HTML qui ne se laissent pas décrire par un repère HTML clair et précis par exemple un "lien qui n'a pas encore été visité" ou bien la première lettre d'un paragraphe. Pour définir de tels pseudo-éléments il y a une syntaxe déterminée dans le langage des feuilles de style CSS.

Exemple:

<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
    a:link { color:#FF0000; font-weight:bold }
    a:visited { color:#990000; }
    a:active { color:#0000FF; font-style:italic }
</style>
</head>
<body>
<a href="selfhtml.htm">lien</a></p>
</body>
</html>

Explication:

Dans les définitions de feuilles de style de pseudo-éléments notez d'abord le repère HTML concerné dans l'exemple le repère <a> pour des liens suivi d'un double point et d'une mention valide comme link ou visited. Attention: ce ne sont pas des noms que vous pouvez choisir librement mais des mots clés invariables.

Pour les définitions de format proprement dites (à l'intérieur des parenthèses), respectez les mêmes règles que pour  définir des formats pour des repères HTML.

Pour les différentes données permises voyez aussi:  Données de feuilles de style: pseudo-formats..

après: Formatage rapide dans le texte
avant: Incorporer des feuilles de style en HTML
 

SELFHTML/Quickbar  Feuilles de style CSS  Définir des feuilles de style

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