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

Article
08/21/2008

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

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.
Cliquez sur Style dans le menu Format pour ouvrir la boîte de dialogue Générateur de styles.
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

Ouvrez une feuille de style externe existante et placez le point d'insertion entre les accolades ({ }) qui suivent le sélecteur du style souhaité.
Cliquez sur Générer un style dans le menu Styles pour ouvrir la boîte de dialogue Générateur de styles.
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