按照本文中的交互式教程部分操作，了解使用 DevTools 查看和更改页面 CSS 的基础知识。

在新窗口或选项卡中打开 CSS 示例 演示页。若要打开示例，请右键单击链接，或者按住 适用于 Windows、Linux) 或 macOS) 的 命令 (ctrl (，然后单击该链接。

右键单击文本 Inspect Me! ，然后选择“ 检查”。

在“元素”工具下的“DOM 树”面板中，Inspect Me!突出显示了元素。

在 元素中 Inspect Me! ，找到 属性的值并将其 data-message 复制。

在页面视图中，在data-message“数据消息的值：”文本框中输入复制的值。

右键单击文本 Inspect Me! ，然后选择“ 检查”。

在 DevTools 中，在 “元素” 工具上，选择“ 样式” 面板。 元素 Inspect Me! 在“样式”面板中突出显示。

在 元素中Inspect Me!aloha，找到 类规则。 显示此规则，因为它正在应用于 Inspect Me! 元素。

aloha在 类中，找到样式的值并将其padding复制。

在页面视图上，将 padding 值粘贴到 “填充的值： ”文本框中。

如果要更改 CSS 声明或向元素添加 CSS 声明，请使用 “样式” 面板。

首先，建议执行上述 查看元素的 CSS 教程。

在新窗口或选项卡中打开 CSS 示例 演示页。

右键单击文本 Add A Background Color To Me! ，然后选择“ 检查”。

单击“样式”面板顶部附近的 “ element.style 。

从下拉列表中键入 background-color 或选择它，然后按 Enter。

从颜色下拉列表中键入 honeydew 或选择它，然后按 Enter。 选取颜色后，应用于元素的内联样式声明会显示在 DOM 树中，

声明background-color:honeydew使用element.style“样式”面板的 部分应用于 元素：

若要显示将 CSS 类应用于元素或从元素中删除 CSS 类时元素的外观，请参阅 “样式” 面板。

首先，建议执行上述 查看元素的 CSS 教程。

在新窗口或选项卡中打开 CSS 示例 演示页。

右键单击文本 Add A Class To Me! ，然后选择“ 检查”。

单击 “.cls”。 DevTools 显示一个文本框，你可以在其中将 CSS 类添加到要检查的页面元素。

color_me在“添加新类”文本框中键入，然后按 Enter。 “ 添加新类 ”文本框下方会显示一个复选框，你可以在其中打开和关闭类。 如果元素 Add A Class To Me! 已应用任何其他类，则还可以从此处切换每个类。

类color_me使用“样式”面板的 .cls 部分应用于 元素：

使用 “样式” 面板可将 CSS 伪状态永久应用于元素。 DevTools 支持 :active、 :focus、 :hover和 :visited。

首先，建议执行上述 查看元素的 CSS 教程。

在新窗口或选项卡中打开 CSS 示例 演示页。

将鼠标悬停在 Hover Over Me! 文本上。 背景色会更改。

右键单击文本 Hover Over Me! ，然后选择“ 检查”。

在 “样式” 面板中，单击“ ：hov”。

选中 “：hover ”复选框。 背景色会像第一步一样更改，即使你实际上没有将鼠标悬停在 元素上。

下一个屏幕截图显示切换元素上的 :hover 伪状态的结果。

使用“样式”面板中的“框模型”交互式关系图可以更改元素的宽度、高度、填充、边距或边框长度。

首先，建议执行上述 查看元素的 CSS 教程。

在新窗口或选项卡中打开 CSS 示例 演示页。

右键单击文本 Change My Margin! ，然后选择“ 检查”。

在“样式”面板的“框模型”关系图中，将鼠标悬停在填充上。 元素的填充在视区中突出显示。

根据 DevTools 窗口的大小，可能需要滚动到 “样式” 面板底部以显示 框模型。

双击 框模型中的左边距，该模型当前值为 -。 -表示 元素没有 的值margin-left。

键入 100px 并按 Enter。 框模型默认为像素，但它也接受其他值，例如 25%、 或 10vw。

将鼠标悬停在元素的填充上：

更改元素的左边距：

媒体查询 是一种使网站对每个用户的配置设置更改做出反应的方法。 最常见的用例是根据视区的尺寸为页面提供不同的 CSS 布局。

使用单独的布局可以针对移动设备使用单列布局，并在有更多屏幕空间可用时使用多列布局。

使用以下步骤调试或测试在 CSS 中定义的媒体查询。

若要打开 DevTools，可以在网页中右键单击，然后选择“ 检查”。

单击“ 切换设备仿真 () 按钮。 或者，当 DevTools 具有焦点时，按 Ctrl+Shift+M (Windows、Linux) 或 Command+Shift+M (macOS) 。

打开设备工具栏后，单击右上角的 “...” 菜单，然后选择“ 显示媒体查询”：

网页上方的彩色条表示不同的媒体查询。

将鼠标悬停在条形图的边界上以显示不同媒体查询的值。 单击每个媒体查询值以调整网页大小以匹配。

若要调试媒体查询并在 源 编辑器中打开 CSS 文件，请右键单击条形线段，然后选择“ 在源代码中显示”：

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 创作。

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。