<?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 9.4, see http://www.w3.org/Amaya/" />
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link />
</head>

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

<div>
<img alt="Amaya" src="../../resources/icons/22x22/logo.png" class="logo" />

<p class="nav"><a href="Xml.html.fr" accesskey="p"><img alt="previous"
src="../../resources/icons/misc/left.png" /></a> <a href="Manual.html.fr"
accesskey="t"><img alt="top" src="../../resources/icons/misc/up.png" /></a>
<a href="Searching.html.fr" accesskey="n"><img alt="next"
src="../../resources/icons/misc/right.png" /></a></p>
</div>

<div class="toc">
<ul>
  <li><a href="#L2881">Créer des propriétés CSS</a></li>
  <li><a href="#L288">Créer et mettre à jour un attribut de style avec les
    outils</a>
    <ul>
      <li><a href="#Couleurs">Couleurs</a></li>
      <li><a href="#Caract">Caractères</a></li>
      <li><a href="#Format">Format</a></li>
    </ul>
  </li>
  <li><a href="#feuilles1">Les feuilles de style CSS externes et
    utilisateur</a>
    <ul>
      <li><a href="#L90">Gérer des feuilles de style CSS externes</a></li>
    </ul>
  </li>
  <li><a href="#Visualiser">Visualiser le style appliqué</a></li>
  <li><a href="#Associer">Associer une classe à un élément</a></li>
  <li><a href="#L554">Créer un style générique pour un élément ou une
    classe</a></li>
  <li><a href="#L613">Créer des éléments de style HTML</a>
    <ul>
      <li><a href="#Types">Types information</a></li>
      <li><a href="#L895">Eléments caractères</a></li>
      <li><a href="#Supprimer">Supprimer un élément style</a></li>
    </ul>
  </li>
</ul>
</div>

<div id="Style">
<h2 id="Cascades"><a name="L1023" id="L1023">Cascades des feuilles de style
(CSS)</a></h2>

<p>Le menu <strong>Style</strong> vous permet de changer l'apparence de vos
documents en utilisant les cascades des feuilles de style (CSS).</p>

<h3 id="L2881">Créer des propriétés CSS</h3>

<p>L'entrée <strong>Style CSS</strong> du menu <strong>Style</strong> permet
d'engendrer une liste de propriétés CSS. Cette entrée de menu affiche une
boite de dialogue avec 4 différents onglets: Caractères, Couleurs, Boites,
Format.</p>

<p>Quand l'utilisateur a positionne un ensemble de propriétés, il peut
<strong>appliquer</strong> ces propriétés à la sélection courante :</p>
<ul>
  <li>Si la sélection se trouve dans une vue formatée, Amaya engendrera des
    éléments span avec un attribut style ou un attribut style sur l'élément
    courant, ou bien une simple mise à jour de l'attribut style existant.</li>
  <li>Si la sélection se trouve dans une vue source ou dans un fichier CSS,
    Amaya engendrera une chaîne de caractères à la position courante.</li>
</ul>

<p>Dans tous les cas, les adresses des images incluses dans la liste des
propriétés (background-image, list-style-image) seront transformées en
adresses relatives au document sélectionné.</p>

<h3 id="L288">Créer et mettre à jour un attribut de style avec les outils</h3>

<p>Amaya fournit aussi des outils qui vous permettent d'associer un attribut
style aux éléments sélectionnés :</p>

<h4 id="Couleurs">Couleurs</h4>

<p>L'outil <strong>Couleurs</strong> permet de choisir les couleurs de
premier plan et d'arrière plan dans une palette. Quand l'outil
<strong>Couleurs</strong> est ouvert :</p>

<p><ul>
  <li>Un bouton <img alt="default"
    src="../../resources/icons/16x16/default.png" /> (valeur par défaut) ou
    un rectangle de couleur visualise la couleur du premier plan.</li>
  <li>Un autre bouton <img alt="default"
    src="../../resources/icons/16x16/default.png" /> (valeur par défaut) ou
    un rectangle de couleur visualise la couleur d'arrière plan.</li>
  <li>Un bouton <img alt="switch"
    src="../../resources/icons/misc/switch_colors.png" /> permet d'inverser
    les couleurs du premier plan et d'arrière plan.</li>
  <li>Un bouton <img alt="Default_color"
    src="../../resources/icons/misc/black_white.png" /> permet de restaurer
    les couleurs par défaut (valeurs par défaut).</li>
  <li>Un bouton <img alt="Refresh"
    src="../../resources/icons/16x16/refresh.png" /> permet d'initialiser les
    couleurs du premier plan et d'arrière plan à partir de la sélection
    courante.</li>
  <li>Un bouton <img alt="ok" src="../../resources/icons/16x16/ok.png" />
    permet d'appliquer les couleurs du premier plan et d'arrière plan à la
    sélection courante.</li>
</ul>
</p>

<p>Pour choisir une nouvelle couleur de premier plan ou d'arrière plan, il
faut cliquer sur le bouton correspondant. Une palette permet alors de choisir
librement une couleur.</p>

<p>La valeur par défaut vous permet de retirer l'information de style
correspondante pour l'élément sélectionné. Les couleurs choisies ne sont pas
immédiatement appliquées à la sélection. Le bouton appliquer doit être
cliqué.</p>

<p class="Note"><strong>Note</strong> : Il est important de choisir des
couleurs de premier plan ou d'arrière plan suffisamment contrastées.</p>

<h4 id="Caract">Caractères</h4>

<p>L'outil <strong>Caractères</strong> permet de choisir la police de
caractère, le style du caractère, la taille du corps et le style souligné.</p>
<ul>
  <li>Un sélecteur <strong>Police</strong> fournit une liste limitée de
    polices de caractères. Un bouton <img alt="ok"
    src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
    cette valeur à la sélection courante.</li>
  <li>Un sélecteur <strong>Souligné</strong> fournit la liste des valeurs
    possibles. Un bouton <img alt="ok"
    src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
    cette valeur à la sélection courante.</li>
  <li>Un sélecteur <strong>Corps</strong> fournit une liste limitée de corps
    exprimés en points. Un bouton <img alt="ok"
    src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
    cette valeur à la sélection courante.</li>
  <li>Un sélecteur <strong>Style des caractères</strong> fournit une liste
    limitée de styles possibles. Un bouton <img alt="ok"
    src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
    cette valeur à la sélection courante.</li>
  <li>Un sélecteur <strong>Graisse</strong> fournit une liste limitée de
    graisses possibles. Un bouton <img alt="ok"
    src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
    cette valeur à la sélection courante.</li>
  <li>Un bouton <img alt="Refresh"
    src="../../resources/icons/16x16/refresh.png" /> permet d'initialiser les
    valeurs à partir de la sélection courante.</li>
  <li>Un bouton <img alt="ok" src="../../resources/icons/16x16/ok.png" />
    permet d'appliquer toutes les valeurs à la sélection courante.</li>
</ul>

<p>La valeur par défaut vous permet de retirer l'information de style
correspondante pour l'élément sélectionné. Les valeurs choisies ne sont pas
immédiatement appliquées à la sélection. Le bouton appliquer doit être
cliqué.</p>

<h4 id="Format">Format</h4>

<p>L'outil <strong>Format</strong> permet de choisir l'alignement, le
renfoncement, la justification et l'interligne.</p>
<ul>
  <li>Un sélecteur d'alignement : cliquez à gauche (<img alt="left"
    src="../../resources/icons/16x16/format_left.png" />), à droite ( <img
    alt="right" src="../../resources/icons/16x16/format_right.png" />),
    centré ( <img alt="center"
    src="../../resources/icons/16x16/format_center.png" />), justifié ( <img
    alt="justify" src="../../resources/icons/16x16/format_justify.png" />),
    ou <img alt="default" src="../../resources/icons/16x16/default.png" />
    pour choisir la valeur par défaut.</li>
  <li>Un sélecteur de <strong>Renfoncement</strong> permettant de saisir la
    valeur en point. Cliquez sur le bouton <img alt="default"
    src="../../resources/icons/16x16/default.png" /> pour choisir la valeur
    par défaut.</li>
  <li>Un sélecteur d'<strong>Interligne</strong> permettant de saisir la
    valeur en point. Cliquez sur le bouton <img alt="default"
    src="../../resources/icons/16x16/default.png" /> pour choisir la valeur
    par défaut.</li>
  <li>Un bouton <img alt="Refresh"
    src="../../resources/icons/16x16/refresh.png" /> permet d'initialiser les
    valeurs à partir de la sélection courante.</li>
  <li>Un bouton <img alt="ok" src="../../resources/icons/16x16/ok.png" />
    permet d'appliquer les valeurs à la sélection courante.</li>
</ul>

<p>La valeur par défaut vous permet de retirer l'information de style
correspondante pour l'élément sélectionné. Les valeurs choisies ne sont pas
immédiatement appliquées à la sélection. Le bouton appliquer doit être
cliqué.</p>

<h3 id="feuilles1"><a name="feuilles">Les feuilles de style CSS externes et
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.</p>

<p>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>. c'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>).</p>

<p>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 :</p>
<pre>@media print {
 body {font-size: 10pt}
}
@media screen {
 body {font-family: Helvetica}
}</pre>

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

<p>Le menu <strong>Style</strong> donne accès à une série de commandes qui
permettent de contrôler les feuilles de style CSS externes et de
l'utilisateur :</p>
<ul>
  <li>La commande <strong>Ajouter</strong> permet de lier une nouvelle
    feuille de style CSS à un document courant.
    <p>Cette commande fait apparaître une boîte de dialogue :</p>
    <ul>
      <li>Si la feuille CSS cible est visualisée dans une autre fenêtre
        d'Amaya , cliquez sur le bouton <strong>Clic</strong> puis n'importe
        où dans la feuille CSS cible. Le lien est créé.</li>
      <li>Si la feuille CSS cible est visualisée dans un autre onglet ,
        cliquez sur le bouton <strong>Clic</strong> puis changez d'onglet et
        cliquez n'importe où dans la feuille CSS cible. Le lien est créé.</li>
      <li>Si la feuille CSS cible est locale vous pouvez utiliser le bouton
        <strong>Butiner</strong> pour la sélectionner.</li>
      <li>Sinon entrez l'URI (comme http://www.w3.org/file.css) la feuille
        CSS cible et taper sur la touche <strong>Enter ou Return</strong>
        pour confirmer. Le lien est créé.</li>
    </ul>
    <p></p>
  </li>
  <li>La commande <strong>Ouvrir</strong> permet d'ouvrir une des feuilles de
    style CSS appliquées au document courant.
    <p></p>
  </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.
    <p></p>
  </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.
    <p></p>
  </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 <strong>Ouvrir</strong>, <strong>Désactiver</strong> et
<strong>Réactiver</strong> peuvent être appliquées à la feuille de style de
l'utilisateur, mais les commandes <strong>Ajouter</strong> et
<strong>Retirer</strong> concernent uniquement les feuilles de style
externes.</p>

<h3 id="Visualiser">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.</p>

<p>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>, l'utilisateur peut ainsi
voir les propriétés CSS appliquées aux éléments englobants.</p>

<h3 id="Associer">Associer une classe à un élément</h3>

<p>Toutes les classes disponibles pour un document sont listées dans l'outil
<strong>Appliquer classe</strong>.</p>

<p class="ProcedureCaption">Pour appliquer une classe à un élément :</p>
<ol>
  <li>Choisissez la bonne entrée dans l'outil <strong>Appliquer
    classe</strong>.</li>
  <li>Si vous voulez sélectionner la classe appliquée à un autre élément,
    vous devez sélectionner cet élément, puis cliquer sur le bouton <img
    alt="Refresh" src="../../resources/icons/16x16/refresh.png" />. La liste
    d'<strong>Appliquer classe</strong> est mise à jour et la classe
    appliquée est sélectionnée.</li>
  <li>Sélectionnez un fragment de texte ou un élément.<br />
    Pour sélectionner un élément, vous devez cliquer dans l'élément, puis
    utiliser la touche F2 jusqu'à ce que la ligne en bas de la fenêtre
    affiche son type en première position.</li>
  <li>Cliquer sur le bouton <img alt="ok"
    src="../../resources/icons/16x16/ok.png" /> pour appliquer la classe à la
    sélection courante.<br />
    Si un fragment de texte est sélectionné, Amaya engendrera un élément
    <strong>span</strong> pour englober le texte courant et l'attribut
    <strong>class</strong> sera attaché à ce nouvel élément
    <strong>span</strong>.</li>
</ol>

<p>Pour associer une classe ( attribut <strong>class</strong>) à un élément,
vous pouvez également utiliser l'outil <a
href="Attributes.html.fr#L1073"><strong>Attributs</strong></a>. Cet outil
Attributs permet aussi de retirer l'attribut <strong>class</strong> d'un
élément ou de le modifier (l'attribut <strong>class</strong> se manipule
comme un autre attribut).</p>

<p class="ProcedureCaption">Pour retirer la classe d'un élément :</p>
<ul>
  <li>Vous pouvez éditer l'attribut <strong>class</strong> dans l'outils
    <strong>Attributs</strong>.
    <p>Quand l'élément est sélectionné, vous cliquez sur le [X] de l'entrée
    pour supprimer l'attribut <strong>class</strong>, ou vous cliquez sur
    l'entrée et éditez sa valeur puis confirmez avec le bouton appliquer
    (<img alt="ok" src="../../resources/icons/16x16/ok.png" />).</p>
  </li>
  <li>Vous pouvez aussi retirer ou éditer l'attribut <strong>class</strong>
    dans la vue structure.
    <p>Pour retirer l'attribut <strong>class</strong>, vous cliquez dans la
    valeur, <code>F2</code> pour sélectionner la valeur entière, puis deux
    <code>Delete</code> pour détruire l'attribut.</p>
  </li>
</ul>

<h3 id="L554">Créer un style générique pour un élément ou une classe</h3>

<p>Quand un attribut <strong>style</strong> 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 en utilisant la commande <strong>Créer une règle</strong>.</p>

<p class="ProcedureCaption">Pour créer un style générique pour un élément ou
une classe :</p>
<ol>
  <li>Sélectionnez l'élément que vous désirez utiliser comme modèle. Par
    défaut la sélection est mise sur la chaîne de caractères, et vous devez
    utiliser la touche F2 pour sélectionner l''élément englobant.
    <p class="Note"><strong>Note</strong> : Vous devez sélectionner un seul
    élément et cet élément doit avoir un attribut <code>style</code>.</p>
    <p></p>
  </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 le type de l'élément
    auquel le style est associé.
    <p></p>
  </li>
  <li>Choisissez un sélecteur dans cette liste ou entrez un nouveau nom de
    classe et cliquer sur le bouton <strong>Confirmer</strong>.
    <p>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.</p>
  </li>
</ol>

<p>Quand vous avez créé une nouvelles classes avec la commande <strong>Créer
une règle</strong>, cette classe est automatiquement ajoutée à la liste de
l'outil <strong>Appliquer une classe</strong>.</p>

<h3 id="L613"><a name="L1371" id="L1371">Créer des éléments de style
HTML</a></h3>

<p>HTML définit 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>XHTML</strong> permettent de manier ces éléments HTML.</p>

<h4 id="Types">Types information</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.</p>

<p class="ProcedureCaption">Pour appliquer un des Eléments caractères :</p>
<ol>
  <li>Sélectionnez tout d'abord une chaîne de caractères dans votre page.</li>
  <li>Choisissez une commande dans ce menu <strong>Types information</strong>.
    <p>La chaîne de caractères sélectionnée reçoit le style correspondant.</p>
  </li>
</ol>

<p>Trois de ces styles sont également disponibles dans l'outil XHTML :
<em>emphasis</em> (<img src="../../resources/icons/16x16/XHTML_I.png"
alt="Emphasis button" />), <strong>strong</strong> (<img
src="../../resources/icons/16x16/XHTML_B.png" alt="Strong button" />) and
<code>code</code> (<img src="../../resources/icons/16x16/XHTML_T.png"
alt="Code button" />).</p>

<h4 id="L895">Eléments caractères</h4>

<p>La commande <strong>Éléments caractères</strong> du menu
<strong>XHTML</strong> offre un autre menu changeant le style du texte.</p>

<p class="ProcedureCaption">Pour appliquer un des Eléments caractères :</p>
<ol>
  <li>Sélectionnez tout d'abord une chaîne de caractères dans votre page.</li>
  <li>Choisissez une commande dans ce menu <strong>Eléments
    caractères</strong>.
    <p>La chaîne de caractères sélectionnée reçoit le style correspondant.</p>
  </li>
</ol>

<h4 id="Supprimer">Supprimer un élément style</h4>

<p>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>

<p class="ProcedureCaption">Pour supprimer un élément style :</p>
<ol>
  <li>Sélectionnez l'élément que vous voulez supprimer.</li>
  <li>Appliquez de nouveau la commande du sous-menu <strong>Types
    information</strong> ou <strong>Eléments caractères</strong> du
    menu<strong>XHTML</strong>, ou dans l'outil XHTML : <em>emphasis</em>
    (<img src="../../resources/icons/16x16/XHTML_I.png" alt="Emphasis button"
    />), <strong>strong</strong> (<img
    src="../../resources/icons/16x16/XHTML_B.png" alt="Strong button" />) and
    <code>code</code> (<img src="../../resources/icons/16x16/XHTML_T.png"
    alt="Code button" />).</li>
</ol>
</div>
</body>
</html>
