home *** CD-ROM | disk | FTP | other *** search
/ PC World 2005 May / PCWorld_2005-05_cd.bin / komunikace / amaya / amaya-WinXP-9.1.exe / doc / WX / StyleSheets.html.fr < prev    next >
Extensible Markup Language  |  2005-02-23  |  22KB  |  484 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.1, see http://www.w3.org/Amaya/" />
  9.   <link href="style.css" rel="stylesheet" type="text/css" />
  10.   <link />
  11. </head>
  12.  
  13. <body xml:lang="fr" lang="fr">
  14.  
  15. <div>
  16. <img alt="Amaya" src="../../resources/icons/22x22/logo.png" class="logo" />
  17.  
  18. <p class="nav"><a href="Xml.html.fr" accesskey="p"><img alt="previous"
  19. src="../../resources/icons/misc/left.png" /></a> <a href="Manual.html.fr"
  20. accesskey="t"><img alt="top" src="../../resources/icons/misc/up.png" /></a>
  21. <a href="Searching.html.fr" accesskey="n"><img alt="next"
  22. src="../../resources/icons/misc/right.png" /></a></p>
  23. </div>
  24.  
  25. <div class="toc">
  26. <ul>
  27.   <li><a href="#Cascades">Cascades des feuilles de style (CSS)</a>
  28.     <ul>
  29.       <li><a href="#feuilles1">Les feuilles de style CSS externes et
  30.         utilisateur</a>
  31.         <ul>
  32.           <li><a href="#L90">GΘrer des feuilles de style CSS externes</a></li>
  33.           <li><a href="#L2881">CrΘer et mettre α jour certaines propriΘtΘs
  34.             CSS</a></li>
  35.         </ul>
  36.       </li>
  37.       <li><a href="#Visualiser">Visualiser le style appliquΘ</a></li>
  38.       <li><a href="#Associer">Associer une classe α un ΘlΘment</a></li>
  39.       <li><a href="#L288">CrΘer et mettre α jour un attribut de style</a>
  40.         <ul>
  41.           <li><a href="#Couleurs">Couleurs</a></li>
  42.           <li><a href="#Caract">CaractΦres</a></li>
  43.           <li><a href="#Format">Format</a></li>
  44.           <li><a href="#Image">Image de fond</a></li>
  45.           <li><a href="#L554">CrΘer un style gΘnΘrique pour un ΘlΘment ou une
  46.             classe</a></li>
  47.         </ul>
  48.       </li>
  49.       <li><a href="#L613">CrΘer des ΘlΘments de style HTML</a>
  50.         <ul>
  51.           <li><a href="#Types">Types information</a></li>
  52.           <li><a href="#L895">ElΘments caractΦres</a></li>
  53.           <li><a href="#Supprimer">Supprimer un ΘlΘment style</a></li>
  54.         </ul>
  55.       </li>
  56.     </ul>
  57.   </li>
  58. </ul>
  59. </div>
  60.  
  61. <div id="Style">
  62. <h2 id="Cascades"><a name="L1023" id="L1023">Cascades des feuilles de style
  63. (CSS)</a></h2>
  64.  
  65. <p>Le menu <strong>Style</strong> vous permet de changer l'apparence de vos
  66. documents en utilisant les cascades des feuilles de style (CSS).</p>
  67.  
  68. <h3 id="feuilles1"><a name="feuilles">Les feuilles de style CSS externes et
  69. utilisateur</a></h3>
  70.  
  71. <p>Un document peut associer plusieurs feuilles de style externes qui sont
  72. chargΘes avec le document et lui sont appliquΘes.</p>
  73.  
  74. <p>Une feuille de style externe peut s'appliquer α plusieurs documents. Quand
  75. la mΩme feuille de style s'applique α plusieurs documents affichΘs, Amaya ne
  76. charge qu'une seule instance de la feuille de style.</p>
  77.  
  78. <p>L'utilisateur peut dΘfinir une feuille de style spΘcifique qui s'applique
  79. α tous les documents chargΘs. Cette feuille de style est appelΘe
  80. <strong>Feuille de Style Utilisateur</strong>. c'est le fichier local
  81. <strong>amaya.css</strong> conservΘ dans l'environnement de l'utilisateur (le
  82. <a href="Configure.html.fr#AmayaHome">rΘpertoire d'AmayaHome</a>).</p>
  83.  
  84. <p>Par exemple si vous prΘfΘrez afficher les document en Helvetica et
  85. imprimer avec une police de caractΦres de petite taille, vous pouvez crΘer
  86. votre feuille de style utilisateur avec les rΦgles CSS suivantesá:</p>
  87. <pre>@media print {
  88.  body {font-size: 10pt}
  89. }
  90. @media screen {
  91.  body {font-family: Helvetica}
  92. }</pre>
  93.  
  94. <h4 id="L90"><a name="Managing">GΘrer des feuilles de style CSS
  95. externes</a></h4>
  96.  
  97. <p>Le menu <strong>Style</strong> donne accΦs α une sΘrie de commandes qui
  98. permettent de contr⌠ler les feuilles de style CSS externes et de
  99. l'utilisateur :</p>
  100. <ul>
  101.   <li>La commande <strong>Ajouter</strong> permet de lier une nouvelle
  102.     feuille de style CSS α un document courant.
  103.     <p>Cette commande fait apparaεtre une boεte de dialogueá:</p>
  104.     <ul>
  105.       <li>Si la feuille CSS cible est visualisΘe dans une autre fenΩtre
  106.         d'Amaya , cliquez sur le bouton <strong>Clic</strong> puis n'importe
  107.         o∙ dans la feuille CSS cible. Le lien est crΘΘ.</li>
  108.       <li>Si la feuille CSS cible est visualisΘe dans un autre onglet ,
  109.         cliquez sur le bouton <strong>Clic</strong> puis changez d'onglet et
  110.         cliquez n'importe o∙ dans la feuille CSS cible. Le lien est crΘΘ.</li>
  111.       <li>Si la feuille CSS cible est locale vous pouvez utiliser le bouton
  112.         <strong>Butiner</strong> pour la sΘlectionner.</li>
  113.       <li>Sinon entrez l'URI (comme http://www.w3.org/file.css) la feuille
  114.         CSS cible et taper sur la touche <strong>Enter ou Return</strong>
  115.         pour confirmer. Le lien est crΘΘ.</li>
  116.     </ul>
  117.     <p></p>
  118.   </li>
  119.   <li>La commande <strong>Ouvrir</strong> permet d'ouvrir une des feuilles de
  120.     style CSS appliquΘes au document courant.
  121.     <p></p>
  122.   </li>
  123.   <li>La commande <strong>DΘsactiver</strong> permet de supprimer les effets
  124.     d'une des feuilles de style actives du document courant. Cette commande
  125.     n'affecte en rien le lien CSS dans le document.
  126.     <p></p>
  127.   </li>
  128.   <li>La commande <strong>RΘactiver</strong> permet de rΘtablir les effets
  129.     d'une des feuilles de style CSS dΘsactivΘes du document courant. Cette
  130.     commande n'affecte en rien le lien CSS dans le document.
  131.     <p></p>
  132.   </li>
  133.   <li>La commande <strong>Retirer</strong> permet de retirer une des feuilles
  134.     de style CSS externes. Cette commande agit comme la commande DΘsactiver.
  135.     En plus de cela, l'ΘlΘment lien qui attache les feuilles de style CSS est
  136.     supprimΘ.</li>
  137. </ul>
  138.  
  139. <p>Les commandes <strong>Ouvrir</strong>, <strong>DΘsactiver</strong> et
  140. <strong>RΘactiver</strong> peuvent Ωtre appliquΘes α la feuille de style de
  141. l'utilisateur, mais les commandes <strong>Ajouter</strong> et
  142. <strong>Retirer</strong> concernent uniquement les feuilles de style
  143. externes.</p>
  144.  
  145. <h4 id="L2881">CrΘer et mettre α jour certaines propriΘtΘs CSS</h4>
  146.  
  147. <p>Les outils <a href="#Couleurs">Couleurs</a>, <a
  148. href="#Caract">CaractΦres</a> et <a href="#Format">Format</a> dΘcrits plus
  149. loin permettent d'engendrer des propriΘtΘs CSS directement dans un fichier
  150. feuille de style.</p>
  151.  
  152. <p>Quand la propriΘtΘ de style est appliquΘe alors que la sΘlection se trouve
  153. dans une feuille de style, Amaya insΦre la propriΘtΘ CSS α la position
  154. courante.</p>
  155.  
  156. <h3 id="Visualiser">Visualiser le style appliquΘ</h3>
  157.  
  158. <p>S'il y a beaucoup de feuilles de style attachΘes α un document, il est
  159. difficile de comprendre pourquoi un ΘlΘment est visualisΘ avec cette couleur
  160. ou ces marges, etc. Pour aider l'utilisateur, Amaya fournit une commande
  161. <strong>Montrer le style appliquΘ</strong> qui visualise dans une fenΩtre
  162. externe les propriΘtΘs CSS appliquΘes au premier ΘlΘment de la sΘlection
  163. courante.</p>
  164.  
  165. <p>L'utilisateur peut afficher le source CSS qui engendre chaque propriΘtΘ en
  166. double (ou simple) cliquant sur la propriΘtΘ. Aussi longtemps que la fenΩtre
  167. est ouverte, Amaya met α jour le contenu de la fenΩtre quand la sΘlection
  168. change. En appuyant sur la touche <code>F2</code>, l'utilisateur peut ainsi
  169. voir les propriΘtΘs CSS appliquΘes aux ΘlΘments englobants.</p>
  170.  
  171. <h3 id="Associer">Associer une classe α un ΘlΘment</h3>
  172.  
  173. <p>Toutes les classes disponibles pour un document sont listΘes dans l'outil
  174. <strong>Appliquer classe</strong>.</p>
  175.  
  176. <p class="ProcedureCaption">Pour appliquer une classe α un ΘlΘmentá:</p>
  177. <ol>
  178.   <li>Choisissez la bonne entrΘe dans l'outil <strong>Appliquer
  179.     classe</strong>.</li>
  180.   <li>Si vous voulez sΘlectionner la classe appliquΘe α un autre ΘlΘment,
  181.     vous devez sΘlectionner cet ΘlΘment, puis cliquer sur le bouton <img
  182.     alt="Refresh" src="../../resources/icons/16x16/refresh.png" />. La liste
  183.     d'<strong>Appliquer classe</strong> est mise α jour et la classe
  184.     appliquΘe est sΘlectionnΘe.</li>
  185.   <li>SΘlectionnez un fragment de texte ou un ΘlΘment.<br />
  186.     Pour sΘlectionner un ΘlΘment, vous devez cliquer dans l'ΘlΘment, puis
  187.     utiliser la touche F2 jusqu'α ce que la ligne en bas de la fenΩtre
  188.     affiche son type en premiΦre position.</li>
  189.   <li>Cliquer sur le bouton <img alt="ok"
  190.     src="../../resources/icons/16x16/ok.png" /> pour appliquer la classe α la
  191.     sΘlection courante.<br />
  192.     Si un fragment de texte est sΘlectionnΘ, Amaya engendrera un ΘlΘment
  193.     <strong>span</strong> pour englober le texte courant et l'attribut
  194.     <strong>class</strong> sera attachΘ α ce nouvel ΘlΘment
  195.     <strong>span</strong>.</li>
  196. </ol>
  197.  
  198. <p>Pour associer une classe ( attribut <strong>class</strong>) α un ΘlΘment,
  199. vous pouvez Θgalement utiliser l'outil <a
  200. href="Attributes.html.fr#L1073"><strong>Attributs</strong></a>. Cet outil
  201. Attributs permet aussi de retirer l'attribut <strong>class</strong> d'un
  202. ΘlΘment ou de le modifier (l'attribut <strong>class</strong> se manipule
  203. comme un autre attribut).</p>
  204.  
  205. <p class="ProcedureCaption">Pour retirer la classe d'un ΘlΘment :</p>
  206. <ul>
  207.   <li>Vous pouvez Θditer l'attribut <strong>class</strong> dans l'outils
  208.     <strong>Attributs</strong>.
  209.     <p>Quand l'ΘlΘment est sΘlectionnΘ, vous cliquez sur le [X] de l'entrΘe
  210.     pour supprimer l'attribut <strong>class</strong>, ou vous cliquez sur
  211.     l'entrΘe et Θditez sa valeur puis confirmez avec le bouton appliquer
  212.     (<img alt="ok" src="../../resources/icons/16x16/ok.png" />).</p>
  213.   </li>
  214.   <li>Vous pouvez aussi retirer ou Θditer l'attribut <strong>class</strong>
  215.     dans la vue structure.
  216.     <p>Pour retirer l'attribut <strong>class</strong>, vous cliquez dans la
  217.     valeur, <code>F2</code> pour sΘlectionner la valeur entiΦre, puis deux
  218.     <code>Delete</code> pour dΘtruire l'attribut.</p>
  219.   </li>
  220. </ul>
  221.  
  222. <h3 id="L288"><a name="Creating" id="Creating">CrΘer et mettre α jour un
  223. attribut de style</a></h3>
  224.  
  225. <p>Amaya fournit des outils qui vous permettent d'associer un attribut style
  226. aux ΘlΘments sΘlectionnΘsá:</p>
  227.  
  228. <h4 id="Couleurs">Couleurs</h4>
  229.  
  230. <p>L'outil <strong>Couleurs</strong> permet de choisir les couleurs de
  231. premier plan et d'arriΦre plan dans une palette. Quand l'outil
  232. <strong>Couleurs</strong> est ouvertá:</p>
  233.  
  234. <p><ul>
  235.   <li>Un bouton <img alt="default"
  236.     src="../../resources/icons/16x16/default.png" /> (valeur par dΘfaut) ou
  237.     un rectangle de couleur visualise la couleur du premier plan.</li>
  238.   <li>Un autre bouton <img alt="default"
  239.     src="../../resources/icons/16x16/default.png" /> (valeur par dΘfaut) ou
  240.     un rectangle de couleur visualise la couleur d'arriΦre plan.</li>
  241.   <li>Un bouton <img alt="switch"
  242.     src="../../resources/icons/misc/switch_colors.png" /> permet d'inverser
  243.     les couleurs du premier plan et d'arriΦre plan.</li>
  244.   <li>Un bouton <img alt="Default_color"
  245.     src="../../resources/icons/misc/black_white.png" /> permet de restaurer
  246.     les couleurs par dΘfaut (valeurs par dΘfaut).</li>
  247.   <li>Un bouton <img alt="Refresh"
  248.     src="../../resources/icons/16x16/refresh.png" /> permet d'initialiser les
  249.     couleurs du premier plan et d'arriΦre plan α partir de la sΘlection
  250.     courante.</li>
  251.   <li>Un bouton <img alt="ok" src="../../resources/icons/16x16/ok.png" />
  252.     permet d'appliquer les couleurs du premier plan et d'arriΦre plan α la
  253.     sΘlection courante.</li>
  254. </ul>
  255. </p>
  256.  
  257. <p>Pour choisir une nouvelle couleur de premier plan ou d'arriΦre plan, il
  258. faut cliquer sur le bouton correspondant. Une palette permet alors de choisir
  259. librement une couleur.</p>
  260.  
  261. <p>La valeur par dΘfaut vous permet de retirer l'information de style
  262. correspondante pour l'ΘlΘment sΘlectionnΘ. Les couleurs choisies ne sont pas
  263. immΘdiatement appliquΘes α la sΘlection. Le bouton appliquer doit Ωtre
  264. cliquΘ.</p>
  265.  
  266. <p class="Note"><strong>Note</strong>á: Il est important de choisir des
  267. couleurs de premier plan ou d'arriΦre plan suffisamment contrastΘes.</p>
  268.  
  269. <h4 id="Caract">CaractΦres</h4>
  270.  
  271. <p>L'outil <strong>CaractΦres</strong> permet de choisir la police de
  272. caractΦre, le style du caractΦre, la taille du corps et le style soulignΘ.</p>
  273. <ul>
  274.   <li>Un sΘlecteur <strong>Police</strong> fournit une liste limitΘe de
  275.     polices de caractΦres. Un bouton <img alt="ok"
  276.     src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
  277.     cette valeur α la sΘlection courante.</li>
  278.   <li>Un sΘlecteur <strong>SoulignΘ</strong> fournit la liste des valeurs
  279.     possibles. Un bouton <img alt="ok"
  280.     src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
  281.     cette valeur α la sΘlection courante.</li>
  282.   <li>Un sΘlecteur <strong>Corps</strong> fournit une liste limitΘe de corps
  283.     exprimΘs en points. Un bouton <img alt="ok"
  284.     src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
  285.     cette valeur α la sΘlection courante.</li>
  286.   <li>Un sΘlecteur <strong>Style des caractΦres</strong> fournit une liste
  287.     limitΘe de styles possibles. Un bouton <img alt="ok"
  288.     src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
  289.     cette valeur α la sΘlection courante.</li>
  290.   <li>Un sΘlecteur <strong>Graisse</strong> fournit une liste limitΘe de
  291.     graisses possibles. Un bouton <img alt="ok"
  292.     src="../../resources/icons/16x16/ok.png" /> permet d'appliquer seulement
  293.     cette valeur α la sΘlection courante.</li>
  294.   <li>Un bouton <img alt="Refresh"
  295.     src="../../resources/icons/16x16/refresh.png" /> permet d'initialiser les
  296.     valeurs α partir de la sΘlection courante.</li>
  297.   <li>Un bouton <img alt="ok" src="../../resources/icons/16x16/ok.png" />
  298.     permet d'appliquer toutes les valeurs α la sΘlection courante.</li>
  299. </ul>
  300.  
  301. <p>La valeur par dΘfaut vous permet de retirer l'information de style
  302. correspondante pour l'ΘlΘment sΘlectionnΘ. Les valeurs choisies ne sont pas
  303. immΘdiatement appliquΘes α la sΘlection. Le bouton appliquer doit Ωtre
  304. cliquΘ.</p>
  305.  
  306. <h4 id="Format">Format</h4>
  307.  
  308. <p>L'outil <strong>Format</strong> permet de choisir l'alignement, le
  309. renfoncement, la justification et l'interligne.</p>
  310. <ul>
  311.   <li>Un sΘlecteur d'alignementá: cliquez α gauche (<img alt="left"
  312.     src="../../resources/icons/16x16/format_left.png" />), α droite ( <img
  313.     alt="right" src="../../resources/icons/16x16/format_right.png" />),
  314.     centrΘ ( <img alt="center"
  315.     src="../../resources/icons/16x16/format_center.png" />), justifiΘ ( <img
  316.     alt="justify" src="../../resources/icons/16x16/format_justify.png" />),
  317.     ou <img alt="default" src="../../resources/icons/16x16/default.png" />
  318.     pour choisir la valeur par dΘfaut.</li>
  319.   <li>Un sΘlecteur de <strong>Renfoncement</strong> permettant de saisir la
  320.     valeur en point. Cliquez sur le bouton <img alt="default"
  321.     src="../../resources/icons/16x16/default.png" /> pour choisir la valeur
  322.     par dΘfaut.</li>
  323.   <li>Un sΘlecteur d'<strong>Interligne</strong> permettant de saisir la
  324.     valeur en point. Cliquez sur le bouton <img alt="default"
  325.     src="../../resources/icons/16x16/default.png" /> pour choisir la valeur
  326.     par dΘfaut.</li>
  327.   <li>Un bouton <img alt="Refresh"
  328.     src="../../resources/icons/16x16/refresh.png" /> permet d'initialiser les
  329.     valeurs α partir de la sΘlection courante.</li>
  330.   <li>Un bouton <img alt="ok" src="../../resources/icons/16x16/ok.png" />
  331.     permet d'appliquer les valeurs α la sΘlection courante.</li>
  332. </ul>
  333.  
  334. <p>La valeur par dΘfaut vous permet de retirer l'information de style
  335. correspondante pour l'ΘlΘment sΘlectionnΘ. Les valeurs choisies ne sont pas
  336. immΘdiatement appliquΘes α la sΘlection. Le bouton appliquer doit Ωtre
  337. cliquΘ.</p>
  338.  
  339. <h4 id="Image">Image de fond</h4>
  340.  
  341. <p>Cette entrΘe du menu <strong>Style</strong> vous permet de choisir une
  342. image de fond et sont mode de rΘpΘtition.</p>
  343.  
  344. <p class="ProcedureCaption">Pour ajouter une image de fondá:</p>
  345. <ol>
  346.   <li>SΘlectionnez un ΘlΘment
  347.     <p>Pour sΘlectionner un ΘlΘment, vous devez cliquer dans l'ΘlΘment, puis
  348.     utiliser la touche F2 jusqu'α ce que la ligne en bas de la fenΩtre
  349.     affiche son type en premiΦre position. Vous pouvez aussi utiliser la vue
  350.     structure pour le sΘlectionner.</p>
  351.   </li>
  352.   <li>Cliquez sur l'option <strong>Image de fond</strong> dans le menu
  353.     <strong>Style</strong> pour ouvrir le formulaire qui vous permet deá:
  354.     <ul>
  355.       <li>Entrer l'URI de l'image ou butiner.</li>
  356.       <li>SΘlectionner le mode de rΘpΘtitioná:repeat (<img alt="repeat"
  357.         src="../../resources/icons/16x16/BG_repeat.png" />), x-repeat ( <img
  358.         alt="x-repeat" src="../../resources/icons/16x16/BG_repeat_x.png" />),
  359.         y-repeat (<img alt="y-repeat"
  360.         src="../../resources/icons/16x16/BG_repeat_y.png" />), ou no-repeat
  361.         (<img alt="no-repeat"
  362.         src="../../resources/icons/16x16/BG_norepeat.png" />).</li>
  363.     </ul>
  364.   </li>
  365. </ol>
  366.  
  367. <p class="ProcedureCaption">Pour retirer l'image de fond :</p>
  368. <ul>
  369.   <li>Vous pouvez Θditer l'attribut <strong>style</strong> dans l'outils
  370.     <strong>Attributs</strong>.
  371.     <p>Quand l'ΘlΘment est sΘlectionnΘ, vous cliquez sur le [X] de l'entrΘe
  372.     pour supprimer l'attribut <strong>style</strong>, ou vous cliquez sur
  373.     l'entrΘe et Θditez sa valeur puis confirmez avec le bouton appliquer
  374.     (<img alt="ok" src="../../resources/icons/16x16/ok.png" />).</p>
  375.   </li>
  376.   <li>Vous pouvez aussi retirer ou Θditer l'attribut <strong>style</strong>
  377.     dans la vue structure.
  378.     <p>Pour retirer l'attribut <strong>style</strong>, vous cliquez dans la
  379.     valeur, <code>F2</code> pour sΘlectionner la valeur entiΦre, puis deux
  380.     <code>Delete</code> pour dΘtruire l'attribut.</p>
  381.   </li>
  382. </ul>
  383.  
  384. <h4 id="L554"><a name="Creating," id="Creating,">CrΘer un style gΘnΘrique
  385. pour un ΘlΘment ou une classe</a></h4>
  386.  
  387. <p>Quand un attribut <strong>style</strong> a ΘtΘ associΘ α un ΘlΘment, vous
  388. pouvez utiliser cet ΘlΘment comme un modΦle pour crΘer ou modifier une rΦgle
  389. de style en utilisant la commande <strong>CrΘer une rΦgle</strong>.</p>
  390.  
  391. <p class="ProcedureCaption">Pour crΘer un style gΘnΘrique pour un ΘlΘment ou
  392. une classeá:</p>
  393. <ol>
  394.   <li>SΘlectionnez l'ΘlΘment que vous dΘsirez utiliser comme modΦle. Par
  395.     dΘfaut la sΘlection est mise sur la chaεne de caractΦres, et vous devez
  396.     utiliser la touche F2 pour sΘlectionner l''ΘlΘment englobant.
  397.     <p></p>
  398.     <p class="Note"><strong>Note</strong>á: Vous devez sΘlectionner un seul
  399.     ΘlΘment et cet ΘlΘment doit avoir un attribut <code>style</code>.</p>
  400.     <p></p>
  401.   </li>
  402.   <li>Choisissez <strong>CrΘer une rΦgle</strong> depuis le menu
  403.     <strong>Style</strong>. Une boεte de dialogue surgit et visualise une
  404.     liste de sΘlecteurs CSS. Cette liste inclus toutes les classes qui sont
  405.     dΘfinies pour le document courant (y compris les classes dΘfinies par les
  406.     feuilles de style liΘes au document), ainsi que le type de l'ΘlΘment
  407.     auquel le style est associΘ.
  408.     <p></p>
  409.   </li>
  410.   <li>Choisissez un sΘlecteur dans cette liste ou entrez un nouveau nom de
  411.     classe et cliquer sur le bouton <strong>Confirmer</strong>.
  412.     <p>Le style de l'ΘlΘment sΘlectionnΘ est dΘsormais associΘ au sΘlecteur
  413.     choisi et l'attribut <code>style</code> est supprimΘ pour l'ΘlΘment
  414.     sΘlectionnΘ. Son contenu est dΘplacΘ α l'ΘlΘment <code>STYLE</code>, dans
  415.     le <code>HEAD</code> document, et tous les ΘlΘments correspondant au
  416.     sΘlecteur sont visualisΘs dans le nouveau style.</p>
  417.   </li>
  418. </ol>
  419.  
  420. <p>Quand vous avez crΘΘ une nouvelles classes avec la commande <strong>CrΘer
  421. une rΦgle</strong>, cette classe est automatiquement ajoutΘe α la liste de
  422. l'outil <strong>Appliquer une classe</strong>.</p>
  423.  
  424. <h3 id="L613"><a name="L1371" id="L1371">CrΘer des ΘlΘments de style
  425. HTML</a></h3>
  426.  
  427. <p>HTML fournit certains ΘlΘments de niveau de caractΦre qui permettent
  428. d'associer du style aux chaεnes de caractΦres. Deux entrΘes depuis le menu
  429. <strong>XHTML</strong> permettent de manier ces ΘlΘments HTML.</p>
  430.  
  431. <h4 id="Types">Types information</h4>
  432.  
  433. <p>La commande<strong>Types information</strong> du menu
  434. <strong>XHTML</strong> prΘsente un sous-menu offrant un choix d'ΘlΘments HTML
  435. qui dΘfinissent des styles abstraits.</p>
  436.  
  437. <p class="ProcedureCaption">Pour appliquer un des ElΘments caractΦresá:</p>
  438. <ol>
  439.   <li>SΘlectionnez tout d'abord une chaεne de caractΦres dans votre page.</li>
  440.   <li>Choisissez une commande dans ce menu <strong>Types information</strong>.
  441.     <p>La chaεne de caractΦres sΘlectionnΘe reτoit le style correspondant.</p>
  442.   </li>
  443. </ol>
  444.  
  445. <p>Trois de ces styles sont Θgalement disponibles dans l'outil XHTML :
  446. <em>emphasis</em> (<img src="../../resources/icons/22x22/XHTML_I.png"
  447. alt="Emphasis button" />), <strong>strong</strong> (<img
  448. src="../../resources/icons/22x22/XHTML_B.png" alt="Strong button" />) and
  449. <code>code</code> (<img src="../../resources/icons/22x22/XHTML_T.png"
  450. alt="Code button" />).</p>
  451.  
  452. <h4 id="L895">ElΘments caractΦres</h4>
  453.  
  454. <p>La commande <strong>╔lΘments caractΦres</strong> du menu
  455. <strong>XHTML</strong> offre un autre menu changeant le style du texte.</p>
  456.  
  457. <p class="ProcedureCaption">Pour appliquer un des ElΘments caractΦresá:</p>
  458. <ol>
  459.   <li>SΘlectionnez tout d'abord une chaεne de caractΦres dans votre page.</li>
  460.   <li>Choisissez une commande dans ce menu <strong>ElΘments
  461.     caractΦres</strong>.
  462.     <p>La chaεne de caractΦres sΘlectionnΘe reτoit le style correspondant.</p>
  463.   </li>
  464. </ol>
  465.  
  466. <h4 id="Supprimer">Supprimer un ΘlΘment style</h4>
  467.  
  468. <p>Toutes les commandes des sous-menus <strong>Types</strong>
  469. <strong>information</strong> et <cite></cite><strong>╔lΘments
  470. caractΦres</strong> s'annulent si elles sont appliquΘes de nouveau.</p>
  471.  
  472. <p class="ProcedureCaption">Pour supprimer un ΘlΘment style :</p>
  473. <ol>
  474.   <li>SΘlectionnez l'ΘlΘment que vous voulez supprimer. Par dΘfaut la
  475.     sΘlection est mise sur la chaεne de caractΦres, et vous devez utiliser la
  476.     touche F2 pour sΘlectionner l''ΘlΘment englobant.</li>
  477.   <li>Appliquez de nouveau la commande du sous-menu <strong>Types
  478.     information</strong> ou <strong>ElΘments caractΦres</strong> du
  479.     menu<strong>XHTML</strong>.</li>
  480. </ol>
  481. </div>
  482. </body>
  483. </html>
  484.