查看和更改 CSS

Kayce Basques

Sofia Emelianova

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

查看元素的 CSS

1. 右键点击下面的 Inspect me! 文本，然后选择检查。此时，DevTools 的 Elements 面板会打开。

   检查我！

2. 观察 DOM 树中以蓝色突出显示的 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 类后元素的外观。

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

   请为我添加课程！

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

3. 在添加新课程文本框中输入 color_me，然后按 Enter 键。添加新类文本框下方会显示一个复选框，您可以在此处开启或关闭该类。如果 Add a class to me! 元素应用了任何其他类，您也可以在此处切换这些类。

向类添加伪状态

您可以使用样式标签页将 CSS 伪状态应用于元素。

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

   将光标悬停在我身上！

2. 右键点击 Hover over me! 文本，然后选择检查。

3. 在样式标签页中，点击 :hov。

4. 勾选 :hover 复选框。背景颜色会像之前一样发生变化，即使您实际上并未悬停在元素上也是如此。

如需了解详情，请参阅切换伪类。

更改元素的尺寸

使用样式标签页中的盒模型交互式图表，更改元素的宽度、高度、内边距、外边距或边框长度。

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

   更改我的边距！

2. 如需查看边框模型，请点击样式标签页操作栏中的 显示边栏按钮。

3. 在样式标签页的盒模型图表中，将鼠标悬停在内边距上。视口中突出显示了元素的内边距。

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

5. 输入 100 并按 Enter 键。

盒模型默认为像素，但也接受其他值，例如 25% 或 10vw。