Éditeur de Styles

Groupe de styles

Un Groupe de styles est un fichier contenant les différents réglages de styles et à partir duquel la feuille de styles est générée.

Vous pouvez enregistrer un Groupe de styles pour mémoriser une version de votre feuille de styles puis procéder à d'autres ajouts de styles que vous n'enregistrez que si le résultat vous convient.
Vous pouvez aussi importer un sélecteur provenant d'un autre groupe de styles.

L'image ci-dessous représente le Groupe de styles qui a servi à réaliser cette page. Elle comporte des liens menant à la documentation de chaque élément de l'interface utilisateur.

Liste des sélecteurs Le Groupe de styles comporte une Liste des Sélecteurs dont vous pouvez modifier les propriétés au moyen de la Boîte de texte. Le sélecteur courant est l'élément sélectionné dans la liste. Boutons de gestion des sélecteurs Ajoute un nouveau sélecteur avant ou après le sélecteur courant. Détruit le sélecteur courant. Clone le sélecteur courant. Permet d'importer dans le groupe de styles un sélecteur présent dans un autre groupe : utile pour récupérer des réglages déjà réalisés. Une autre solution consiste à créer un document texte contenant des extraits d'une ou plusieurs feuilles de style et à l'importer au moyen de l'article Importer CSS du menu Fichier. Les doubles flêches permettent de déplacer le sélecteur courant dans la liste. Ce bouton copie le style du sélecteur sous la forme style="propriétés css". L'icone CSS externe détermine le mode d'export de la feuille de style CSS. Si elle est activée, la feuille est générée sous forme d'un fichier css isolé, partageable entre plusieurs pages; sinon, le style est placé dans le Presse-Papier et est prêt à coller dans une page HTML. Le menu local Media en haut de la Liste des Sélecteurs permet de déterminer si la feuille est destinée à un média spécifique : écran, impression, etc. Facilités de test de la feuille de styles Ce bouton permet d'attacher à la CSS une page de test. Ce bouton permet de prévisualiser dans le navigateur la page attachée à la CSS.

La Boîte de texte La Boîte de texte sert à réaliser les réglages et à visualiser leur aspect. L'icone « background »permet de choisir la couleur et une image de fond. Affecte une famille de polices au Sélecteur avec un type "générique" (ie : sans serif). Pour donner une police unique à l'ensemble du document, définissez-la au niveau du sélecteur body. Vous pourrez attribuer aux autres sélecteurs des tailles de polices différentes. Cliquer l'exemple de texte permet de préciser les attributs des caractères : taille, couleur, casse majuscule, graisse, condensation, italiques - ainsi que les attributs de paragraphes : interlignage, alignement, retrait... Permet de choisir le style, l'épaisseur et la couleur d'une bordure (1 à 4 côtés); les arrondis de bordure; les options de fusion des bordures (tables). Définit les marges intérieure (padding) et extérieure (margin) du sélecteur (4 côtés). « Blocs et position » permet de spécifier les dimensions (hauteur, largeur) ou la position (relative, absolue…) d'un sélecteur. Liste détermine la présentation d'une liste. propriétés de mise en colonnes. propriétés de mise en page à l'impression. Gestion des boîtes flexibles pour un design adaptatif. Le Crayon permet de saisir de manière libre toutes les autres propriétés css non gérées, les requêtes @media, ainsi que des commentaires. Facilités d'accès aux répertoires Le menu Ouvrir dossier... en haut à droite permet d'ouvrir directement les répertoires de l'environnement de travail.

Ajouter un sélecteur.

La création d'un nouveau Groupe de styles et le bouton affichent le dialogue suivant :

Vous pouvez choisir un sélecteur dans les listes proposées (titre et paragraphes, spéciaux et tables) ou taper directement son nom dans le champ de saisie ; Vous pouvez également ajouter une autre sélecteur en enfonçant la touche Option (ALT).

Les boutons radio avant et après déterminent la position du nouveau sélecteur par rapport au sélecteur actif dans la liste des sélecteurs du groupe de styles.

Pour créer une requête @media, cliquer @media dans la liste, puis utiliser l'outil crayon pour la définir. cela positionne un pseudo-sélecteur «media-fin@» qui ferme la requête.
Les propriétés changées devront être définies par des sélecteurs placés entre ces bornes.

Changer le nom d'un sélecteur.

Pour renommer un sélecteur, sélectionner la ligne correspondante dans liste des sélecteurs en enfonçant la touche ⌥ALTALT : modifiez-le de la manière désirée.
Vous pouvez le renommer, le compléter... mais vous ne pouvez pas transformer un sélecteur en commentaire et vice-versa.