查看和更改 CSS

凯切·巴斯克斯
Kayce Basques
索菲亚·埃梅利安诺娃
Sofia Emelianova

完成这些互动式教程,了解使用 Chrome 开发者工具查看和更改页面的 CSS 的基础知识。

查看元素的 CSS

  1. 右键点击下方的 Inspect me! 文本,然后选择检查。系统会打开开发者工具的 Elements 面板。

    检查我!

  2. 请注意 DOM 树中突出显示的蓝色 Inspect me! 元素。

    突出显示的元素。

  3. DOM 树中,找到 Inspect me! 元素的 data-message 属性的值。

  4. 请在下面的文本框中输入属性的值。

  5. Elements > Styles 窗格中,找到 aloha 类规则。

    Styles 窗格会列出对 DOM 树中当前选定的任何元素(这仍应为 Inspect me! 元素)所应用的 CSS 规则。

  6. aloha 类声明了 padding 的值。请在下面的文本框中输入此值及其单位(不含空格)。

如果您希望将开发者工具窗口停靠在视口的右侧(如第 1 步中的屏幕截图),请参阅更改开发者工具放置位置

向元素添加 CSS 声明

如果您想要更改元素或向元素添加 CSS 声明,请使用 Styles 窗格。

  1. 右键点击下方的 Add a background color to me! 文本,然后选择检查

    为我添加背景颜色!

  2. 点击 Styles 窗格顶部附近的 element.style

  3. 输入 background-color 并按 Enter 键。

  4. 输入 honeydew 并按 Enter 键。在 DOM 树中,您可以看到对元素应用了内嵌样式声明。

通过“Styles”窗格向元素添加 CSS 声明。

向元素添加 CSS 类

使用 Styles 窗格可以查看某个 CSS 类应用于某元素或从中移除时该元素的外观。

  1. 右键点击下面的 Add a class to me! 元素,然后选择检查

    为我添加课程!

  2. 点击 .cls。开发者工具会显示一个文本框,您可以在其中向所选元素添加类。

  3. Add new class 文本框中输入 color_me,然后按 Enter 键。Add new class 文本框下方会显示一个复选框,您可以通过该复选框开启和关闭该类。如果 Add a class to me! 元素已应用任何其他类,您也可以在此处切换它们。

将 color_me 类应用于元素。

向类添加伪状态

您可以使用 Styles 窗格将 CSS 伪状态永久应用于元素。开发者工具支持 :active:focus:hover:visited 等。

  1. 将鼠标悬停在下方的 Hover over me! 文字上。背景颜色会发生变化。

    将鼠标悬停在我上方!

  2. 右键点击 Hover over me! 文本,然后选择 Inspect

  3. Styles 窗格中,点击 :hov

  4. 选中 :hover 复选框。即使您实际上并未将鼠标悬停在元素上,背景颜色也会像以前一样发生变化。

切换元素的悬停伪状态。

更改元素的尺寸

Styles 窗格中使用 Box Model 互动图表可以更改元素的宽度、高度、内边距、外边距或边框长度。

  1. 右键点击下面的 Change my margin! 元素,然后选择检查

    更改我的利润率!

  2. 如需查看 Box Model,请在 Styles 窗格上的操作栏中点击 显示边栏。 Show 侧边栏 按钮。 “显示边栏”按钮。

  3. Styles 窗格的 Box Model 图表中,将鼠标悬停在内边距上。元素的内边距在视口中突出显示。 元素的内边距。

  4. 双击 Box Model 中的左边距。该元素目前还没有外边距,因此 left-margin 的值为 -

  5. 输入 100,然后按 Enter 键。 更改元素的左外边距

Box Model 默认为像素,但也接受其他值,例如 25%10vw