home *** CD-ROM | disk | FTP | other *** search
/ PC World 2005 May / PCWorld_2005-05_cd.bin / komunikace / amaya / amaya-WinXP-9.1.exe / doc / html / StyleSheets.html.fr < prev    next >
Extensible Markup Language  |  2005-02-21  |  11KB  |  232 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  5. <head>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.   <title>Les feuilles de style</title>
  8.   <meta name="GENERATOR" content="amaya 9.0.1, see http://www.w3.org/Amaya/"
  9.   />
  10.   <link href="style.css" rel="stylesheet" type="text/css" />
  11. </head>
  12.  
  13. <body xml:lang="fr" lang="fr">
  14.  
  15. <table border="0" summary="toc">
  16.   <tbody>
  17.     <tr>
  18.       <td><p><img alt="W3C" src="../images/w3c_home" /> <img alt="Amaya"
  19.         src="../images/amaya.gif" /></p>
  20.       </td>
  21.       <td><p><a href="Xml.html.fr#page_body" accesskey="p"><img
  22.         alt="previous" src="../images/left.gif" /></a> <a
  23.         href="Manual.html.fr" accesskey="t"><img alt="top"
  24.         src="../images/up.gif" /></a> <a href="Searching.html.fr#Searching"
  25.         accesskey="n"><img alt="next" src="../images/right.gif" /></a></p>
  26.       </td>
  27.     </tr>
  28.   </tbody>
  29. </table>
  30.  
  31. <div id="Style">
  32. <h2><a name="L1023">Les feuilles de style</a></h2>
  33.  
  34. <p>Le menu <strong>Style</strong> vous permet de changer l'apparence de vos
  35. documents de deux faτons diffΘrentes :</p>
  36. <ul>
  37.   <li>en utilisant les cascades des feuilles de style (CSS).</li>
  38.   <li>en utilisant les ΘlΘments et les attributs HTML.</li>
  39. </ul>
  40.  
  41. <p>Les entrΘes du menu <strong>Style</strong> sont consacrΘes α la crΘation
  42. et la gestion des propriΘtΘs et des feuilles de style CSS.</p>
  43.  
  44. <h3><a name="Creating">CrΘer et mettre α jour un attribut de style</a></h3>
  45.  
  46. <p>Chacune des quatre entrΘes du menu <strong>Style</strong> appelle une
  47. boεte de dialogue qui permet l'association d'un attribut de
  48. <code>style</code> aux ΘlΘments courants sΘlectionnΘs
  49. :<strong></strong><strong></strong></p>
  50. <ul>
  51.   <li>L'option <strong>Style de caractΦres</strong> permet de choisir la
  52.     police de caractΦre, le style du caractΦre, la taille du corps et le
  53.     style soulignΘ.</li>
  54.   <li><strong><span style="font-weight: normal">L'option</span>
  55.     Couleurs</strong> permet de choisir les couleurs du premier plan et de
  56.     l'arriΦre plan dans la palette. Cliquez sur une cellule de la palette
  57.     avec le bouton gauche de la souris pour attribuer la couleur du premier
  58.     plan, cliquez sur le bouton du milieu pour attribuer la couleur de
  59.     l'arriΦre plan.</li>
  60.   <li>L'option <strong>Format</strong> permet de choisir l'alignement, le
  61.     renfoncement, la justification et l'interligne.</li>
  62.   <li>L'option <strong>Image de fond</strong> permet de choisir une image de
  63.     fond et son mode de rΘpΘtition.</li>
  64. </ul>
  65.  
  66. <p>Dans toutes ces boεtes de dialogue, les boutons <strong>DΘfaut</strong>
  67. permettent de supprimer l'information de style correspondant pour les
  68. ΘlΘments sΘlectionnΘs.</p>
  69.  
  70. <p>Toutes les modifications faites avec ces boεtes de dialogue peuvent Ωtre
  71. vues immΘdiatement dans la vue formatΘe et Θgalement dans la vue
  72. structure.</p>
  73.  
  74. <h3><a name="Creating,">CrΘer un style gΘnΘrique pour un ΘlΘment ou une
  75. classe</a></h3>
  76.  
  77. <p>Quand un attribut <code>style</code> a ΘtΘ associΘ α un ΘlΘment, vous
  78. pouvez utiliser cet ΘlΘment comme un modΦle pour crΘer ou modifier une rΦgle
  79. de styleá:</p>
  80. <ul>
  81.   <li>SΘlectionnez cet ΘlΘment (vous devez sΘlectionner un seul ΘlΘment et
  82.     cet ΘlΘment doit avoir un attribut <code>style</code>)</li>
  83.   <li>Choisissez <strong>CrΘer une rΦgle</strong> depuis le menu
  84.     <strong>Style</strong>. Une boεte de dialogue surgit et visualise une
  85.     liste de sΘlecteurs CSS. Cette liste inclus toutes les classes qui sont
  86.     dΘfinies pour le document courant (y compris les classes dΘfinies par les
  87.     feuilles de style liΘes au document), ainsi que les types d'ΘlΘment
  88.     auquel le style est associΘ.</li>
  89.   <li>Choisissez un sΘlecteur dans cette liste ou entrez un nouveau nom de
  90.     classe et cliquer sur le bouton <strong>Confirmer</strong>. Le style de
  91.     l'ΘlΘment sΘlectionnΘ est dΘsormais associΘ au sΘlecteur choisi et
  92.     l'attribut <code>style</code> est supprimΘ pour l'ΘlΘment sΘlectionnΘ.
  93.     Son contenu est dΘplacΘ α l'ΘlΘment <code>STYLE</code>, dans le
  94.     <code>HEAD</code> document, et tous les ΘlΘments correspondant au
  95.     sΘlecteur sont visualisΘs dans le nouveau style.</li>
  96. </ul>
  97.  
  98. <p>Quand vous avez crΘΘ de nouvelles classes avec la commande <strong>CrΘer
  99. une rΦgle</strong>, vous pouvez associer ces classes α certains ΘlΘments dans
  100. le documentá:</p>
  101. <ul>
  102.   <li>Choisissez <strong>Appliquer une classe</strong> depuis le menu
  103.     <strong>Style</strong>. Une boεte de dialogue surgit, affichant toutes
  104.     les classes existantes. Choisissez une de ces classes. Les ΘlΘments
  105.     sΘlectionnΘs sont dΘsormais visualisΘs avec le style associΘ α la classe
  106.     choisie.</li>
  107. </ul>
  108.  
  109. <p>Pour associer une classe α un ΘlΘment, vous pouvez Θgalement utiliser le
  110. <a href="Attributes.html.fr#L1073">menu <strong>Attributs</strong></a>. Ce
  111. menu permet aussi d'effacer un attribut de classe pour un ΘlΘment ou de le
  112. changer : l'attribut de classe se manipule comme un autre attribut.</p>
  113.  
  114. <h3><a name="feuilles">Les feuilles de style CSS externes et les feuilles de
  115. style CSS utilisateur</a></h3>
  116.  
  117. <p>Un document peut associer plusieurs feuilles de style externes qui sont
  118. chargΘes avec le document et lui sont appliquΘes. Une feuille de style
  119. externe peut s'appliquer α plusieurs documents. Quand la mΩme feuille de
  120. style s'applique α plusieurs documents affichΘs, Amaya ne charge qu'une seule
  121. instance de la feuille de style.</p>
  122.  
  123. <p>L'utilisateur peut dΘfinir une feuille de style spΘcifique qui s'applique
  124. α tous les documents chargΘs. Cette feuille de style est appelΘe
  125. <strong>Feuille de Style Utilisateur</strong> et est le fichier local
  126. <strong>amaya.css</strong> conservΘ dans l'environnement de l'utilisateur (le
  127. <a href="Configure.html.fr#AmayaHome">rΘpertoire d'AmayaHome</a>). Par
  128. exemple si vous prΘfΘrez afficher les document en Helvetica et imprimer avec
  129. une police de caractΦres de petite taille, vous pouvez crΘer votre feuille de
  130. style utilisateur avec les rΦgles CSS suivantesá:</p>
  131. <pre>@media print {
  132.  BODY {font-size: 10pt}
  133. }
  134. @media screen {
  135.  BODY {font-family: Helvetica}
  136. }</pre>
  137.  
  138. <h3><a name="Managing">GΘrer des feuilles de style CSS externes</a></h3>
  139.  
  140. <p>L'entrΘe de feuilles de style donne accΦs α une sΘrie de commandes qui
  141. permettent de contr⌠ler les feuilles de style CSS externes et celles qui
  142. donnent les prΘfΘrences de l'utilisateur :</p>
  143. <ul>
  144.   <li>La commande <strong>Ajouter</strong> permet de lier une nouvelle
  145.     feuille de style CSS α un document courant. On peut cliquer directement
  146.     sur la cible de la feuille de style si elle est dΘjα visualisΘe dans la
  147.     fenΩtre Amaya. Si ce n'est pas le cas, l'utilisateur devra cliquer dans
  148.     le document courant pour avoir accΦs α une boεte de dialogue et taper
  149.     l'URL de la cible de la feuille de style. Cette commande ajoute un
  150.     ΘlΘment lien avec ses attributs α la tΩte du document.</li>
  151.   <li>La commande <strong>Ouvrir</strong> permet d'ouvrir une des feuilles de
  152.     style CSS appliquΘes au document courant.</li>
  153.   <li>La commande <strong>DΘsactiver</strong> permet de supprimer les effets
  154.     d'une des feuilles de style actives du document courant. Cette commande
  155.     n'affecte en rien le lien CSS dans le document.</li>
  156.   <li>La commande <strong>RΘactiver</strong> permet de rΘtablir les effets
  157.     d'une des feuilles de style CSS dΘsactivΘes du document courant. Cette
  158.     commande n'affecte en rien le lien CSS dans le document.</li>
  159.   <li>La commande <strong>Retirer</strong> permet de retirer une des feuilles
  160.     de style CSS externes. Cette commande agit comme la commande DΘsactiver.
  161.     En plus de cela, l'ΘlΘment lien qui attache les feuilles de style CSS est
  162.     supprimΘ.</li>
  163. </ul>
  164.  
  165. <p>Les commandes Ouvrir, DΘsactiver et RΘactiver peuvent Ωtre appliquΘes aux
  166. feuilles de style qui donnent les prΘfΘrences de l'utilisateur, mais les
  167. commandes Ajouter et Retirer concernent uniquement les feuilles de style
  168. reliΘes. La figure suivante montre la liste des feuilles de style CSS
  169. proposΘes pour la commande Ouvrir. Si aucune feuille de style CSS n'est
  170. actuellement appliquΘe α un document, une boεte de dialogue expliquera
  171. "qu'aucun fichier CSS n'est disponible".</p>
  172.  
  173. <p><img alt="css.gif" src="../images/css.gif" /></p>
  174.  
  175. <p></p>
  176.  
  177. <h3>Visualiser le style appliquΘ</h3>
  178.  
  179. <p>S'il y a beaucoup de feuilles de style attachΘes α un document, il est
  180. difficile de comprendre pourquoi un ΘlΘment est visualisΘ avec cette couleur
  181. ou ces marges, etc. Pour aider l'utilisateur, Amaya fournit une commande
  182. <strong>Montrer le style appliquΘ</strong> qui visualise dans une fenΩtre
  183. externe les propriΘtΘs CSS appliquΘes au premier ΘlΘment de la sΘlection
  184. courante. L'utilisateur peut afficher le source CSS qui engendre chaque
  185. propriΘtΘ en double (ou simple) cliquant sur la propriΘtΘ. Aussi longtemps
  186. que la fenΩtre est ouverte, Amaya met α jour le contenu de la fenΩtre quand
  187. la sΘlection change. En appuyant sur la touche <code>F2</code>, l'utilisateur
  188. peut voir les propriΘtΘs CSS appliquΘes aux ΘlΘments englobants.</p>
  189.  
  190. <h3><a name="L1371">Mettre du style en utilisant des ΘlΘments HTML</a></h3>
  191.  
  192. <p>HTML fournit certains ΘlΘments de niveau de caractΦre qui permettent
  193. d'associer du style aux chaεnes de caractΦres. Deux entrΘes depuis le menu
  194. <strong>XHTML</strong> permettent de manier ces ΘlΘments HTML.</p>
  195.  
  196. <h4>CrΘer des ΘlΘments de style HTML</h4>
  197.  
  198. <p>La commande<strong>Types information</strong> du menu
  199. <strong>Xhtml</strong> prΘsente un sous-menu offrant un choix d'ΘlΘments HTML
  200. qui dΘfinissent des styles abstraits. SΘlectionnez tout d'abord une chaεne de
  201. caractΦres dans votre page et ensuite choisissez une commande dans ce menu.
  202. La chaεne de caractΦres sΘlectionnΘe reτoit le style correspondant. Trois de
  203. ces styles sont Θgalement disponibles par l'intermΘdiaire des boutons :
  204. <em>emphasis</em> (<img src="../images/Em.gif" alt="Emphasis button" />),
  205. <strong>strong</strong> (<img src="../images/Strong.gif" alt="Strong button"
  206. />) and <code>code</code> (<img src="../images/code.gif" alt="Code button"
  207. />).</p>
  208.  
  209. <p>La commande <strong>╔lΘments caractΦres</strong> du menu
  210. <strong>Xhtml</strong> offre un autre menu changeant le style du texte. Les
  211. premiΦres entrΘes de ce menu peuvent Ωtre remplacΘes par CSS et ne devraient
  212. pas Ωtre utilisΘes. Elles sont lα uniquement pour se conformer α
  213. l'implΘmentation de HTML 3.2.</p>
  214.  
  215. <h4>Supprimer le style</h4>
  216.  
  217. <p>Pour supprimer le style d'une chaεne de caractΦres, sΘlectionnez tout
  218. d'abord la chaεne et appliquez de nouveau la commande qui a ΘtΘ utilisΘe pour
  219. associer le style que vous voulez supprimer. Toutes les commandes des
  220. sous-menus <strong>Types</strong> <strong>information</strong> et
  221. <cite></cite><strong>╔lΘments caractΦres</strong> s'annulent si elles sont
  222. appliquΘes de nouveau.</p>
  223. </div>
  224.  
  225. <p><a href="Xml.html.fr#page_body"><img alt="previous"
  226. src="../images/left.gif" /></a> <a href="Manual.html.fr"><img alt="top"
  227. src="../images/up.gif" /></a> <a href="Searching.html.fr#Searching"><img
  228. alt="next" src="../images/right.gif" /></a></p>
  229. <hr />
  230. </body>
  231. </html>
  232.