通过右键单击网页并选择“检查”打开网络开发者工具，再点击“样式”选项卡，启用“显示 css 工具栏”，即可调出 css 工具栏。该工具栏提供以下功能：编辑 css 代码、选择 html 元素、查看样式继承、查看已定义变量和搜索 css 规则。

如何调出 CSS 工具栏

调出 CSS 工具栏非常简单，只需按照以下步骤操作即可：

1. 打开 Chrome 浏览器：

• 确保您使用的是 Chrome 浏览器，因为该工具栏是 Chrome 独有的功能。

2. 打开“网络开发者工具”：

立即学习“前端免费学习笔记（深入）”；

• 右键单击网页上的任意位置，然后从菜单中选择“检查”。
• 或者，您可以使用键盘快捷键 Ctrl + Shift + I（Windows）或 Cmd + Option + I（Mac）来打开“网络开发者工具”。

3. 查找“样式”选项卡：

• 在打开的“网络开发者工具”面板中，查找并单击“样式”选项卡。

4. 启用 CSS 工具栏：

• 在“样式”选项卡的右上角，您会看到三个垂直排列的点。单击这些点，然后从出现的菜单中选择“显示 CSS 工具栏”。

CSS 工具栏现在将出现在“网络开发者工具”面板的顶部。

CSS 工具栏功能

CSS 工具栏提供以下功能：

• 查看和编辑 CSS 代码：您可以直接在工具栏中编辑 CSS 代码，并实时查看更改。
• 选择 HTML 元素：单击工具栏中的元素选择器，然后单击网页上的元素以查看其 CSS 规则。
• 查看样式继承：您可以查看元素从父元素和祖先元素继承的样式。
• 查看已定义的变量：如果您启用了 CSS 自定义属性（变量），您可以在工具栏中查看其值。
• 搜索 CSS 规则：您可以使用工具栏中的搜索框搜索特定的 CSS 规则或属性。