网站CSS样式表查询插件CSS Peeper

CSS Peeper插件是一款为设计师们提供的可视化网页css样式表查询插件，这款插件可以让设计师专注于设计，并花费尽量少的时间查询代码。对于设计师们来讲，查询和挖掘网页代码及css样式是最浪费时间费力的事了，目前有了这款CSS Peeper插件你可以节省更多时间去专注于页面的设计。

插件介绍：

对于网站制作或开发者来讲，想要改变用户网页浏览体验一般会从参考其他网站建设著手，发现很好的网站都会去看一下原始码或样式表，然而挖掘网页代码并检查CSS样式和其他相邻元素可能被证明是任何网页设计人员最耗时和可能烦人的事情之一。虽然 谷歌 Chrome 本身就有强大的开发职员工具可以用，但假如遇见要查看某个网页用的字型或色彩时还要借用工具才会愈加的便捷。

今天大家要推荐的CSSPeeper是一款既聪明又功能明确的谷歌 Chrome插件，假如你是设计师、需要时常去浏览其他网站的话，应该会感觉它几乎为你量身定制！CSSPeeper让用户以简单、有组织性、更漂亮方法去检查网站样式和各种元件，比如以视觉化方法迅速列出网站的色彩搭配、查询各部分用的字型、字体大小、行高、对齐方向和颜色，还能迅速汇出页面中的所有图片。

css peeper用法：

1.CSS Peeper插件的安装办法很简单，在本站或者官方网站都可以下载CSS Peeper插件，离线安装CSS Peeper插件的办法参照：chrome插件的离线安装办法。最新chrome浏览器下载地址：http://chromecj.com/category/chrome/。

2.插件安装成功后，在Chrome 工具栏上，便会出现这个 P 字的小标志。比如我以chrome插件网站做测试，点选 CSSPeeper 后会开启网站图示、标题和内文字型、CSS 档案大小和载入时间，点选下方按钮可切换至不同功能。

3、我觉得 CSSPeeper最好使的就是迅速列出该页面用的所有色彩包含 Hex 值，对于想了解某个页面主要用那些色系来讲非常便利，而且也不太需要去挖掘 CSS 样式表，除去列出数值外，还直接呈现色彩预览，点选后会自动复制颜色代码。假如点开工具的第二个颜色的图标，则可以看到网页的所有色彩搭配信息。鼠标悬浮到颜色上，可以迅速复制颜色的 Hex 值。

4、CSSPeeper 核心功能应该是Inspector，当你在 CSSPeeper 开启状况下点选网页中的文字、链结、栏位或按钮，就会侦测出该元件的样式名字、长宽、字型、字体大小、行高、对齐方向及颜色等资讯，对于想了解网页中某个元件的属性非常便利。

5、点开第三个相机按钮时，你可以看到很多图片。一般图片是背景图时，也会没办法右击保存，但 CSS PEEPER 却可以加载出所有些图片资源。鼠标悬浮上会出现图片的基本信息。大家点击 EXPORT（导出），图片即开始被下载。将来不管多难右击另存为的图，你都可以轻松收入囊中啦。

TAG标签：chrome插件(2)CSSPeeper(1)

转载请说明来源于谷普下载站（https://www.muerya.com）

本文地址：https://www.muerya.com

郑重声明：文章来源于网络作为参考，本站仅用于分享不存储任何下载资源,如果网站中图片和文字侵犯了您的版权，请联系我们处理！邮箱3450399331@qq.com