查看和更改 CSS 入门

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

查看元素的 CSS

在新窗口或选项卡中打开 CSS 示例演示页。 (若要在新窗口或选项卡中打开链接，请右键单击链接。或者，按住 Ctrl (for Windows、Linux) 或 macOS) 命令 (，然后单击 link.)
右键单击文本 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 布局。

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

若要调试或测试在 CSS 中定义的媒体查询，请执行以下操作：

在新窗口或选项卡中打开 CSS 示例演示页。
若要打开 DevTools，请在网页中右键单击，然后选择“ 检查”。
单击“ 切换设备仿真 () 按钮。或者，当 DevTools 具有焦点时，按 Ctrl+Shift+M (Windows、Linux) 或 Command+Shift+M (macOS) 。

设备工具栏将在网页中打开，网页现在呈现在“设备仿真”窗格中：
打开设备工具栏后，单击右上角的“ 更多选项 ” (“ ) 按钮，然后选择“ 显示媒体查询”：

网页上方的彩色条表示不同的媒体查询。
将鼠标悬停在条形图中的边界上可显示不同媒体查询的值。单击每个媒体查询值以调整网页大小以匹配。
若要打开包含媒体查询的 CSS 文件并编辑其源代码，请右键单击其中一个彩色条形图，然后选择“ 在源代码中显示”。 “ 源” 工具随即出现，CSS 文件中突出显示了相应的媒体查询：

注意

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