Les feuilles de style

Amaya

## Appliquer du style à un document

Le menu Format vous permet de changer l'apparence de vos documents en utilisant les cascades des feuilles de style (CSS).

### Appliquer/Retirer un thème

Amaya fournit par défaut deux thèmes (Classique, Moderne) qui vous permettent de changer globalement la présentation du document courant.

Pour changer la présentation du document avec un thème :

- Sélectionnez Classique ou Moderne dans la liste des thèmes proposés par l'outil Style,
- ou sélectionnez Classique ou Moderne dans le sous-menu Format/Thème.

Pour retirer le thème courant :

- Sélectionnez Pas de thème dans la liste des thèmes proposés par l'outil Style,
- ou sélectionnez Pas de thème dans le sous-menu Format/Thème.

Tous ces changements peuvent être défaits (Édition/Défaire ou `Ctrl-z`).

Quand un thème est appliqué à un document, Amaya engendre un élément `style` dont le contenu vient des fichiers `Amaya/config/Classis.css` ou `Amaya/config/Modern.css`. Vous pouvez créer vos propres fichier `Classic.css` et `Modern.css` dans son répertoire AmayaHome. Si vous le faites, Amaya utilisera ces fichiers à la place des fichiers par défaut du répertoire `config`.

### Appliquer du style spécifique

Certaines propriétés de style comme la couleur du texte, la couleur de fond, la police de caractères, l'alignement, l'interligne, ou l'indentation peuvent être appliqués à une portion de texte ou un élément complet avec l'outil Style ou avec les sous-menus du menu Format.

Pour appliquer un style spécifique :

1. Sélectionnez un fragment de texte ou un élément.
   Pour sélectionner un élément, cliquez dans l'élément, puis utiliser la touche `F2` jusqu'à ce que la ligne en bas de la fenêtre affiche le type de l'élément voulu en première position.
2. Choisissez dans l'outil Style ou dans le menu Format l'entrée correspondant à la propriété de style qui vous intéresse.

   L'outil Style propose deux boutons pour chacune des couleurs (couleur du texte et couleur de fond). Le premier bouton de chaque paire permet d'appliquer la couleur visualisée alors ; le second permet de choisir une autre couleur et de l'appliquer.

   Les entrées polices et taille de caractères sont les seules mises à jour en fonction de la sélection.

Pour retirer un style spécifique :

- L'outil Style ne permet pas de retirer le style spécifique. Il faut donc utiliser les entrées Pas de couleur ou Défaut des sous-menus du menu Format.
- Dans le profil d'édition avancée, vous pouvez directement éditer l'attribut `style`.

### Associer une classe à un élément

Toutes les valeurs disponibles pour l'attribut `class` dans le document sont listées dans l'outil Appliquer classe.

Pour appliquer une classe à un élément :

1. Choisissez la valeur dans l'outil Appliquer classe.
2. 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 . La liste Appliquer classe est mise à jour et la classe de cet élément est sélectionnée.
3. Sélectionnez un fragment de texte ou un élément.
   Pour sélectionner un élément, cliquez dans l'élément, puis utiliser la touche `F2` jusqu'à ce que la ligne en bas de la fenêtre affiche le type de l'élément en première position.
4. Cliquer sur le bouton pour appliquer la classe à la sélection courante.
   Si un fragment de texte est sélectionné, Amaya engendre un élément `span` pour englober le texte courant et l'attribut `class` est attaché à ce nouvel élément `span`.

Pour associer une classe (attribut `class`) à un élément, vous pouvez également utiliser l'outil Attributs (dans le profil avancé seulement). Cet outil permet aussi de retirer l'attribut `class` d'un élément ou de le modifier (l'attribut `class` se manipule comme n'importe quel autre attribut).

Pour retirer la classe d'un élément :

- Vous pouvez éditer l'attribut `class` dans l'outils Attributs.

  Quand l'élément est sélectionné, cliquez sur le [X] de l'entrée pour supprimer l'attribut `class`, ou cliquez sur l'entrée et éditez sa valeur, puis confirmez avec le bouton appliquer .

- Vous pouvez aussi retirer ou éditer l'attribut `class` dans la vue structure.

  Pour retirer l'attribut `class`, cliquez dans la valeur, ``F2`` pour sélectionner la valeur entière, puis deux `Suppr` pour détruire l'attribut.

### Créer des éléments de style HTML

HTML définit certains éléments de niveau caractère qui permettent d'associer du style aux chaînes de caractères. Deux entrées depuis le menu Insertion permettent d'éditer ces éléments HTML.

#### Eléments type information

La commande Types information du menu Insertion présente un sous-menu offrant un choix d'éléments HTML qui définissent des styles abstraits.

Pour appliquer un des éléments type information :

1. Sélectionnez une chaîne de caractères.
2. Choisissez une commande dans le menu Types information.

   La chaîne de caractères sélectionnée reçoit le style correspondant.

Cinq de ces éléments sont également disponibles dans l'outil Eléments : em ( ), stong ( ), `code` ( ), ins ( ), del ( ).

#### Eléments caractères

La commande Éléments caractères du menu Insertion offre un autre menu changeant le style du texte.

Pour appliquer un des éléments caractères :

1. Sélectionnez une chaîne de caractères.
2. Choisissez une commande dans le menu Eléments caractères.

   La chaîne de caractères sélectionnée reçoit le style correspondant.

Deux de ces éléments sont également disponibles dans l'outil Eléments : sup ( ), sub ( ).

#### Supprimer un élément type information ou charactères

Toutes les commandes des sous-menus Types information et Éléments caractères s'annulent si elles sont appliquées de nouveau.

Pour supprimer un élément style :

1. Sélectionnez la chaîne de caractères dont vous voulez supprimer le style.
2. Appliquez de nouveau la commande du sous-menu Types information ou Eléments caractères du menu Insertion, ou utilisez le bouton de l'outil Eléments : em ( ), strong ( ), `code` ( ), ins ( ), del ( ), sup ( ), sub ( ).

Si vous voulez insérer un texte sans aucun style dans une chaîne de caractère stylée, placez le point d'insertion à la position désirée et activez la commande correspondant au style à retirer (sous-menu Types information ou Eléments caractères du menu Insertion, ou utilisez le bouton de l'outil Eléments).

### Utiliser l'éditeur de style

Note : L'éditeur de style n'est pas disponible dans le profil Lite d'Amaya

L'entrée Editeur de style du menu Format, ou le bouton de la barre de boutons, permet d'engendrer une liste de propriétés de style CSS, à l'aide d'une boite de dialogue avec 4 onglets : Caractères, Couleurs, Boites, Format.

Quand vous avez choisi un ensemble de propriétés, vous pouvez les Appliquer à la sélection courante :

- Si la sélection se trouve dans une vue formatée, Amaya engendre un attribut style pour l'élément sélectionné, créant un élément `span` lorsqu'une simple chaîne de caractères est sélectionnée.
- Si la sélection se trouve dans une vue source ou dans un fichier CSS, Amaya engendre à la position courante la syntaxe CSS des propriétés que vous avez choisies.

Dans tous les cas, les adresses des images incluses dans la liste des propriétés (`background-image`, `list-style-image`) sont transformées en adresses relatives au document.

### Les feuilles de style CSS externes et utilisateur

Note : Ces actions ne sont pas disponibles dans le profil Lite d'Amaya.

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.

Vous pouvez définir une feuille de style spécifique qui s'applique à tous les documents que vous chargez. Cette feuille de style est appelée feuille de style utilisateur. C'est le fichier local `amaya.css` conservé dans votre environnement utilisateur (répertoire AmayaHome).

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 :

    @media print {
     body {font-size: 10pt}
    }
    @media screen {
     body {font-family: Helvetica}
    }

#### Gérer des feuilles de style CSS externes

Le sous-menu Format/Feuilles de style donne accès à une série de commandes qui permettent de contrôler les feuilles de style CSS externes et de l'utilisateur.

- La commande Ajouter permet de lier une nouvelle feuille de style CSS à un document courant.

  Cette commande fait apparaître une boîte de dialogue :

  - Si la feuille CSS cible est visualisée dans une autre fenêtre d'Amaya, cliquez sur le bouton Clic puis n'importe où dans la feuille CSS cible. Le lien est créé.
  - Si la feuille CSS cible est visualisée dans un autre onglet, cliquez sur le bouton Clic puis changez d'onglet et cliquez n'importe où dans la feuille CSS cible. Le lien est créé.
  - Si la feuille CSS cible est locale vous pouvez utiliser le bouton Parcourir pour la sélectionner.
  - Sinon entrez l'URI (comme http://www.w3.org/file.css) de la feuille CSS cible et tapez sur la touche `Entrée` pour confirmer (ou cliquez sut le bouton Confirmer). Le lien est créé.

- La commande Ouvrir permet d'ouvrir une des feuilles de style CSS appliquées au document courant.

- La commande Désactiver permet de supprimer les effets d'une des feuilles de style active du document courant. Cette commande n'affecte en rien le lien CSS dans le document. Elle l'ignore simplement.

- La commande Réactiver 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.

- La commande Retirer permet de retirer une des feuilles de style CSS externes. Cette commande agit comme la commande Désactiver, mais en plus, le lien qui attache la feuille de style CSS est supprimé.

Les commandes Ouvrir, Désactiver et Réactiver peuvent être appliquées à la feuille de style de l'utilisateur, mais les commandes Ajouter et Retirer concernent uniquement les feuilles de style externes.

L'outil Liste des styles affiche la liste les feuilles de styles appliquées au document. En même temps, il permet d'ajouter/retirer, activer/désactiver, et ouvrir des feuilles de style.

### Visualiser le style appliqué

Lorsque de multiples feuilles de style sont attachées à un document, il est souvent difficile de comprendre pourquoi un élément est visualisé avec telle ou telle propriété de style. Pour vous aider dans cette situation, Amaya fournit la commande Format/Montrer le style appliqué qui visualise dans une fenêtre externe les propriétés CSS appliquées au premier élément de la sélection courante.

Vous pouvez alors afficher la règle CSS qui engendre chaque propriété en double-cliquant sur la propriété. Aussi longtemps que la fenêtre des propriétés CSS est ouverte, Amaya met à jour son contenu chaque fois que la sélection change.

En appuyant sur la touche `F2`, vous pouvez ainsi voir les propriétés CSS appliquées aux éléments englobants. Quand vous cahngez la sélection en sélectionnant dans le chemin de la barre d'état affiché en bas de la fenêtre, les propriétés CSS appliquées sont également mises à jour.

### Créer un style générique pour un élément ou une classe

Quand un attribut `style` 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 Format/Créer une règle.

Note : Le retrait de tous les attributs `style` engendrés par la plupart des traitements de texte peut être une tâche fastidieuse qui est heureusement réalisée par la commande Nettoyage du code.

Pour créer un style générique pour un élément ou une classe :

1. 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.

   Note : Vous devez sélectionner un seul élément et cet élément doit avoir un attribut `style`.

2. Choisissez Créer une règle dans le menu Format. Une boîte de dialogue s'affiche et montre une liste de sélecteurs CSS. Cette liste inclut 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é.

3. Choisissez un sélecteur dans cette liste ou entrez un nouveau nom de classe et cliquez sur le bouton Confirmer.

   Le style de l'élément sélectionné est désormais associé au sélecteur choisi et l'attribut `style` est supprimé de l'élément sélectionné. Sa valeur est déplacée à l'élément `style`, dans l'entête `head` du document, et tous les éléments correspondant au sélecteur sont visualisés dans le nouveau style.

Quand vous avez créé une nouvelle classe avec la commande Créer une règle, cette classe est automatiquement ajoutée à la liste de l'outil Appliquer une classe.