Stylebot是一款专为Chrome浏览器设计的网页样式自定义插件，允许用户无需编程基础即可轻松调整网页的外观。通过直观的操作界面，用户可实时修改网页的颜色、字体、布局等视觉元素，并即时预览效果。无论是简单的文字颜色更换，还是复杂的页面结构调整，Stylebot都能满足个性化浏览需求，让每个网页都按你的喜好呈现。

快速上手指南

插件安装与基本操作

1. 在Chrome浏览器地址栏输入【chrome://extensions/】进入扩展程序页面，将下载并解压后的Stylebot插件文件拖入该页面完成安装。
2. 安装成功后，打开任意网页即可开始使用。
3. 点击浏览器右上角的Stylebot图标，弹出操作窗口。
4. 窗口包含四个主要功能按钮：
   • 第一个按钮：激活页面内可视化工具栏，用于调整字体、背景、区块等CSS样式；
   • 第二个按钮：下载当前页面已应用的样式；
   • 第三个按钮：分享你创建的样式；
   • 第四个按钮：重置当前页面所有自定义样式。
5. 如需调整插件设置，右键点击图标选择“选项”，进入设置页面可配置编辑模式、启用或自定义快捷键等。
6. 在设置页面中，还可直接编写自定义CSS代码，将其应用于目标网页。

核心亮点功能

★ 直观易用：通过图形界面点击选择网页元素，无需代码即可调整样式。

★ 即改即存：所有修改自动保存，刷新页面后依然生效。

★ 内置代码编辑器：支持手动编写和调试CSS，满足高级用户需求。

★ 阅读优化模式：一键隐藏侧边栏、页脚、广告等干扰内容，提升阅读专注度。

★ 灰度显示模式：启用灰度配色，降低视觉刺激，适合长时间浏览。

详细功能说明

插件界面左侧红框中的按钮用于选择网页元素，点击后鼠标悬停在页面上，被选中的元素会以绿色高亮提示。

右侧红框显示当前选中元素的CSS选择器。注意：插件默认生成的是元素选择器（如 div、p 等），可能会影响页面中同类元素，使用时需谨慎。

以下为各项样式调节功能详解：

• Font Family：设置文本字体类型。
• Font Size：调整字体大小。
• Font Weight：控制字体粗细（Bold 加粗 / Normal 普通）。
• Font Style：设定字体风格（Italic 倾斜 / Normal 普通）。
• Font Variant：Small Caps 将小写字母转为小型大写 / Normal 普通。
• Transform：Abc（首字母大写）、ABC（全大写）、abc（全小写）、none（无变化）。
• Decoration：ab（下划线）、ab（中划线）、上划线、none（无装饰）。
• Line Height：设置行间距。
• Letter Spacing：调整字符间距。
• Color / BackgroundColor：分别设置文字颜色与背景色，可通过色盘选择或手动输入颜色代码。
• Border Style：从下拉菜单中选择边框样式（如实线、虚线等）。
• Border Color：设置边框颜色，操作方式同Color。
• Thickness：中间输入框统一设置四边边框宽度，四周独立输入框可分别设定上下左右边框，优先级高于中间值。
• Visibility：启用 hide 可隐藏当前选中元素。
• Height / Width：分别设置元素的高度与宽度。
• Margin：设置外边距，操作逻辑与Thickness一致。
• Padding：设置内边距，使用方式同Thickness。
• Basic：进入基础样式编辑界面。
• Advanced：直接输入CSS代码进行高级定制。
• Edit CSS：展示在Basic界面所生成的完整CSS代码，复制此代码可用于其他场景或全局样式注入。
• Undo：撤销上一步操作。
• Reset：清除当前选中元素的所有自定义样式。
• Reset Page：清除整个页面的所有Stylebot样式。

重要提示：通过插件修改样式后，相关CSS规则会被持久化保存。若希望页面恢复原始状态，必须手动点击 Reset 或 Reset Page 按钮。否则即使关闭页面，下次访问时自定义样式仍会自动加载。建议在导出所需CSS代码后，及时重置插件状态以避免干扰后续浏览体验。