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

margin et padding couleur et image de fond style de la bordure style de liste style de bloc, position, dimensions... famille de police style du texte et police propriétés CSS en saisie libre et commentaires mise en page et sauts de page styles de colonnes style css généré liste des sélecteurs nom sélecteur barre d'outils gestion sélecteur plugins css externe ou interne accès direct aux répertoires de l'environnement de travail Facilités de test de la feuille de styles : page de test. version de HTML Styles medias auxquels est destinée la feuille de styles : écran, imprimante, etc.

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

ajouter un sélecteurAjoute un nouveau sélecteur avant ou après le sélecteur courant.
supprimer sélecteurDétruit le sélecteur courant.
dupliquer sélecteurClone le sélecteur courant.
import d'un sélecteur appartenant à un autre groupePermet d'importer dans le groupe de styles un sélecteur défini dans un autre groupe.
Utile pour récupérer les réglages déjà réalisés dans un autre groupe.
Une autre solution pour récupérer les réglages d'autres styles, consiste à créer un document texte contenant les extraits d'une ou plusieurs feuilles de style et à l'importer au moyen de l'article Importer CSS du menu Fichier.
déplacer les sélecteursLes doubles flêches permettent de déplacer le sélecteur courant dans la liste.
copie style sélecteurCe bouton copie le style du sélecteur sous la forme style="propriétés css".
feuille CSS externe à la page HTML
feuille CSS incluse dans la page HTML
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

attachement d'une page à la css comme page de testCe bouton permet d'attacher à la CSS une page de test.
preview de la page attachée à la css dans le navigateurCe 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.
background L'icone « background »permet de choisir la couleur et une image de fond.
choix de la font-family 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.
aperçu du texte 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...
marges Définit les marges intérieure (padding) et extérieure (margin) du sélecteur (4 côtés).
border 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).
list-style Liste détermine la présentation d'une liste.
position et blocs « Blocs et position » permet de spécifier les dimensions (hauteur, largeur) ou la position (relative, absolue…) d'un sélecteur.
outil crayon Le Crayon permet de saisir de manière libre toutes les autres propriétés css non gérées, ainsi que des commentaires.
Mise en page à l'impression et sauts de page propriétés de mise en page à l'impression.
bouton gestion des colonnes Nouveauté de la version 3.33 : propriétés de mise en colonnes.

Facilités d'accès aux répertoires

menu local dossiers de l'environnement de travailLe 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 ajouter un sélecteur 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.

Changer le nom d'un sélecteur.

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