StyleBot用法

    StyleBot用于设置元素的静态样式。

1 安装

    在SVN中的client/tools/addons中找到Stylebot_v2.2.crx文件，按照格式刷中的安装步骤安装到chorem浏览器中。

2 使用

    使用chrome浏览器打开需要进行修改的页面，在需要修改的位置右键，在Stylebot点击Style Elenmt，出现如下图所示页面

下面详细介绍这个插件的每个功能的用法和效果。

下图红框中按钮是用于选择元素，单击这按钮后，将鼠标放到插件左侧的页面内，即可选择元素，想要修改哪个元素，在鼠标移上以后单击选中。如上图绿框内的元素就是我所选中的内容。

下图所示的红框内显示的内容就是选择器内容，在左侧选中内容，选择器的内容就会随之改变。注意这里插件自动获取的是元素选择器，所以在改变样式时可能会改变其他内容，如果有影响其他元素的情况发生，这里需要手动改为类选择器或者ID选择器。            

TEXT中的Font Family属性的意思是文本的字体系列，可以在后面的下拉菜单中选择想要的字体，只有选中一种字体，左侧的页面内容就会随之改变。

注意：使用插件改变元素样式，获取到CSS代码后，需将插件的属性改为初始值，不然当你再打开页面时，插件中的样式仍然会生效，而不会随着页面的关闭而恢复到默认值。点击Reset按钮或者Reset Page按钮可以将页面恢复到初始状态。

Font Size属性决定元素中文本的尺寸大小，在输入框内输入数值即可改变选择元素中文字的大小。

Font Weirht属性用于修改字体的粗细，Bold按钮是加粗，Normal按钮是正常不变。

Font Style属性改变字体风格，选中Italic按钮，字体就会倾斜，Normal按钮表示不倾斜。

Font Variant属性中，选中Small Caps按钮，文本中的英文字母就表位小型大写字母。

Transform属性有4个按钮，Abc按钮表示文本中的英文字母都变为首字母大写；ABC按钮表示将文本中的英文字母都设置为大写；abc按钮就是将英文字母都设置为小写；none 则是不改变原来的格式。

Decoration属性的4个按钮，none与Transfrom中的none按钮是一样的；ab是为文本添加下划线；ab按钮是在文本的中间添加横线；ab按钮是在文本的上面添加横线。

Line Height属性用于设置行间的距离，在输入框内输入数字改变行间的距离。

Letter Spaceing属性用于设置字符的间距，在输入框内输入数字改变字符间的距离。

Color表示元素的颜色，BackgroundColor表示元素背景的颜色，这两个属性都可以点击第一个框选择颜色，或者直接在后面的输入框内输入想要颜色的代码。

Border Style属性表示边框的风格，在后面的下拉菜单中可以选择边框的样式。

Corders这一栏中的Color属性改变的是边框的颜色。用法同上面的Color一样。

Thickness属性表示边框的属性，在中间的输入框输入数值可以同时设置4条边框的厚度，周围的四个的输入框分别代表四条边框的厚度，四周的厚度设置优先级高于中间输入框，即如果在中间的输入框输入5，在上面的输入框输入10，则上面边框的值为10。

Visibility属性的hide按钮表示隐藏元素，选择hide按钮，不光元素的内容隐藏，元素所占据的页面空间也会隐藏。

Height和Width属性用于设置元素的宽高。

Margin属性用于设置元素的外边距，用法与Thickness相同。

Padding属性表示元素的内边距，用法与Thickness相同。

最后是插件最下方的6个按钮的介绍。

Basic按钮：点击这个按钮显示的就是，打开StyleBot的初始页面。

Advanced按钮：在这个按钮打开的页面内可以输入CSS代码来改变元素的样式。

Edit CSS按钮：这个页面内的CSS代码就是你在Basic页面中设置元素样式所产生的页面，若要使用在插件中设置的CSS代码，只要将这个页面内的CSS代码复制到，wide页面级CSS代码中即可。

Undo按钮：作用是回到上一步的状态。

Reset按钮：恢复插件中对元素的设置到默认值。

Reset Page按钮：将页面恢复到初始状态。

3 实例

下面使用一个例子演示下如何将StyleBot插件中的CSS代码放入wide的页面中。如下图，打开一个发布后的页面，在页面中打开StyleBot插件。

为绿色框内的文字添加样式，将字体改为斜体，为文本添加一个下横线，将颜色改为#f711f7。如下图所示：

可以看到字体颜色和样式已经改变了，点击Edit CSS按钮来查看添加样式的CSS代码。如下图所示：

其中红框内的代码就是我们需要的CSS代码，将这部分代码复制，然后点击Cancel按钮回到Basic界面，点击Reset Page按钮，将样式恢复的初始状态。接下来打开wide，找到站点中页面后面对应编辑按钮。如下图：

点击红框内的编辑按钮，再点击第四个信封样式的按钮，进入CSS编辑页面。将代码复制进去，如下图：