查看和更改 CSS

Kayce Basques

Sofia Emelianova

完成这些互动式教程，即可了解使用 Chrome 开发者工具查看和更改网页 CSS 的基本知识。

查看元素的 CSS

1. 右键点击下面的 Inspect me! 文本，然后选择检查。开发者工具的元素面板随即会打开。

   检查我！

2. 观察 DOM Tree 中以蓝色突出显示的 Inspect me! 元素。

   

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

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

5. 在 Elements（元素）> Styles（样式）标签页中，找到 aloha 类规则。

   “Styles”标签页会列出应用于 DOM Tree（应仍为 Inspect me! 元素）中所选元素的 CSS 规则。

6. aloha 类正在声明 padding 的值。在下面的文本框中输入此值及其单位（不带空格）。

如果您想将 DevTools 窗口固定在视口右侧（如第 1 步中的屏幕截图所示），请参阅更改 DevTools 放置位置。

向元素添加 CSS 声明

如果您想更改或向元素添加 CSS 声明，请使用样式标签页。

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

   为我们添加背景颜色！

2. 点击样式标签页顶部附近的 element.style。

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

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

向元素添加 CSS 类

您可以使用样式标签页查看向元素应用或从元素移除 CSS 类后，元素的外观如何变化。