Code Cola,CSS样式可视化Chrome插件,即时修改浏览器网页效果

Code Cola是一个能够查看网页代码样式的可视化CSS样式chrome扩展插件。

Code Cola是一个能够查看网页代码样式的可视化CSS样式chrome扩展插件


在浏览原生网页的时候,是无法对网页设计就行修改的,但也会遇到需要调整当前网页布局、更改展示样式的情况,这种时候就可以借助这款chrome扩展插件——Code Cola。


Code Cola
开发者工具插件2021-12-214.7
Code Cola是一个可视化编辑在线页面css样式的chrome插件。
直达下载


扩展功能


Code Cola扩展程序提供给用户查看网页版块中所有元素的功能,并支持通过配置到服务器上的文件进行在线编辑。包括网页颜色、网页背景、网页遮罩、文字阴影、字体字号行高等,修改后能在浏览器内实时展示修改效果,但这并不是直接修改原网页,而是对当前页面进行即时展示处理。


下载安装


通过当前页面下载Code Cola离线安装包,打开扩展程序内的开发者模式,将解压后的crx文件拖拽至扩展程序管理,选择添加扩展,即可安装。


使用方式


1、扩展程序安装完毕后,打开任意网页,点击浏览器工具栏的扩展图标,则会弹出Code Cola窗口,通过这个窗口可以查看整个网页样式代码。



2、可以通过移动鼠标来进行版块的选择,选中的版块则会加上蓝色的蒙层,点击则可以对当前选中版块进行样式更改。




3、字体更改。


简单说明下字体更改功能,首先选中需要调整的字体版块,然后选中“字体”栏,点击下拉展开所有字体样式,点选目标字体,之前通过蓝色蒙层选中的区域就会变成调整后的字体。


字体、行高、字色、字形都可以这样同理设置。



4、更改页面背景。


如需更换页面背景,可以通过背景——选择文件,来自定义当前页面的背景图片。




5、其他元素更改。


除了上诉提到的几个功能外,Code Cola扩展还支持对齐方式、文字阴影、文字描边、线性渐变、透明度、盒阴影、遮罩、反射、变形、边框、圆角、布局进行设置。都是通过对对应参数的调整来进行更改的。




6、撤销更改。


你也可以随时关闭效果,点击“关闭”功能,就会恢复为原网页的效果。


通过Code Cola扩展可以即时修改网页HTML与CSS的样式代码,实现文字样式背景颜色、边框效果等基础元素的自定义。


Code Cola
开发者工具插件2021-12-214.7
Code Cola是一个可视化编辑在线页面css样式的chrome插件。
直达下载
本站文章均为原创,版权归本站所有,如需转载或引用请注明出处如:“本文章转载自:

Code Cola,CSS样式可视化Chrome插件,即时修改浏览器网页效果 - Extfans”

上一篇:Bulk URL Opener插件,一键快速复制打开多个URL

下一篇:Roomstyler插件,让你在线获得室内装修的专业体验