CSS查看器:CSSViewer

发布时间: 编辑:CINDY 2人评论 52555次浏览 Chrome开发者工具插件
直达下载
摘要 : CSSViewer是一款可以自由查看当前网页中元素CSS的详细属性的谷歌浏览器插件。

CSSViewer的开发背景

网页的开发者在设计一个网页的时候,如果使用的CSS是一些公共库,比如jQuery UI,bootstrap等库的时候,需要大量的公共库CSS名称,如果用户只是参照API的话,在查看了大量API会浪费很多时间,如果给用户一个DEMO的页面,让用户自由查看该页面中的元素CSS,就可以让用户迅速地模仿和使用这些公共库,从而达到加快开发速度的目的。

CSSViewer的简介

CSSViewer是一款可以帮助用户快速查看当前的网页元素的CSS属性的谷歌浏览器插件,在Chrome中安装了CSSViewer插件以后,用户就可以在设计网页的时候,快速地模仿网页中某个元素的表现形式,这对于一些使用公共库的开发者来说会大大地节约开发时间(寻找api的时间),用户只需要把鼠标放在元素上就可以快速地查看该元素的具体CSS属性。

CSSViewer的使用方法

1.在谷歌浏览器中安装CSSViewer插件,并在Chrome的扩展器中启动CSS查看器的功能,CSSViewer插件的下载地址可以在本文的下方找到,离线CSSViewer插件的安装方法可参考:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件? 最新谷歌浏览器离线安装版可以从这里下载:https://huajiakeji.com/chrome/2014-09/177.html

2.点击Chrome右上角的CSSViewer插件按钮,这时候,用户就可以把鼠标在网页中进行浮动,从而找到需要看到的CSS属性,当用户浮动到一个元素上的时候,CSSViewer插件会自动以弹出窗口的形式,提醒用户该元素的详细CSS内容,包括字体大小、CSS类名、背景颜色、宽度、高度等,如图所示:

CSSViewer查看器:CSSViewer

CSSViewer的注意事项

1.CSSViewer查看器只能查询到当前网页元素的CSS元素属性,对于网页中的Javascript无法进行查看到,有脚本多元素进行CSS影响时,CSSViewer插件也无法检测到变化。

2.用户需要先点击Chrome右上角的CSSViewer插件按钮,才能启动CSS的观察模式,再次点击就可以取消。

CSSViewer的联系方式

1.作者:M.ed。

查看更多

CSS查看器:CSSViewer下载地址

点击下载CSS查看器:CSSViewer

转载必须注明来自:https://huajiakeji.com/web-development/2015-05/456.html

SelectorGadget

SelectorGadget

0 人评论 26588 次人浏览 4.5分 4.5 分
Chrome浏览器的一款插件,安装这个扩展插件后,能够为复杂网站的元素生成CSS选择器,有助于帮助你快速找到html的节点信息.
JetBrains IDE Support

JetBrains IDE Support

0 人评论 75935 次人浏览 3.7分 3.7 分
JetBrains IDE Support是一款webstorm网页开发调试工具,支持HTML/CSS/JavaScript编辑和JavaScript调试。
CSSPeeper

CSSPeeper

0 人评论 23325 次人浏览 3.6分 3.6 分
CSSPeeper是一款专为设计师量身打造的可视觉化网站CSS样式表检查插件。
CSS Used插件v2.4.2

CSS Used插件v2.4.2

0 人评论 5382 次人浏览 3.0分 3.0 分
CSS Used 插件是一款用于提取所选元素及其子元素使用的CSS规则的插件,适用于按钮等小组件提取。
Stylish插件V2.0.9

Stylish插件V2.0.9

0 人评论 10629 次人浏览 3.0分 3.0 分
Stylish插件是一款非常知名的能为网站定制各种各样的主题的浏览器网站主题样式修改工具,Stylish插件为世界各地的网站和Web应用提供主题和皮肤,支持自定义修改、CSS编辑器创建主题。
Amino: Live CSS Editor

Amino: Live CSS Editor

0 人评论 9261 次人浏览 3.0分 3.0 分
Amino: Live CSS Editor是Chrome浏览器扩展程序,用于编写可持久保存的用户CSS。使网络成为您想要的!
css荧光搜索框特效代码下载

css荧光搜索框特效代码下载

0 人评论 4430 次人浏览 1.6分 1.6 分
这一款CSS3发光搜索表单,利用CSS3的动画属性,设置0%和100%时的颜色样式,让其渐变,再配合有明显对比的背景,就能模拟出发光的效果了
评论:(2)

已有 2 位网友发表了一针见血的评论,你还等什么?