查看和更改 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 教程。
在新窗口或选项卡中打开 CSS 示例 演示页。
右键单击文本
Add A Background Color To Me!
,然后选择“ 检查”。单击“样式”面板顶部附近的 “
element.style
。键入
background-color
或从下拉列表中选择它,然后按 Enter。从颜色下拉列表中键入
honeydew
或选择它,然后按 Enter。 选取颜色后,应用于元素的内联样式声明将显示在 DOM 树中。声明
background-color:honeydew
使用element.style
“样式”面板的 部分应用于 元素:
将 CSS 类添加到元素
若要显示将 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) 创作。