Créer et appliquer un style

Important :  Cet article a été traduit automatiquement, voir l’avertissement. Vous pouvez consulter la version en anglais de cet article ici.

Un style est un ensemble de caractéristiques de mise en forme qui sont définies dans une feuille de style en cascade (CSS). Vous pouvez appliquer des styles aux éléments d'une page Web, notamment au texte (caractères individuels ou paragraphes entiers), aux graphiques, aux couches, aux tableaux et même au corps de la page Web tout entière. Les styles vous permettent de réutiliser efficacement un ensemble de propriétés et de valeurs sans avoir à définir ces propriétés à chaque fois que vous voulez les utiliser.

On parle de styles en cascade pour une feuille de style en cascade dans la mesure où des règles de style globales s'appliquent aux éléments HTML sauf si elles sont remplacées par des règles de style locales. En général, les règles de style locales sont prioritaires sur les règles de style générales. Par exemple, un style défini dans une feuille de style en cascade interne d'une page Web remplace un style défini dans une feuille de style externe. De la même façon, une feuille de style en cascade intraligne définie au sein d'un élément HTML de la page Web remplace les styles définis pour ce même élément dans la feuille de style interne ou externe de la page Web. Les parties des règles de style globales qui ne sont pas contredites par des règles de style locales s'appliquent aux éléments HTML même lorsque des styles locaux sont appliqués.

Contenu de cet article

Types de styles

Créer un style

Appliquer un style

Types de styles

Un style qui se trouve dans une feuille de STYLE interne ou externe peut être classe, élément ou id. Un style est défini par son ensemble de règles, qui comprend un sélecteur, suivi d’un bloc de déclarations de propriété qui apparaissent entre une accolade ouvrante ({}) et une accolade fermante (}). Chaque type de style se distingue des autres types de styles par son sélecteur ; un point (.) précède le sélecteur d’un style de classe ; un signe dièse (#) précède le sélecteur d’un style basé sur id ; et le sélecteur d’un style basé sur un élément se compose uniquement d’un élément HTML, telles que l’élément H1.

Styles de classe

Styles de classe permet de définir un ensemble de propriétés que vous voulez utiliser sur un ou plusieurs éléments dans une page Web. Si vous voulez modifier le style, vous pouvez modifier la règle de style ensemble et chaque élément que vous avez appliqué le style reflètent automatiquement les modifications.

Dans l'exemple suivant, « introduction » est le sélecteur du style et « font-size: small » est une déclaration de propriété, suivie d'une deuxième déclaration de propriété.

Exemple d'ensemble de règles pour un style de classe

.introduction {font-size: small; color: white}

Exemple de style de classe appliqué à une balise <p>

<p class="introduction">

Styles d'élément

Utilisez des styles d'élément pour définir un ensemble de propriétés que vous voulez appliquer à chaque instance d'un élément HTML spécifique dans une page Web. Par exemple, pour créer une marge de 25 pixels autour de tous les paragraphes (contenu entouré de balises <p>) de votre page Web, vous pouvez créer un style d'élément qui utilise l'élément p comme sélecteur et qui contient des déclarations de propriétés de marge, comme le montre le code suivant.

Exemple d'ensemble de règles pour un style d'élément

p { margin-left: 25px; margin-right: 25px }

Styles d'ID

Utilisez un style d'ID lorsque vous voulez définir un ensemble de propriétés pour un élément ou un bloc d'éléments unique que vous voulez distinguer du reste du contenu dans une ou plusieurs pages Web. Utilisez aussi un style d'ID lorsque vous voulez mettre en forme un élément HTML unique dans une page Web.

Exemple d'ensemble de règles pour un style d'ID

#footer {background-color: #CCCCCC; margin: 15px}

Exemple d’un style basé sur id appliqué à une balise < p >

<p id="footer">

Styles intralignes

Utilisez un style intraligne lorsque vous souhaitez définir un ensemble de propriétés pour un seul élément ou un bloc d’éléments dans une page Web et ne voulez pas réutiliser ce style. Contrairement aux styles basée sur les id, basée sur l’élément et classe, dont les propriétés définies dans la section Administration centrale d’une page Web (CSS interne) ou dans un fichier CSS externe, les propriétés d’incorporation styles (ou CSS intraligne) est définie directement dans l’élément HTML que vous souhaitez utiliser le style.

Exemple d'ensemble de règles pour un style intraligne

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Haut de la Page

Créer un style

Vous pouvez créer un nouveau style de toutes pièces ou en copiant un style existant. Dans les deux cas, la boîte de dialogue Nouveau style vous permet de définir tout ce qui concerne votre style, y compris le type de sélecteur, les propriétés et la feuille de style qui va contenir le style. Lorsque vous voulez créer un nouveau style intraligne, vous pouvez aussi utiliser le volet Office Propriétés CSS. Lorsque vous voulez créer et appliquer rapidement un nouveau style dans votre page sans définir de propriétés pour ce style, vous pouvez également utiliser la barre d'outils Style.

Créer un style à l’aide de la boîte de dialogue Nouveau Style

  1. Exécutez l’une des procédures suivantes :

    • Pour ajouter un style à une feuille de style en cascade externe, ouvrez le fichier .css.

    • Pour ajouter un style à une feuille de style en cascade interne, ouvrez la page Web.

    • Pour ajouter un style intraligne, ouvrez la page Web, puis sélectionnez le contenu auquel vous voulez appliquer le style.

  2. Exécutez l’une des procédures suivantes :

    • Pour créer un nouveau style    Cliquez sur Nouveau Style dans un de ces emplacements : le volet Office Appliquer les Styles ou Gérer les styles, le Style de la barre d’outils ou le menu Format.

    • Pour copier un style existant    Effectuez l’une des opérations suivantes :

      • Dans le volet Office Appliquer les styles, pointez sur le style à copier, cliquez sur la flèche vers le bas qui s'affiche, puis sélectionnez Copie du nouveau style.

      • Dans le volet Office Gérer les styles ou Propriétés CSS, cliquez avec le bouton droit sur le style à copier, puis sélectionnez Copie du nouveau style.

  3. Dans la boîte de dialogue Nouveau style, procédez comme suit :

Utilisez cette option

Pour

Sélecteur

  • Pour utiliser un sélecteur de classe, tapez un point (.) suivi par un nom unique.

  • Pour utiliser un sélecteur d’id, tapez un signe dièse (#) suivi d’un nom unique.

    Remarque : Les noms de sélecteurs de classe et d'ID ne peuvent pas contenir d'espaces sauf s'il s'agit d'un sélecteur complexe.

  • Pour utiliser un sélecteur d’élément, tapez le nom d’un élément HTML ou cliquez sur la zone de liste déroulante sélecteur et sélectionnez un nom d’élément.

  • Pour utiliser un sélecteur intraligne, sélectionnez style intraligne.

  • Pour créer un sélecteur complexe, tapez le code correspondant.

Définir dans

Sélectionnez l'une des options suivantes :

  • Page active ajoute le nouveau style à la CSS interne dans la page Web en cours.

  • Nouvelle feuille de style ajoute le nouveau style à une CSS externe vierge.

  • Feuille de style existante ajoute le nouveau style à la feuille de style en cascade externe existante que vous spécifiez.

Appliquer un nouveau style à la sélection de document

Appliquez le style à la sélection active dans la page Web active.

URL

Si vous avez sélectionné Feuille de style existante dans Définir dans, entrez l'URL du fichier .css.

Catégorie

Sélectionnez l'une des catégories suivantes, puis définissez les propriétés qui s'affichent à droite de la boîte de dialogue :

Conseil : Catégories qui apparaissent en gras dans la liste catégorie contiennent des propriétés définies.

  • Police définit les propriétés de police, taille, épaisseur, décoration et la couleur.

  • Bloc définit la hauteur de ligne, alignement du texte, mise en retrait et l’espacement du texte.

  • Arrière-plan définit l’arrière-plan couleur et arrière-plan propriétés de l’image.

  • Bordure définit une bordure et ses propriétés.

  • Zone définit les propriétés de remplissage et de marge des éléments au niveau du bloc zone et.

  • Position définit les dimensions et la position des éléments au niveau du bloc zone et.

  • Mise en page définit la visibilité, flottants et le comportement, découpage et autres propriétés de disposition des éléments au niveau du bloc zone et d’habillage.

  • Liste définit les propriétés des éléments de liste, y compris le type, la position et image.

  • Tableau définit les propriétés des éléments liés aux tableaux, y compris les propriétés d'espacement, de disposition et de bordure.

Remarque : Vous pouvez également copier un style d'une feuille de style en cascade à une autre. Dans le volet Office Gérer les styles, faites glisser le style depuis la feuille de style en cascade dans laquelle il se trouve vers le nom de la feuille de style dans laquelle vous voulez le copier ou vers un point particulier de la liste de styles dans la feuille de style cible.

Créer un style intraligne en utilisant le volet de tâches Propriétés CSS

  1. En mode Création ou Code, dans votre page Web, sélectionnez le contenu que vous voulez ajouter un style intraligne.

  2. Dans le volet Office Propriétés CSS, sous Règles appliquées, cliquez avec le bouton droit sur le sélecteur auquel vous voulez appliquer le style intraligne ou, si « (aucune règle appliquée) » s'affiche, cliquez avec le bouton droit n'importe où sous Règles appliquées, puis cliquez sur Nouveau style intraligne dans le menu contextuel.

  3. Sous Propriétés CSS, définissez les propriétés souhaitées.

Créer et appliquer un nouveau style non défini

Vous pouvez créer des styles et les appliquer aux éléments et puis définir les styles ultérieurement. Par exemple, si vous voulez travailler avec un designer pour créer l’aspect de votre page, vous pouvez appliquer des styles non définis pour les éléments dans votre page, puis réunir vers le bas avec le concepteur pour définir les styles ultérieurement.

  1. En mode Création ou Code, dans votre page Web, sélectionnez l’élément que vous voulez appliquer un style.

  2. Pour créer et appliquer un nouveau style sans définir de propriétés, dans la barre d'outils Style, dans la zone Classe ou dans la zone Identificateur, tapez un nom unique pour le nouveau style.

Haut de la Page

Appliquer un style

Vous pouvez utiliser le volet Office Appliquer les styles, le volet Office Gérer les styles ou la barre d'outils Style pour appliquer des styles de classe ou d'ID à partir de vos feuilles de style en cascade (CSS) internes et externes. Le volet Office Appliquer les styles vous permet d'appliquer plusieurs styles à une sélection, tandis que le volet Office Gérer les styles et la barre d'outils Style ne permettent d'appliquer qu'un seul style. La barre d'outils Style vous permet de nommer et d'appliquer rapidement de nouveaux styles non définis à votre page.

Il est inutile d'appliquer les styles qui utilisent un élément en tant que sélecteur (les styles d'élément), car ces types de styles sont automatiquement appliqués à l'élément auquel ils sont associés dans toute la page Web. Le volet Office Appliquer les styles répertorie les styles d'élément sous Sélecteurs contextuels et, tout comme le volet Office Gérer les styles, affiche un point bleu en regard du nom du style. La barre d'outils Style ne répertorie pas les styles d'élément.

  1. En mode Création ou Code, dans votre page Web, sélectionnez l’élément que vous voulez appliquer un style.

  2. Exécutez l’une des procédures suivantes :

    • Pour appliquer plusieurs styles existants    Dans le volet Office Appliquer les Styles, appuyez sur CTRL pendant que vous cliquez sur chaque style qui vous intéresse.

    • Pour appliquer un style existant unique    Effectuez l’une des opérations suivantes :

      • Dans le volet Office Appliquer les styles, cliquez sur le style de classe ou d'ID de votre choix.

      • Dans la barre d'outils Style, dans la zone déroulante Classe ou Identificateur, cliquez sur le style de votre choix.

      • Dans le volet Office Gérer les styles, cliquez avec le bouton droit sur le style de classe ou d'ID de votre choix, puis cliquez sur Appliquer le style dans le menu contextuel.

    • Créer et appliquer un nouveau style sans définir les propriétés    Dans la barre d’outils Style, dans la zone le cours ou l’ID, tapez un nom unique pour le nouveau style.

Haut de la Page

Remarque : Avertissement traduction automatique : cet article a été traduit par un ordinateur, sans intervention humaine. Microsoft propose cette traduction automatique pour offrir aux personnes ne maîtrisant pas l’anglais l’accès au contenu relatif aux produits, services et technologies Microsoft. Comme cet article a été traduit automatiquement, il risque de contenir des erreurs de grammaire, de syntaxe ou de terminologie.

Développez vos compétences
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoignez le programme Office Insider

Ces informations vous ont-elles été utiles ?

Nous vous remercions pour vos commentaires.

Merci pour vos commentaires. Il serait vraisemblablement utile pour vous de contacter l’un de nos agents du support Office.

×