CSS Peeper – 网页设计师的新工具

简介

CSS Peeper 是一款专为网页设计师打造的 Chrome 扩展程序，可以轻松获取任何网页的 CSS 样式信息，并支持颜色拾取、字体识别、尺寸测量等功能，帮助设计师更快更准确地完成页面设计。

功能

• 获取页面 CSS 样式信息
• 支持颜色拾取功能
• 支持字体识别功能
• 支持尺寸测量功能
• 支持多语言界面

安装使用

1. 打开 Chrome 浏览器，并访问 Chrome Web Store。
2. 搜索“CSS Peeper”，进入扩展程序详情页。
3. 点击“添加至 Chrome”按钮，等待安装完成。
4. 在需要查看 CSS 样式信息的页面，点击扩展程序图标即可使用。

示例

获取页面元素的 CSS 信息，例如：颜色、字体、字号、边距、背景等，使用起来非常方便。

/* 示例代码 */
.header {
  color: #333;
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0;
  background-color: #f4f4f4;
}

使用颜色拾取器获取页面元素的颜色信息，例如：字体颜色、背景颜色等。

/* 示例代码 */
.header {
  color: #333; /* 使用拾色器选择颜色，#333 表示深灰色 */
  background-color: #f4f4f4;
}

使用测量工具获取页面元素的尺寸信息，例如：宽度、高度、边距等。

/* 示例代码 */
.header {
  width: 1000px; /* 使用测量工具获取宽度为 1000px */
  height: 60px;
  margin: 20px auto;
}

小结

CSS Peeper 是一款非常实用的 Chrome 扩展程序，为网页设计师提供了快捷的 CSS 样式信息查看、颜色拾取、字体识别、尺寸测量等功能。如需了解更多详情，请访问官方网站：CSS Peepers。