Les feuilles de style

Le menu Style vous permet de changer l'apparence de vos documents de deux façons différentes :

• en utilisant les cascades des feuilles de style (CSS).
• en utilisant les éléments et les attributs HTML.

Les entrées du menu Style sont consacrées à la création et la gestion des propriétés et des feuilles de style CSS.

Créer et mettre à jour un attribut de style

Chacune des quatre entrées du menu Style appelle une boîte de dialogue qui permet l'association d'un attribut de style aux éléments courants sélectionnés :

• L'option Style de caractères permet de choisir la police de caractère, le style du caractère, la taille du corps et le style souligné.
• L'option Couleurs permet de choisir les couleurs du premier plan et de l'arrière plan dans la palette. Cliquez sur une cellule de la palette avec le bouton gauche de la souris pour attribuer la couleur du premier plan, cliquez sur le bouton du milieu pour attribuer la couleur de l'arrière plan.
• L'option Format permet de choisir l'alignement, le renfoncement, la justification et l'interligne.
• L'option Image de fond permet de choisir une image de fond et son mode de répétition.

Dans toutes ces boîtes de dialogue, les boutons Défaut permettent de supprimer l'information de style correspondant pour les éléments sélectionnés.

Toutes les modifications faites avec ces boîtes de dialogue peuvent être vues immédiatement dans la vue formatée et également dans la vue structure.

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 :

• Sélectionnez cet élément (vous devez sélectionner un seul élément et cet élément doit avoir un attribut style)
• 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 les types d'élément auquel le style est associé.
• 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éé de nouvelles classes avec la commande Créer une règle, vous pouvez associer ces classes à certains éléments dans le document :

• Choisissez Appliquer une classe depuis le menu Style. Une boîte de dialogue surgit, affichant toutes les classes existantes. Choisissez une de ces classes. Les éléments sélectionnés sont désormais visualisés avec le style associé à la classe choisie.

Pour associer une classe à un élément, vous pouvez également utiliser le menu Attributs. Ce menu permet aussi d'effacer un attribut de classe pour un élément ou de le changer : l'attribut de classe se manipule comme un autre attribut.

Les feuilles de style CSS externes et les feuilles de style CSS 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 et 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

L'entrée de feuilles de style donne accès à une série de commandes qui permettent de contrôler les feuilles de style CSS externes et celles qui donnent les préférences de l'utilisateur :

• La commande Ajouter permet de lier une nouvelle feuille de style CSS à un document courant. On peut cliquer directement sur la cible de la feuille de style si elle est déjà visualisée dans la fenêtre Amaya. Si ce n'est pas le cas, l'utilisateur devra cliquer dans le document courant pour avoir accès à une boîte de dialogue et taper l'URL de la cible de la feuille de style. Cette commande ajoute un élément lien avec ses attributs à la tête du document.
• 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 aux feuilles de style qui donnent les préférences de l'utilisateur, mais les commandes Ajouter et Retirer concernent uniquement les feuilles de style reliées. La figure suivante montre la liste des feuilles de style CSS proposées pour la commande Ouvrir. Si aucune feuille de style CSS n'est actuellement appliquée à un document, une boîte de dialogue expliquera "qu'aucun fichier CSS n'est disponible".

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 voir les propriétés CSS appliquées aux éléments englobants.

Mettre du style en utilisant des éléments 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.

Créer des éléments de style HTML

La commandeTypes information du menu Xhtml présente un sous-menu offrant un choix d'éléments HTML qui définissent des styles abstraits. Sélectionnez tout d'abord une chaîne de caractères dans votre page et ensuite choisissez une commande dans ce menu. La chaîne de caractères sélectionnée reçoit le style correspondant. Trois de ces styles sont également disponibles par l'intermédiaire des boutons : emphasis (), strong () and code ().

La commande Éléments caractères du menu Xhtml offre un autre menu changeant le style du texte. Les premières entrées de ce menu peuvent être remplacées par CSS et ne devraient pas être utilisées. Elles sont là uniquement pour se conformer à l'implémentation de HTML 3.2.

Supprimer le style

Pour supprimer le style d'une chaîne de caractères, sélectionnez tout d'abord la chaîne et appliquez de nouveau la commande qui a été utilisée pour associer le style que vous voulez supprimer. Toutes les commandes des sous-menus Types information et Éléments caractères s'annulent si elles sont appliquées de nouveau.