Partager via


Contours, boîte de dialogue Générateur de style

Mise à jour : novembre 2007

La page Contours de la boîte de dialogue Générateur de style vous permet de définir les attributs de style de la feuille de style en cascade (CSS) qui déterminent la bordure et les marges de la zone encadrant un élément HTML. Vous pouvez appliquer ces attributs directement aux éléments HTML ou les ajouter aux règles de style CSS.

Pour appliquer des attributs de contour directement à un élément HTML de votre page

  1. Ouvrez votre document HTML en mode Design du Concepteur HTML et utilisez la fenêtre Structure du document pour sélectionner un élément à mettre en forme.

  2. Cliquez sur Style dans le menu Format pour ouvrir la boîte de dialogue Générateur de styles.

  3. Sélectionnez Contours dans le volet gauche de la boîte de dialogue Générateur de styles.

    La boîte de dialogue Contours, Générateur de styles apparaît dans le volet droit.

Lorsque vous mettez en forme des éléments sélectionnés en mode Design, les attributs de style CSS sont insérés en ligne dans le code HTML de votre page. Passez en mode HTML afin de vérifier les nouveaux attributs de style CSS qui ont été insérés.

Pour ajouter des attributs de contour à un style CSS défini dans une feuille de style externe

  1. Ouvrez une feuille de style externe existante et placez le point d'insertion entre les accolades ({ }) qui suivent le sélecteur du style souhaité.

  2. Cliquez sur Générer un style dans le menu Styles pour ouvrir la boîte de dialogue Générateur de styles.

  3. Sélectionnez Contours dans le volet gauche de la boîte de dialogue Générateur de styles.

    La boîte de dialogue Contours, Générateur de styles apparaît dans le volet droit.

Remarque :

Le menu Styles apparaît lorsque vous ouvrez une feuille de style CSS externe pour la modifier. Dans le menu Styles, l'option Générer un style devient disponible lorsque vous placez le point d'insertion entre les accolades qui suivent le sélecteur d'une règle de style.

Une classe de style CSS définie dans une feuille de style externe peut être appliquée à la plupart des éléments placés dans l'élément <BODY> d'une page Web en affectant le sélecteur de style CSS comme propriété CLASS de l'élément.

Les options disponibles dans la page Marges de la boîte de dialogue du Générateur de styles sont les suivantes.

Tâches

Éléments d'interface

Marges

Définit les attributs qui contrôlent la distance entre la zone rectangulaire encadrant un élément et les autres éléments. Entrez des valeurs dans un ou plusieurs des champs (Haut, Bas, Gauche ou Right) et sélectionnez une option d'unité : px (valeur par défaut), pt, pc, mm, cm, in, em, ex ou %. Par exemple, si vous entrez 50 dans les champs Haut et Bas, puis acceptez l'option d'unité par défaut, le balisage CSS suivant est inséré :

MARGIN-TOP: 50px; margin-bottom:50px

Remarque :

Les valeurs des marges peuvent être positives ou négatives.

Remplissage

Définit les attributs qui contrôlent la quantité d'espace entre un élément et ses marges ou, le cas échéant, entre un élément et sa bordure. Entrez des valeurs dans un ou plusieurs des champs (Haut, Bas, Gauche ou Droit) et sélectionnez une option d'unité : px (valeur par défaut), pt, pc, mm, cm, in, em, ex ou %. Par exemple, si vous entrez 50 dans les champs Haut et Bas, puis acceptez l'option d'unité par défaut, le balisage CSS suivant est inséré :

PADDING-TOP: 50px; PADDING-BOTTOM:50px

Remarque :

Les valeurs de Remplissage doivent être positives.

Bordures

Les attributs suivants contrôlent la bordure de la zone rectangulaire qui entoure un élément.

  • Sélectionner le bord à modifier
    Définit le contour de bordure à mettre en forme. Sélectionnez Tout, Haut, Bas, Gauche ou Droit. Aucun code n'est ajouté au style tant que vous n'avez pas sélectionné un style de bordure.

  • Style
    Définit le style à appliquer à la bordure spécifiée. Sélectionnez <Non défini>, Aucune, Ligne pleine, Ligne double, Ligne en creux, Ligne en relief, Incrusté ou Sortant. Par exemple, si vous sélectionnez Haut pour le bord sélectionné et Ligne pleine pour le style, le code suivant est ajouté :

    BORDER-TOP-STYLE:solid

  • Largeur
    Définit la largeur de bordure spécifiée. Sélectionnez <Non défini> (aucune option choisie), Fine, Moyenne, Épaisse ou Personnalisée. Si vous sélectionnez Personnalisée, les champs adjacents sont disponibles et vous pouvez y saisir un nombre et sélectionner une option d'unité : px (valeur par défaut), pt, pc, mm, cm, in, em , ex ou %. Par exemple, si vous sélectionnez Haut pour le bord sélectionné, Ligne pleine pour le style et Personnalisée pour la largeur, tapez 50 dans le champ, puis acceptez l'option d'unité par défaut. Le code suivant est alors ajouté :

    BORDER-TOP:50px solid

  • Couleur
    Définit la couleur de la bordure sélectionnée dans le style. Sélectionnez une couleur dans la liste déroulante ou cliquez sur le bouton de sélection (...) pour ouvrir la boîte de dialogue Sélecteur de couleurs et sélectionner d'autres couleurs. Par exemple, si vous sélectionnez Haut pour le bord sélectionné, Ligne pleine pour le style et Bleu pour la couleur, le code suivant est ajouté :

    BORDER-TOP:blue solid

Voir aussi

Concepts

Vue d'ensemble de l'utilisation de CSS

Référence

Arrière-plan, boîte de dialogue Générateur de styles

Police, boîte de dialogue Générateur de styles

Texte, boîte de dialogue Générateur de styles

Position, boîte de dialogue Générateur de styles

Disposition, boîte de dialogue Générateur de styles

Listes, boîte de dialogue Générateur de style

Autre, boîte de dialogue Générateur de style

Sélecteur de couleurs, boîte de dialogue