通过右键单击网页并选择“检查”打开网络开发者工具，再点击“样式”选项卡，启用“显示 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 规则或属性。
