StyleBot用法
1. 下载及安装
2. 使用方法
StyleBot有两种打开方式。
（1）使用chrome浏览器打开需要进行修改的页面，点击StyleBot图标，选择“Open StyleBot”即可，如下图：
l Open Stylebot：打开Stylebot。
l Install Style from Social：安装样式。
l Share Style on Social：分享样式。
l Remove Styling：移除样式。
l Options：Stylebot设置。
注：若点击“Open StyleBot”没有反应，清除浏览器缓存重启浏览器即可。
（2）使用chrome浏览器打开需要进行修改的页面，在需要修改的位置右键→Stylebot→Style Element
（3）点击Edit CSS按钮来查看添加样式的CSS代码。其中红框内的代码就是我们需要的CSS代码，将这部分代码复制到wide的样式类文件中即可。
3. 功能详情
左图红框中按钮用于选择元素，单击该按钮，选择相应元素，被选中元素会出现绿色提示框。
右图红框中显示的是选择器内容，选择器的内容与被选中元素保持一致。注意这里插件自动获取的是元素选择器，所以在改变样式时可能会改变其他内容，请谨慎使用。
l Font Family：设置文本字体。
l Font Size：设置字体的大小。
l Font Weight：设置字体的粗细。Bold-加粗；Normal-普通。
l Font Style：设置字体风格。Italic-倾斜；Normal-普通。
l Font Variant：Small Caps-小写字母变为小型大写字母；Normal-普通。
l Transform：Abc-英文单词首字母大写；ABC-英文字母全部大写；abc-英文字母全部小写；none-不作改变。
l Decoration：ab-为文本添加下划线；ab-为文本添加中划线；ab-为文本添加上划线；none-不作改变。
l Line Height：设置文本行间距。
l Letter Spacing：设置字符的间距。
l Color：元素颜色；BackgroundColor：元素背景色。可以点击第一个框选择颜色，或者在输入框内输入颜色代码。
l Border Style：设置边框风格，在下拉菜单中选择边框风格。
l Color：设置边框颜色。用法与上面的Color相同。
l Thickness：边框厚度，在中间输入数值可以同时设置4条边框的厚度，周围的四个的输入框分别代表四条边框的厚度，四周的厚度设置优先级高于中间输入框。
l Visibility：hide-隐藏元素，激活hide按钮，隐藏被选中的元素。
l Height：设置元素的高度。
l Width：设置元素的宽度。
l Margin：设置元素的外边距，用法与Thickness相同。
l Padding：元素的内边距，用法与Thickness相同。
l Basic：打开StyleBot的初始页面。
l Advanced：可以输入CSS代码来改变元素的样式。
l Edit CSS：这个页面内的CSS代码就是在Basic页面中设置元素样式所产生的代码。若要使用在插件中设置的CSS代码，只要将这个页面内的CSS代码复制，放到wide页面级CSS代码中即可。
l Undo：撤销最后一次操作。
l Reset：移除选中元素修改的样式。
l Reset Page：移除整个页面修改的样式。
注意：使用插件改变元素样式，获取到CSS代码后，需将插件的属性改为初始值，否则再次打开页面时，插件中的样式仍然会生效，不会随着页面的关闭而恢复到初始值。点击Reset按钮或者Reset Page按钮可以将页面恢复到初始状态。
4. 实例
下面使用一个例子演示如何将StyleBot插件中的CSS代码写入wide的页面中。打开一个发布后的页面，在页面中打开StyleBot插件。
为绿色框内的文字添加样式，将字体改为斜体，为文本添加一个下横线，将颜色改为“#f711f7”。
点击Edit CSS按钮来查看添加样式的CSS代码。其中红框内的代码就是我们需要的CSS代码，将这部分代码复制。
打开wide，找到站点中页面后面对应编辑按钮。如下图：
点击红框内的编辑按钮，再点击第四个信封样式的按钮，进入CSS编辑页面。将代码粘贴进去，如下图：
发布页面→用浏览器打开，如下图所示：
这样就为元素添加上想要的CSS样式了。但在实际操作中，元素选择器会有相同的时候。如果想只修改一处元素，就要将插件生成的元素选择器改为类选择器或者ID选择器。还是以上面的页面为例，将所要设置的元素逻辑页面设置对应的样式类，这里我们命名为title。如下图：
红框内就是添加的类，然后打开我们写CSS代码的页面。将元素选择器改为类选择器。如下图所示：
然后保存代码，发布页面。再打开页面，页面内容与之前的内容一致。若要将选择器改为ID选择器，只需将html页面中的class="title"改为id="title"，然后将CSS页面中的.title改为#title即可。
注：如果页面中的元素本来就具有内联的样式（逻辑部分inline-style中设置的样式），这时需要在复制过来的代码后面添加 "! important"来标注，以免因为优先级问题使得复制过来的样式不生效。