<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Les feuilles de style</title>
  <meta name="GENERATOR" content="amaya 8.4, see http://www.w3.org/Amaya/" />
</head>

<body xml:lang="fr" lang="fr">

<table border="0" summary="toc">
  <tbody>
    <tr>
      <td><p><img alt="W3C" src="../images/w3c_home" /> <img alt="Amaya"
        src="../images/amaya.gif" /></p>
      </td>
      <td><p><a href="Xml.html.fr#page_body" accesskey="p"><img
        alt="previous" src="../images/left.gif" /></a> <a
        href="Manual.html.fr" accesskey="t"><img alt="top"
        src="../images/up.gif" /></a> <a href="Searching.html.fr#Searching"
        accesskey="n"><img alt="next" src="../images/right.gif" /></a></p>
      </td>
    </tr>
  </tbody>
</table>

<div id="Style">
<h2><a name="L1023">Les feuilles de style</a></h2>

<p>Le menu <strong>Style</strong> vous permet de changer l'apparence de vos
documents de deux façons différentes :</p>
<ul>
  <li>en utilisant les cascades des feuilles de style (CSS).</li>
  <li>en utilisant les éléments et les attributs HTML.</li>
</ul>

<p>Les entrées du menu <strong>Style</strong> sont consacrées à la création
et la gestion des propriétés et des feuilles de style CSS.</p>

<h3><a name="Creating">Créer et mettre à jour un attribut de style</a></h3>

<p>Chacune des quatre entrées du menu <strong>Style</strong> appelle une
boîte de dialogue qui permet l'association d'un attribut de
<code>style</code> aux éléments courants sélectionnés
:<strong></strong><strong></strong></p>
<ul>
  <li>L'option <strong>Style de caractères</strong> permet de choisir la
    police de caractère, le style du caractère, la taille du corps et le
    style souligné.</li>
  <li><strong><span style="font-weight: normal">L'option</span>
    Couleurs</strong> permet de choisir les couleurs du premier plan et de
    l'arrière plan dans la palette. Cliquez sur une cellule de la palette
    avec le bouton gauche de la souris pour attribuer la couleur du premier
    plan, cliquez sur le bouton du milieu pour attribuer la couleur de
    l'arrière plan.</li>
  <li>L'option <strong>Format</strong> permet de choisir l'alignement, le
    renfoncement, la justification et l'interligne.</li>
  <li>L'option <strong>Image de fond</strong> permet de choisir une image de
    fond et son mode de répétition.</li>
</ul>

<p>Dans toutes ces boîtes de dialogue, les boutons <strong>Défaut</strong>
permettent de supprimer l'information de style correspondant pour les
éléments sélectionnés.</p>

<p>Toutes les modifications faites avec ces boîtes de dialogue peuvent être
vues immédiatement dans la vue formatée et également dans la vue
structure.</p>

<h3><a name="Creating,">Créer un style générique pour un élément ou une
classe</a></h3>

<p>Quand un attribut <code>style</code> a été associé à un élément, vous
pouvez utiliser cet élément comme un modèle pour créer ou modifier une règle
de style&nbsp;:</p>
<ul>
  <li>Sélectionnez cet élément (vous devez sélectionner un seul élément et
    cet élément doit avoir un attribut <code>style</code>)</li>
  <li>Choisissez <strong>Créer une règle</strong> depuis le menu
    <strong>Style</strong>. Une boîte de dialogue surgit et visualise une
    liste de sélecteurs CSS. Cette liste inclus toutes les classes qui sont
    définies pour le document courant (y compris les classes définies par les
    feuilles de style liées au document), ainsi que les types d'élément
    auquel le style est associé.</li>
  <li>Choisissez un sélecteur dans cette liste ou entrez un nouveau nom de
    classe et cliquer sur le bouton <strong>Confirmer</strong>. Le style de
    l'élément sélectionné est désormais associé au sélecteur choisi et
    l'attribut <code>style</code> est supprimé pour l'élément sélectionné.
    Son contenu est déplacé à l'élément <code>STYLE</code>, dans le
    <code>HEAD</code> document, et tous les éléments correspondant au
    sélecteur sont visualisés dans le nouveau style.</li>
</ul>

<p>Quand vous avez créé de nouvelles classes avec la commande <strong>Créer
une règle</strong>, vous pouvez associer ces classes à certains éléments dans
le document&nbsp;:</p>
<ul>
  <li>Choisissez <strong>Appliquer une classe</strong> depuis le menu
    <strong>Style</strong>. Une boîte de dialogue surgit, affichant toutes
    les classes existantes. Choisissez une de ces classes. Les éléments
    sélectionnés sont désormais visualisés avec le style associé à la classe
    choisie.</li>
</ul>

<p>Pour associer une classe à un élément, vous pouvez également utiliser le
<a href="Attributes.html.fr#L1073">menu <strong>Attributs</strong></a>. Ce
menu permet aussi d'effacer un attribut de classe pour un élément ou de le
changer : l'attribut de classe se manipule comme un autre attribut.</p>

<h3><a name="feuilles">Les feuilles de style CSS externes et les feuilles de
style CSS utilisateur</a></h3>

<p>Un document peut associer plusieurs feuilles de style externes qui sont
chargées avec le document et lui sont appliquées. Une feuille de style
externe peut s'appliquer à plusieurs documents. Quand la même feuille de
style s'applique à plusieurs documents affichés, Amaya ne charge qu'une seule
instance de la feuille de style.</p>

<p>L'utilisateur peut définir une feuille de style spécifique qui s'applique
à tous les documents chargés. Cette feuille de style est appelée
<strong>Feuille de Style Utilisateur</strong> et est le fichier local
<strong>amaya.css</strong> conservé dans l'environnement de l'utilisateur (le
<a href="Configure.html.fr#AmayaHome">répertoire d'AmayaHome</a>). Par
exemple si vous préférez afficher les document en Helvetica et imprimer avec
une police de caractères de petite taille, vous pouvez créer votre feuille de
style utilisateur avec les règles CSS suivantes&nbsp;:</p>
<pre>@media print {
 BODY {font-size: 10pt}
}
@media screen {
 BODY {font-family: Helvetica}
}</pre>

<h3><a name="Managing">Gérer des feuilles de style CSS externes</a></h3>

<p>L'entrée de feuilles de style donne accès à une série de commandes qui
permettent de contrôler les feuilles de style CSS externes et celles qui
donnent les préférences de l'utilisateur :</p>
<ul>
  <li>La commande <strong>Ajouter</strong> permet de lier une nouvelle
    feuille de style CSS à un document courant. On peut cliquer directement
    sur la cible de la feuille de style si elle est déjà visualisée dans la
    fenêtre Amaya. Si ce n'est pas le cas, l'utilisateur devra cliquer dans
    le document courant pour avoir accès à une boîte de dialogue et taper
    l'URL de la cible de la feuille de style. Cette commande ajoute un
    élément lien avec ses attributs à la tête du document.</li>
  <li>La commande <strong>Ouvrir</strong> permet d'ouvrir une des feuilles de
    style CSS appliquées au document courant.</li>
  <li>La commande <strong>Désactiver</strong> permet de supprimer les effets
    d'une des feuilles de style actives du document courant. Cette commande
    n'affecte en rien le lien CSS dans le document.</li>
  <li>La commande <strong>Réactiver</strong> permet de rétablir les effets
    d'une des feuilles de style CSS désactivées du document courant. Cette
    commande n'affecte en rien le lien CSS dans le document.</li>
  <li>La commande <strong>Retirer</strong> permet de retirer une des feuilles
    de style CSS externes. Cette commande agit comme la commande Désactiver.
    En plus de cela, l'élément lien qui attache les feuilles de style CSS est
    supprimé.</li>
</ul>

<p>Les commandes Ouvrir, Désactiver et Réactiver peuvent être appliquées aux
feuilles de style qui donnent les préférences de l'utilisateur, mais les
commandes Ajouter et Retirer concernent uniquement les feuilles de style
reliées. La figure suivante montre la liste des feuilles de style CSS
proposées pour la commande Ouvrir. Si aucune feuille de style CSS n'est
actuellement appliquée à un document, une boîte de dialogue expliquera
"qu'aucun fichier CSS n'est disponible".</p>

<p><img alt="css.gif" src="../images/css.gif" /></p>

<p></p>

<h3>Visualiser le style appliqué</h3>

<p>S'il y a beaucoup de feuilles de style attachées à un document, il est
difficile de comprendre pourquoi un élément est visualisé avec cette couleur
ou ces marges, etc. Pour aider l'utilisateur, Amaya fournit une commande
<strong>Montrer le style appliqué</strong> qui visualise dans une fenêtre
externe les propriétés CSS appliquées au premier élément de la sélection
courante. L'utilisateur peut afficher le source CSS qui engendre chaque
propriété en double (ou simple) cliquant sur la propriété. Aussi longtemps
que la fenêtre est ouverte, Amaya met à jour le contenu de la fenêtre quand
la sélection change. En appuyant sur la touche <code>F2</code> (ou
<code>Esc</code> sur les plates-formes Linux), l'utilisateur peut voir les
propriétés CSS appliquées aux éléments englobants.</p>

<h3><a name="L1371">Mettre du style en utilisant des éléments HTML</a></h3>

<p>HTML fournit certains éléments de niveau de caractère qui permettent
d'associer du style aux chaînes de caractères. Deux entrées depuis le menu
<strong>Style</strong> permettent de manier ces éléments HTML.</p>

<h4>Créer des éléments de style HTML</h4>

<p>La commande<strong>Types information</strong> du menu
<strong>Xhtml</strong> présente un sous-menu offrant un choix d'éléments HTML
qui définissent des styles abstraits. Sélectionnez tout d'abord une chaîne de
caractères dans votre page et ensuite choisissez une commande dans ce menu.
La chaîne de caractères sélectionnée reçoit le style correspondant. Trois de
ces styles sont également disponibles par l'intermédiaire des boutons :
<em>emphasis</em> (<img src="../images/Em.gif" alt="Emphasis button" />),
<strong>strong</strong> (<img src="../images/Strong.gif" alt="Strong button"
/>) and <code>code</code> (<img src="../images/code.gif" alt="Code button"
/>).</p>

<p>La commande <strong>Éléments caractères</strong> du menu
<strong>Xhtml</strong> offre un autre menu changeant le style du texte. Les
premières entrées de ce menu peuvent être remplacées par CSS et ne devraient
pas être utilisées. Elles sont là uniquement pour se conformer à
l'implémentation de HTML 3.2.</p>

<h4>Supprimer le style</h4>

<p>Pour supprimer le style d'une chaîne de caractères, sélectionnez tout
d'abord la chaîne et appliquez de nouveau la commande qui a été utilisée pour
associer le style que vous voulez supprimer. Toutes les commandes des
sous-menus <strong>Types</strong> <strong>information</strong> et
<cite></cite><strong>Éléments caractères</strong> s'annulent si elles sont
appliquées de nouveau.</p>
</div>

<p><a href="Xml.html.fr#page_body"><img alt="previous"
src="../images/left.gif" /></a> <a href="Manual.html.fr"><img alt="top"
src="../images/up.gif" /></a> <a href="Searching.html.fr#Searching"><img
alt="next" src="../images/right.gif" /></a></p>
<hr />
</body>
</html>
