Partager via

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

  • Article

Mise à jour : novembre 2007

La page Police de la boîte de dialogue Générateur de styles vous permet de définir les attributs de police d'une feuille de style en cascade (CSS). Vous pouvez appliquer ces attributs directement aux éléments HTML ou les ajouter aux règles de style CSS.

Pour appliquer les attributs de police directement au texte des éléments HTML de votre page

  1. Ouvrez votre document HTML en mode Design dans le Concepteur HTML et sélectionnez le texte à 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 Police dans le volet gauche de la boîte de dialogue Générateur de styles.

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

Si vous appliquez des styles de police à un texte sélectionné en mode Design, les attributs du style 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 qui ont été insérés.

Pour ajouter des attributs de police à une règle de style CSS définie dans une feuille de styles 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. Cliquez sur Police dans le volet gauche de la boîte de dialogue Générateur de styles.

    La boîte de dialogue Police, 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 à un élément compris dans l'élément <BODY> d'une page Web (ou, ici, à l'élément <BODY> lui-même) en assignant le sélecteur de style CSS à l'élément en tant que propriété CLASS.

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

Tâches

Éléments d'interface

Nom de la police

  • Famille
    Fournit une liste des polices qui peuvent être utilisées pour le texte affiché dans ce style. Si vous concevez des documents pour Internet, choisissez des polices que la plupart des utilisateurs possèdent. Un public Internet varié ne disposera pas forcément sur son poste d'un vaste choix de polices installées. Si vous sélectionnez Famille, vous pouvez cliquer sur le bouton de sélection (...) adjacent afin d'ouvrir la boîte de dialogue Sélecteur de polices et sélectionner des polices. Pour plus d'informations, consultez Sélecteur de polices, boîte de dialogue. La pratique courante consiste à lister plusieurs polices, de façon à proposer un choix d'options. Par exemple, vous pouvez sélectionner Verdana (une police système Windows conçue pour l'affichage sur le Web) dans le Sélecteur de polices, puis ajouter manuellement Arial, Helvetica (pour les navigateurs Macintosh) et Sans-Serif (la police générique destinée aux utilisateurs qui ne possèdent aucune des autres polices listées). Le balisage de style CSS pour FONT-FAMILY sera donc :

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

  • Police système
    Sélectionnez cette option pour appliquer au style un choix de police système défini par l'utilisateur sur l'ordinateur qui consulte la page. Par exemple, si vous sélectionnez Titre de la fenêtre, le navigateur Web d'un utilisateur donné affichera le texte de votre page dans le format et avec la police affectés sur cet ordinateur au style Titre de la fenêtre. Cette police Titre de la fenêtre pourra être le Times sur un ordinateur et le Verdana sur un autre. Le balisage de style CSS qui applique la police système Titre de la fenêtre, par exemple, est :

    FONT: caption

Attributs de police

  • Couleur
    Définit la couleur du texte affiché dans le style. Il existe plusieurs façons de spécifier une couleur. Vous pouvez :

    • Entrez le nom d'une couleur.

    • Entrez une valeur de couleur RVB (par exemple, #FF0000 désigne la couleur rouge).

    • Sélectionnez une option dans la liste déroulante.

    • Cliquez sur le bouton de sélection (...) afin d'ouvrir la boîte de dialogue Sélecteur de couleurs et sélectionner d'autres couleurs.

    Par exemple, si vous sélectionnez le rouge (red), la paire CSS attribut/valeur suivante est insérée :

    COLOR: red

    Remarque :

    Si vous sélectionnez une couleur dans le Sélecteur de couleurs plutôt que dans la liste déroulante, la valeur hexadécimale de couleur RVB est insérée à la place du nom de la couleur. Par exemple, si vous sélectionnez le rouge (red) dans la boîte de dialogue Sélecteur de couleurs, la paire CSS attribut/valeur suivante est insérée : COLOR: #ff0000

  • Italique
    Définit l'attribut FONT-STYLE pour le texte affiché dans ce style. Sélectionnez <Non défini> (aucune option choisie), Normal (non italique) ou Italique. Par exemple, si vous sélectionnez Italique, la paire CSS attribut/valeur suivante est insérée :

    FONT-STYLE: italic

    Remarque :

    Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style. L'attribut Italics ne peut pas être appliqué aux polices système.

  • Petites majuscules
    Définit l'attribut FONT-VARIANTpour le texte affiché dans ce style. Sélectionnez <Non défini> (aucune option choisie), Normal (pas de petites majuscules) ou Petites majuscules. Par exemple, si vous sélectionnez Petites majuscules, le balisage CSS suivant est inséré :

    FONT-VARIANT: small-caps

    Remarque :

    L'attribut Small Caps ne peut pas être appliqué aux polices système. Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Taille

Cette option définit la taille de la police du style à l'aide d'un des trois attributs : Specific, Absolute ou Relative.

Remarque :

Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style. L'attribut Size ne peut pas être appliqué aux polices système.

  • Spécifique
    Définit une taille spécifique pour la police. La liste déroulante adjacente affiche des options d'unité, dont px, pt (unité par défaut), pc, mm, cm, in, em, ex ou %. Par exemple, si vous entrez 20 et acceptez l'unité par défaut, le balisage CSS suivant est inséré :

    FONT-SIZE: 20pt

    Remarque :

    Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style. Évitez d'utiliser le pixel (px) comme unité de mesure, car le texte mis en forme en pixels s'imprime avec une taille nettement plus petite que celle de l'affichage.

  • Absolue
    Définit une taille absolue pour la police, que vous pouvez choisir dans une liste d'options. Sélectionnez <Non défini> (aucune valeur spécifiée), XX-Small, X-Small, Petite, Medium, Grande, X-Large ou XX-Large. Par exemple, si vous choisissez X-Small, le balisage CSS suivant est inséré :

    FONT-SIZE: x-small

    Remarque :

    Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

  • Relative
    Définit une taille relative pour la police, que vous pouvez choisir dans une liste d'options. La taille est définie par rapport au parent dans le style en cascade. Si la taille du texte de l'élément <BODY> est de 8 pt., par exemple, et si la taille du texte de l'élément <SPAN> compris dans l'élément <BODY> est définie comme Plus petite, alors le texte de <SPAN> est de taille inférieure à 8 pt. Sélectionnez <Non défini> (aucune valeur spécifiée), Plus petite ou Plus grande. Par exemple, si vous choisissez Plus grande, le balisage CSS suivant est inséré :

    FONT-SIZE: larger

    Remarque :

    Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Effets

Cette option attribue au style des effets prédéfinis. Les cases à cocher disponibles sont les suivantes : Aucun (aucun effet), Souligné, Barré et Ligne au-dessus.

Si vous activez Aucun, aucun effet n'est disponible. Si Aucun n'est pas sélectionné, vous pouvez choisir n'importe quelle combinaison parmi les effets restants. Par exemple, si vous activez à la fois Souligné et Barré, le balisage CSS suivant est inséré :

TEXT-DECORATION: underline line-through

Gras

Cette option définit l'attribut FONT-WEIGHT en fonction de valeurs absolues ou relatives.

  • Absolue
    Règle l'attribut gras absolu pour le style sur l'attribut gras associé à la police. Sélectionnez <Non défini> (aucune option choisie), Normal (non gras) ou Gras. Par exemple, si vous choisissez Gras, le balisage CSS suivant est inséré :

    FONT-WEIGHT: bold

    Remarque :

    Les attributs Absolute Bold et Relative Bold ne peuvent pas être appliqués aux polices système.

  • Relative
    Règle l'attribut gras relatif pour le style sur un attribut gras plus ou moins gras que la valeur gras par défaut de la police. Sélectionnez <Non défini> (aucune option choisie), Plus fin (moins gras que le gras par défaut) ou Plus gras (plus gras que le gras par défaut). Comme les attributs Lighter et Bolder sont relatifs aux polices individuelles, la valeur de graisse varie en fonction de la police à laquelle elle s'applique. Par exemple, si vous choisissez Plus gras, le balisage CSS suivant est inséré :

    FONT-WEIGHT: bolder

Mise en majuscules

Définit l'attribut TEXT-TRANSFORM pour le style. Sélectionnez <Non défini> (aucune option choisie), Aucun (la mise en majuscules est en fonction de la saisie), Majuscule au début, minuscules ou MAJUSCULES. Par exemple, si vous choisissez MAJUSCULES, le code suivant est ajouté :

TEXT-TRANSFORM: uppercase

Remarque :

Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Voir aussi

Concepts

Vue d'ensemble de l'utilisation de CSS

Référence

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

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

Sélecteur de couleurs, boîte de dialogue

Sélecteur de polices, boîte de dialogue