Partager via


Disposition, boîtes de dialogue Nouveau style et Modifier le style

 

Publication: mars 2016

La catégorie Disposition des boîtes de dialogue Nouveau style et Modifier le style permet de définir les règles de style d'une feuille de style en cascade (CSS) pour la disposition des éléments d'interface dans une page Web.  Vous pouvez appliquer ces règles de style directement aux éléments HTML ou les ajouter à la page active ou à une feuille de style externe.  

Pour définir une règle de style CSS de disposition pour les éléments d'interface utilisateur de la page active

  1. Ouvrez la page en mode Design ou Source.

  2. Vous pouvez également sélectionner le texte et/ou les éléments HTML auxquels appliquer le style.

  3. Dans le menu Format, sélectionnez Nouveau style.

    La boîte de dialogue Nouveau style s'affiche.

  4. Dans le volet Catégorie, sélectionnez Disposition.

    Les sélections de style de disposition s'affichent dans le volet de droite.

En mode Design, lorsque vous appliquez des styles au texte sélectionné, les attributs de style sont insérés inline dans le balisage HTML de la page.  Passez en mode Source pour contrôler les nouveaux attributs de style.  

Pour ajouter des attributs de disposition à une règle de style CSS définie dans une feuille de style externe

  1. Ouvrez une feuille de style externe existante.

  2. Placez le curseur entre les accolades de la règle de style à modifier.

  3. Effectuez l'une des actions suivantes.

    • Cliquez avec le bouton droit sur la feuille de style dans l'éditeur, puis dans le menu contextuel, choisissez Créer un style.

    • Dans la barre d'outils de feuille de style, choisissez Créer un style.

    La boîte de dialogue Modifier le style s'affiche.

  4. Dans le volet de gauche, cliquez sur Disposition.

    Les sélections de style de disposition s'affichent dans le volet de droite.

Vous pouvez appliquer une classe de style CSS à un élément de la page Web ou à l'élément body en affectant la propriété class de l'élément au nom du sélecteur de classe.

Liste UIElement

Les tableaux suivants répertorient les options disponibles dans la catégorie Disposition des boîtes de dialogue Nouveau style et Modifier le style.

Option de disposition

  • visibilité
    Indique si un élément est visible ou masqué.  Les valeurs sont les suivantes :  

    • collapse   Lorsqu'elle est utilisée avec des éléments de tableau, cette valeur masque une ligne ou une colonne.  Pour tous les autres éléments, cette valeur correspond à la valeur hidden.  

    • hidden   Rend l'élément invisible.

    • visible   Rend l'élément visible.

    • inherit   L'élément hérite sa propriété de visibilité d'un élément parent.

  • affichage
    Affichage d'un élément.  Les valeurs sont les suivantes :  

    • block   L'élément s'affiche au niveau du bloc avec des sauts de ligne avant et après.

    • inline   L'élément s'affiche inline sans saut de ligne avant ni après.

    • inline-box   L'élément s'affiche inline sous forme de zone, sans saut de ligne avant ni après.

    • inline-table   L'élément s'affiche inline sous forme de tableau, sans saut de ligne avant ou après.

    • list-item   L'élément s'affiche sous forme d'élément de liste.

    • none   L'élément est masqué.

    • run-in   L'élément s'affiche au niveau du bloc ou inline, selon le contexte.

    • table   L'élément s'affiche sous forme de tableau de bloc avec un saut de ligne avant et après.

    • table-caption   L'élément s'affiche sous forme de légende de tableau.

    • table-cell   L'élément s'affiche sous forme de cellule de tableau.

    • table-column   L'élément s'affiche sous forme de colonne de tableau.

    • table-column-group   L'élément s'affiche sous forme de groupe de colonnes de tableau.  Ce groupe peut contenir une ou plusieurs colonnes.  

    • table-footer-group   L'élément s'affiche sous forme de groupe de pieds de page de tableau.  Ce groupe peut contenir un ou plusieurs pieds de page.  

    • table-header-group   L'élément s'affiche sous forme de groupe d'en-têtes de tableau.  Ce groupe peut contenir un ou plusieurs en-têtes.  

    • table-row   L'élément s'affiche sous forme de ligne de tableau.

    • table-row-group   L'élément s'affiche sous forme de groupe de lignes de tableau.  Ce groupe peut contenir une ou plusieurs lignes.  

    • inherit   L'élément hérite sa propriété d'affichage d'un élément parent.

  • float
    Indique si un élément flotte vers la gauche ou la droite, permettant au texte de l'entourer, ou s'il s'affiche inline.  Cette propriété est généralement utilisée avec des images, mais elle s'applique également aux blocs de texte.  Les valeurs sont les suivantes :  

    • left   L'élément flotte vers la gauche, dans l'élément parent.

    • none   L'élément s'affiche inline à son emplacement dans le texte.

    • right   L'élément flotte vers la droite, dans l'élément parent.

    • inherit   L'élément hérite sa propriété float d'un élément parent.

  • clear
    Indique les côtés d'un élément qui interdisent les éléments flottants.  Les valeurs sont les suivantes :  

    • both   L'élément interdit les éléments flottants à sa gauche ou à sa droite.

    • left   L'élément se déplace sous l'élément flottant qui se trouve à sa gauche.

    • none   L'élément autorise les éléments flottants de tous les côtés.

    • right   L'élément se déplace sous l'élément flottant qui se trouve à sa droite.

    • inherit   L'élément hérite sa propriété clear d'un élément parent.

  • curseur
    Indique le type de curseur à afficher.  Les valeurs sont les suivantes :  

    • auto (valeur par défaut)   Le navigateur définit le curseur.

    • crosshair   Le curseur s'affiche sous forme de croix.

    • default   Curseur par défaut (généralement une flèche).

    • e-resize   Curseur utilisé pour redimensionner un élément vers la droite (est).

    • help   Curseur qui indique que l'aide est disponible (généralement un point d'interrogation).

    • move   Curseur qui indique qu'un objet peut être déplacé.

    • n-resize   Curseur utilisé pour redimensionner un élément vers le haut (nord).

    • ne-resize   Curseur utilisé pour redimensionner un élément vers l'angle supérieur droit (nord-est).

    • nw-resize   Curseur utilisé pour redimensionner un élément vers l'angle supérieur gauche (nord-ouest).

    • pointer   Le curseur s'affiche sous forme de pointeur (généralement une main).

    • progress   Curseur qui indique que le programme est en progression.

    • s-resize   Curseur utilisé pour redimensionner un élément vers le bas (sud).

    • se-resize   Curseur utilisé pour redimensionner un élément vers l'angle inférieur droit (sud-est).

    • sw-resize   Curseur utilisé pour redimensionner un élément vers l'angle inférieur gauche (sud-ouest).

    • text   Curseur utilisé pour du texte.

    • w-resize   Curseur utilisé pour redimensionner un élément vers la gauche (ouest).

    • wait   Curseur qui indique que le programme est occupé (généralement un sablier).

    • inherit   L'élément hérite sa propriété cursor d'un élément parent.

  • dépassement de capacité
    Indique ce qui se passe lorsque le contenu d'un élément dépasse sa zone.  Les valeurs sont les suivantes :  

    • auto   Les barres de défilement s'affichent seulement si le contenu est découpé.

    • hidden   Le contenu est découpé pour correspondre à l'élément et aucune barre de défilement ne s'affiche.

    • scroll   Le contenu est découpé pour correspondre à l'élément et une barre de défilement s'affiche.

    • visible (valeur par défaut)   Le contenu s'affiche même s'il se trouve en dehors de l'élément.

    • inherit   L'élément hérite sa propriété overflow d'un élément parent.

  • clip
    Les dimensions rectangulaires d'un élément.  Si l'élément est plus grand que la zone définie, il apparaît découpé pour correspondre à la zone.  Pour spécifier les dimensions, utilisez les zones top, right, bottom et left.  

  • top
    Bord supérieur du rectangle de découpage.  La spécification d'une valeur permet de sélectionner les unités dans la liste.  

  • right
    Bord droit du rectangle de découpage.  La spécification d'une valeur permet de sélectionner les unités dans la liste.  

  • bottom
    Bord inférieur du rectangle de découpage.  La spécification d'une valeur permet de sélectionner les unités dans la liste.  

  • left
    Bord gauche du rectangle de découpage.  La spécification d'une valeur permet de sélectionner les unités dans la liste.  

Autres éléments d'interface utilisateur

  • Sélecteur
    (boîte de dialogue Nouveau style uniquement) Permet d'entrer un nom de classe ou de sélectionner l'élément HTML auquel appliquer le style.  Les noms de classe doivent commencer par un point (.).  Vous pouvez également sélectionner (style intraligne), qui permet d'appliquer inline le style au texte sélectionné ou aux éléments HTML.  

  • Définir dans
    (boîte de dialogue Nouveau style uniquement) Permet de spécifier l'emplacement d'écriture de la définition de la règle de style.  Les valeurs sont les suivantes :  

    • Page active   La règle de style est écrite dans un élément style de la page active.

    • Nouvelle feuille de style   Une nouvelle feuille de style CSS, dans laquelle est écrite la règle, est ajoutée au projet.

    • Feuille de style existante   La règle de style est ajoutée à la feuille de style CSS spécifiée via la liste URL.

  • URL
    (boîte de dialogue Nouveau style uniquement) Permet de sélectionner une feuille de style CSS existante.  Cette option n'est activée que lorsque Définir dans a la valeur Feuille de style existante.  

  • Appliquer un nouveau style à la sélection de document
    (boîte de dialogue Nouveau style uniquement) Indique que le style s'applique au texte, à la classe ou à l'élément HTML sélectionné.

  • Aperçu
    Affiche un exemple de mode d'affichage de la règle de style lorsqu'elle s'applique.

  • Description
    Affiche la définition CSS de la règle de style.

Voir aussi

Working with CSS Overview