Afficher et modifier le CSS

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Suivez ces tutoriels interactifs pour découvrir les principes de base de l'affichage et de la modification du CSS d'une page à l'aide des outils pour les développeurs Chrome.

Afficher le code CSS d'un élément

  1. Effectuez un clic droit sur le texte Inspect me! ci-dessous, puis sélectionnez Inspecter. Le panneau Éléments des outils pour les développeurs s'ouvre.

    Inspectez-moi !

  2. Observez l'élément Inspect me! en surbrillance bleue dans l'arborescence DOM.

    Élément mis en surbrillance.

  3. Dans l'arborescence DOM, recherchez la valeur de l'attribut data-message de l'élément Inspect me!.

  4. Saisissez la valeur de l'attribut dans la zone de texte ci-dessous.

  5. Dans l'onglet Éléments > Styles, recherchez la règle de classe aloha.

    L'onglet Styles liste les règles CSS appliquées à l'élément sélectionné dans l'arborescence DOM, qui devrait toujours être l'élément Inspect me!.

  6. La classe aloha déclare une valeur pour padding. Saisissez cette valeur et son unité sans espaces dans la zone de texte ci-dessous.

Si vous souhaitez ancrer la fenêtre DevTools à droite de votre fenêtre d'affichage, comme sur la capture d'écran de l'étape 1, consultez Modifier l'emplacement de DevTools.

Ajouter une déclaration CSS à un élément

Utilisez l'onglet Styles lorsque vous souhaitez modifier ou ajouter des déclarations CSS à un élément.

  1. Effectuez un clic droit sur le texte Add a background color to me! ci-dessous, puis sélectionnez Inspecter.

    Ajoutez-moi une couleur d'arrière-plan !

  2. Cliquez sur element.style en haut de l'onglet Styles.

  3. Saisissez background-color et appuyez sur Entrée.

  4. Saisissez honeydew et appuyez sur Entrée. Dans l'arborescence DOM, vous pouvez constater qu'une déclaration de style intégrée a été appliquée à l'élément.

Ajouter une déclaration CSS à l'élément via l'onglet "Styles"

Ajouter une classe CSS à un élément

Utilisez l'onglet Styles pour voir à quoi ressemble un élément lorsqu'une classe CSS lui est appliquée ou supprimée.

  1. Effectuez un clic droit sur l'élément Add a class to me! ci-dessous, puis sélectionnez Inspecter.

    Ajoutez-moi à un cours !

  2. Cliquez sur .cls. DevTools affiche une zone de texte dans laquelle vous pouvez ajouter des classes à l'élément sélectionné.

  3. Saisissez color_me dans la zone de texte Add new class (Ajouter une classe), puis appuyez sur Entrée. Une case à cocher s'affiche sous la zone de texte Ajouter une classe, dans laquelle vous pouvez activer ou désactiver la classe. Si d'autres classes ont été appliquées à l'élément Add a class to me!, vous pouvez également les activer ou les désactiver à partir de cet emplacement.

Application de la classe color_me à l'élément.

Ajouter un pseudo-état à une classe

Utilisez l'onglet Styles pour appliquer un pseudo-état CSS à un élément.

  1. Pointez sur le texte Hover over me! ci-dessous. La couleur d'arrière-plan change.

    Pointez sur moi !

  2. Effectuez un clic droit sur le texte Hover over me!, puis sélectionnez Inspecter.

  3. Dans l'onglet Styles, cliquez sur :hov.

  4. Cochez la case :hover. La couleur d'arrière-plan change comme avant, même si vous ne pointez pas sur l'élément.

Activation/Désactivation du pseudo-état "pointeur sur l'élément"

Pour en savoir plus, consultez Activer/Désactiver une pseudo-classe.

Modifier les dimensions d'un élément

Utilisez le diagramme interactif du modèle de boîte dans l'onglet Styles pour modifier la largeur, la hauteur, la marge intérieure, la marge extérieure ou la longueur de la bordure d'un élément.

  1. Effectuez un clic droit sur l'élément Change my margin! ci-dessous, puis sélectionnez Inspect (Inspecter).

    Modifier ma marge

  2. Pour afficher le modèle de boîte, cliquez sur le bouton Afficher la barre latérale. Afficher la barre latérale dans la barre d'action de l'onglet Styles. Bouton "Afficher la barre latérale".

  3. Dans le diagramme du modèle de boîte de l'onglet Styles, pointez sur padding (marge intérieure). La marge intérieure de l'élément est mise en surbrillance dans la fenêtre d'affichage. Marge intérieure de l'élément.

  4. Double-cliquez sur la marge de gauche dans le modèle de boîte. L'élément n'a actuellement pas de marges. Par conséquent, margin-left a la valeur -.

  5. Saisissez 100, puis appuyez sur Entrée. Modification de la marge gauche de l'élément.

Par défaut, le modèle de boîte utilise des pixels, mais il accepte également d'autres valeurs, telles que 25% ou 10vw.