既是安安

Code Cola是一个编辑在线页面CSS样式的chrome插件。它的产生是为了让一些不会使用firebug的视觉、交互、运营等同学能够快速、方便地修改在线页面。

当前版本：2.1.0

一、使用方法

1、开启插件

点击chrome工具条上的图标即可，待插件加载完毕后，会在当前Tab的页面内插入面板，并默认自动开启元素选择功能。

2、选择节点

当鼠标移入某个节点时，该节点周围会出现蓝色边框，直接点击该点击，则选中该节点作为待编辑节点。

在节点上右键鼠标则会唤出与该节点相关的其它节点列表，鼠标移出这些列表项后，页面上同样将以蓝色边框的方式显示该列表项所对应的节点，如果该节点没有相关的其他节点列表，则会显示”no-selector”，并且该提示会在2秒钟后消失。相关节点列表包括”Tag选择”及”Class选择”两种方式，”Tag选择”将选中与该节点类型相同的节点，即如果当前节点为一个表格单元格（td），则会选中该单元格所在表格内的所有单元格；而”Class选择”将选中整个页面中拥有该class的所有节点。

按住ctrl键进行自由多选，选中某个元素后再次点击该元素将取消对此元素的选择，操作方式与window文件完全一致。

选择完节点后，在面板的左上方将出现当前待编辑节点的类型及数量。

3、编辑节点样式

通过面板上的控件编辑节点样式。

4、添加修改注释

点击面板右上角”添加注释”按钮，下方将展开一个文本域，用来向当前编辑节点添加注释，比如对该节点做了什么修改，该节点的样式与视觉稿不一致等等。该功能支持同时对多个节点添加注释，支持注释的修改、删除。

5、获取节点样式

点击面板右上角”查看样式”按钮，下方将展开一个文本域，显示当前编辑节点的样式，在修改样式的过程中，该区域的样式将实时更新，并且该区域中的样式都进行了缩写处理。

同时该区域支持手动编辑，为此您可以一次性修改多个样式规则，一次性删除所有样式；另外当插件没有提供某个css属性的控件时，可以在此手动编辑样式。

6、保存整页的修改结果

点击面板右上角”获取修改结果”按钮，页面的左上方将出现一个浮层，显示”loadding”，待加载完之后，该浮层将变大撑满整个屏幕，浮层内的内容正是修改后的html代码，复制代码到一个文本文件，并另存为”xxx.html”即可。视觉、交互等同学对某些网页进行微调时，不必再打开Photoshop、Axure等工具，直接打开本工具编辑即可，保存后即可丢给前端，前端看到效果后即可查看代码，在工具生成的代码的基础上code。

二、所有功能介绍

三、现有控件

1. 列表项符号

   

2. 字号

   

3. 行高

   

4. 字体

   

5. 字形，包括加粗、斜体、下划线

   

6. 字色

   

7. 对齐方式

   

8. 文字阴影

   

9. 背景色

   

10. 盒阴影

    

11. 边框，包括边框及圆角

    

12. 布局，包括内边距及外边距

    

13. 宽高，包括宽度及高度

    

14. 线性渐变

    

季氏安安

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/Code_Cola_help_documentation.html