CSS Viewer Online

CSS 查看器可用于检查和显示网页的 CSS 属性。这是一个非常巧妙实用的附加组件，允许用户将光标指向任何位置以查看 CSS 属性。它节省了大量时间，速度快，并有助于 CSS 识别。

它使我们能够在点击网页上的任何文本、按钮、图片或其他元素时立即查看所使用的 CSS 代码。它能快速整理特定网页元素的 CSS 代码。只需将鼠标指针悬停在您感兴趣的图片、文本或元素上，即可显示构成您所指向元素的 CSS 数据。然后会出现一个小的弹出窗口。

重要 CSS 查看器功能

即时悬停检查：当您将鼠标悬停在任何元素上时，CSS 属性会实时显示。

清晰的样式显示：使用字体、盒子模型和其他元素，以有序的方式呈现样式指南。

CSS 复制：方便地复制完整的 CSS 块以供重用或修改，以便使用 CSS。

计算样式：为了精确排除故障，请查看浏览器显示的最终样式。

为什么 CSS 查看器是 Web 开发人员的最佳朋友

节省时间：摆脱右键菜单和无休止的“检查元素”会话。

提高理解：查看 CSS 规则的交互和级联。

加速实验：在扩展内修改规则以即时测试 CSS 修改。

插件的好处

1. 插件或附加组件提供快速访问。
2. 它们是否与浏览器无关且跨平台兼容？
3. 可以组合不需要的项目。
4. 将系统和云存储统一到单个工作区中。

插件的缺点

1. 需要频繁更新，这可能非常耗时。
2. 特定浏览器需要定制版本的软件。
3. 它们必须能够读取甚至修改用户看到的所有网页的每个细节，这有时可能导致数据泄露、密码捕获、浏览跟踪和其他问题。

CSS 查看器扩展的键盘快捷键

每个可安装的插件和扩展都有自己独特的快捷键集。CSS 查看器快捷键是 −

1. F 用于冻结或解冻页面上出现的弹出窗口。
2. C 用于复制当前正在查看的元素的代码。
3. 要禁用扩展，用户只需按 ESC 键。

如何安装 Chrome 的 CSS 查看器扩展？

安装 CSS 查看器的方法很简单。以下是安装扩展的步骤：

步骤 1：前往 Firefox 附加组件或 Chrome 扩展程序在线商店安装扩展。扩展在网站上会显示如下。

步骤 2：根据您使用的浏览器，您现在必须点击“添加到”或“添加到 Firefox”按钮。它将看起来像这样。

扩展安装后，浏览器右上角会有一个弹出窗口。

步骤 3：现在需要使用 CSS 查看器。因此，我们必须首先通过点击图标，然后立即点击开始按钮来启动扩展。

现在，您可以将鼠标悬停在任何元素或图片上以检查其 CSS 属性。

为了更好地理解功能扩展，让我们看一个例子。

示例

在此示例中，我们有兴趣获取网站的 CSS 代码。因此，我们所要做的就是将鼠标悬停在它上面。我们这里使用的是教学点网站。在启用扩展之前，您可以查看输出。

这是我们使用扩展程序之前的网站外观；现在让我们看看当我们使用扩展程序并悬停在不同部分时它会如何变化。

当我们将鼠标悬停在页面上的任何元素上时，都会显示一个类似于上面显示的弹出窗口。此图中显示了各种 CSS 代码特性，包括字体大小、高度、颜色、背景和元素位置。您可以复制具有弹出窗口的任何特定属性的代码，该弹出窗口会在您将鼠标悬停在包含 CSS 属性的页面元素上时出现。

总结

借助名为 CSS Viewer 的扩展，开发人员可以检查他们悬停的任何网页或网站的 CSS 代码。Nicolas Huon 最初为 Firefox 网络浏览器创建了该扩展，后来又为 Chrome 网上应用店创建。该附加组件消除了开发人员搜索特定元素代码的需要，从而为他们节省了大量时间。该扩展需要访问用户数据以及一些可能导致勒索软件或数据泄露的其他权限。