## Cascades des feuilles de style (CSS)

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

### Les feuilles de style CSS externes et utilisateur

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.

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 Feuille de Style Utilisateur. c'est le fichier local amaya.css conservé dans l'environnement de l'utilisateur (le répertoire d'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 menu 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 Butiner pour la sélectionner.
  - Sinon entrez l'URI (comme http://www.w3.org/file.css) la feuille CSS cible et taper sur la touche Enter ou Return pour 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 actives du document courant. Cette commande n'affecte en rien le lien CSS dans le document.

- 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. En plus de cela, l'élément lien qui attache les feuilles 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.

#### Créer et mettre à jour certaines propriétés CSS

Les outils Couleurs, Caractères et Format décrits plus loin permettent d'engendrer des propriétés CSS directement dans un fichier feuille de style.

Quand la propriété de style est appliquée alors que la sélection se trouve dans une feuille de style, Amaya insère la propriété CSS à la position courante.

### Visualiser le style appliqué

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

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

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

Toutes les classes disponibles pour un document sont listées dans l'outil Appliquer classe.

Pour appliquer une classe à un élément :

1. Choisissez la bonne entrée 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 d'Appliquer classe est mise à jour et la classe appliquée est sélectionnée.
3. Sélectionnez un fragment de texte ou un élément.
   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.
4. Cliquer sur le bouton pour appliquer la classe à la sélection courante.
   Si un fragment de texte est sélectionné, Amaya engendrera un élément span pour englober le texte courant et l'attribut class sera attaché à ce nouvel élément span.

Pour associer une classe ( attribut class) à un élément, vous pouvez également utiliser l'outil Attributs. Cet outil Attributs permet aussi de retirer l'attribut class d'un élément ou de le modifier (l'attribut class se manipule comme un 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é, vous cliquez sur le [X] de l'entrée pour supprimer l'attribut class, ou vous 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, vous cliquez dans la valeur, `F2` pour sélectionner la valeur entière, puis deux `Delete` pour détruire l'attribut.

### Créer et mettre à jour un attribut de style

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

#### Couleurs

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

- Un bouton (valeur par défaut) ou un rectangle de couleur visualise la couleur du premier plan.
- Un autre bouton (valeur par défaut) ou un rectangle de couleur visualise la couleur d'arrière plan.
- Un bouton permet d'inverser les couleurs du premier plan et d'arrière plan.
- Un bouton permet de restaurer les couleurs par défaut (valeurs par défaut).
- Un bouton permet d'initialiser les couleurs du premier plan et d'arrière plan à partir de la sélection courante.
- Un bouton permet d'appliquer les couleurs du premier plan et d'arrière plan à la sélection courante.

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.

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

Note : Il est important de choisir des couleurs de premier plan ou d'arrière plan suffisamment contrastées.

#### Caractères

L'outil Caractères permet de choisir la police de caractère, le style du caractère, la taille du corps et le style souligné.

- Un sélecteur Police fournit une liste limitée de polices de caractères. Un bouton permet d'appliquer seulement cette valeur à la sélection courante.
- Un sélecteur Souligné fournit la liste des valeurs possibles. Un bouton permet d'appliquer seulement cette valeur à la sélection courante.
- Un sélecteur Corps fournit une liste limitée de corps exprimés en points. Un bouton permet d'appliquer seulement cette valeur à la sélection courante.
- Un sélecteur Style des caractères fournit une liste limitée de styles possibles. Un bouton permet d'appliquer seulement cette valeur à la sélection courante.
- Un sélecteur Graisse fournit une liste limitée de graisses possibles. Un bouton permet d'appliquer seulement cette valeur à la sélection courante.
- Un bouton permet d'initialiser les valeurs à partir de la sélection courante.
- Un bouton permet d'appliquer toutes les valeurs à la sélection courante.

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

#### Format

L'outil Format permet de choisir l'alignement, le renfoncement, la justification et l'interligne.

- Un sélecteur d'alignement : cliquez à gauche (), à droite ( ), centré ( ), justifié ( ), ou pour choisir la valeur par défaut.
- Un sélecteur de Renfoncement permettant de saisir la valeur en point. Cliquez sur le bouton pour choisir la valeur par défaut.
- Un sélecteur d'Interligne permettant de saisir la valeur en point. Cliquez sur le bouton pour choisir la valeur par défaut.
- Un bouton permet d'initialiser les valeurs à partir de la sélection courante.
- Un bouton permet d'appliquer les valeurs à la sélection courante.

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

#### Image de fond

Cette entrée du menu Style vous permet de choisir une image de fond et sont mode de répétition.

Pour ajouter une image de fond :

1. Sélectionnez un élément

   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. Vous pouvez aussi utiliser la vue structure pour le sélectionner.

2. Cliquez sur l'option Image de fond dans le menu Style pour ouvrir le formulaire qui vous permet de :
   - Entrer l'URI de l'image ou butiner.
   - Sélectionner le mode de répétition :repeat (), x-repeat ( ), y-repeat (), ou no-repeat ().

Pour retirer l'image de fond :

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

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

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

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

#### 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 Créer une règle.

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 depuis le menu Style. 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é.

3. Choisissez un sélecteur dans cette liste ou entrez un nouveau nom de classe et cliquer 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é pour l'élément sélectionné. Son contenu est déplacé à l'élément `STYLE`, dans le `HEAD` document, et tous les éléments correspondant au sélecteur sont visualisés dans le nouveau style.

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

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

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 XHTML permettent de manier ces éléments HTML.

#### Types information

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

Pour appliquer un des Eléments caractères :

1. Sélectionnez tout d'abord une chaîne de caractères dans votre page.
2. Choisissez une commande dans ce menu Types information.

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

Trois de ces styles sont également disponibles dans l'outil XHTML : emphasis (), strong () and `code` ().

#### Eléments caractères

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

Pour appliquer un des Eléments caractères :

1. Sélectionnez tout d'abord une chaîne de caractères dans votre page.
2. Choisissez une commande dans ce menu Eléments caractères.

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

#### Supprimer un élément style

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 l'élément que vous voulez supprimer. 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.
2. Appliquez de nouveau la commande du sous-menu Types information ou Eléments caractères du menuXHTML.