Start here
零基础 · 5 分钟
三十秒搞懂：HTML 和 CSS 各干什么
把一条 AI 回复想成一个人：HTML 是骨架和内容（这段话是什么、分几块），CSS 是衣服和妆容（什么颜色、多大、怎么排）。HTML 用标签（尖括号包起来的名字，如 <status>）圈住内容；CSS 用选择器（告诉样式"给谁"的写法）点名要打扮谁。看下面的对比——右边只多了一段 CSS：
没有 CSS
加上 CSS
第一步：在哪里写（重要，先对号入座）
| 场景 | HTML 写在哪 | CSS 写在哪 | 特别注意 |
|---|---|---|---|
| 角色卡 | 创作页「详细介绍 / 回复样式」 | 创作页「自定义 CSS」 | 无长度硬限；开场白限制更严（见下方提醒） |
| 广场「回复样式」商品 | 发布页「提示词内容」 | 发布页「配套 CSS」 | CSS ≤ 10000 字符，超出保存被拒 |
| 消息正文内嵌 | 正文里直接写 <style> | 同一个地方 | 外链 url() 全部被剥，只认 data: 内联图 |
创作页和广场发布页的对应编辑器旁都有「HTML/CSS 教程」入口，随时可以回到本页。
第二步：Hello World（30 秒第一次成功）
左边代码直接改（比如把背景色 #d4af37 换成 #4a90d9）， 右边立刻变。每行注释说明这行干什么、哪些值可以改：
可直接编辑，右侧实时预览
（可选）CSS 迷你课：盒模型与十个最常用属性
▸点开看：一个元素从里到外是什么、改哪个属性会怎样
margin 外边距（和别人的距离）
border 边框
padding 内边距（和文字的距离）
content 内容（你的文字/图片）
写 CSS 就是在告诉浏览器：这几层各自的厚度、颜色、形状。下面是覆盖 90% 场景的十个属性：
| 属性 | 干什么 | 示例值（直接抄改） |
|---|---|---|
color | 文字颜色 | #d4af37 |
font-size | 字号 | 16px |
font-weight | 加粗程度 | 700（正常 400） |
background | 背景（色或图） | #1a1510 / url("…") |
padding | 内边距（内层厚度） | 8px 12px（上下 左右） |
margin | 外边距（外层厚度） | 10px auto（auto=水平居中） |
border | 边框 | 1px solid #b8860b |
border-radius | 圆角 | 6px，全圆用 999px |
display | 显示方式 | block 独占一行 / inline-block 行内块 |
width / height | 宽 / 高 | 200px / 100% |
第三步：没生效？先查这三点
| 症状 | 原因 | 解法 |
|---|---|---|
<status> 显示成字面文字 | 标签的 < 前紧贴了字母/数字（如 n<status），被当成比较符号 | 标签前后留空格或换行 |
| 样式完全不生效 | 选择器没以 .markdown-body 开头 | 所有选择器都以 .markdown-body 开头（黄金规则） |
| 颜色被系统改了 | 只写了 color 没写 background，触发暗色提亮 / 对比度守卫 | color 和 background 成对写（对比度 ≥ 4.5:1） |
开场白比详细介绍严格
开场白（首条消息）会进弹窗和聊天气泡，不允许
<script>、<iframe>、<svg> 等可执行/嵌入标签和 on* 事件属性，保存会被直接拦截。 详细介绍/回复样式则允许完整 HTML 应用。做卡时请把复杂排版放在详细介绍或回复样式里。复制 → 粘贴 → 只改标注的行
抄改用模板库
每个模板都能直接编辑试效果：点「复制」拿到完整代码，HTML 贴进对应字段、 CSS 贴进自定义 CSS。注释里标了哪些行是可改参数。徽章表示难度：入门一两行属性、进阶组合属性、高级定位/动画/交互。
氛围感：信纸与章节分隔
可直接编辑，右侧实时预览
游戏感：状态、属性与短信
可直接编辑，右侧实时预览
画面感：立绘、音频与视频
可直接编辑，右侧实时预览
互动：揭示、悬浮与折叠
可直接编辑，右侧实时预览
Tooltip 用自定义标签
用
<stat> / <tip>（别用原生 <s>）。 父级加 display: inline-block 让定位锚稳。核心机制
自定义标签
角色卡做"面板 / 状态栏 / 信息块"靠它。命名规则：
- 命名：字母开头，可用字母 / 数字 / 连字符。
- 下划线自动转连字符（归一）：写
<top_status>会渲染成<top-status>，CSS 选择器同步归一，无需手动改。 - 大小写不敏感：
<T>与<t>都是.tag-t。
<faction_panel class="gold">阵营A</faction_panel>三种等价 CSS 写法（任选其一）：
/* ① 推荐：标签名选择器，系统自动改写 */
.markdown-body faction_panel { background: #2b1d15; }
/* ② 直接用类名 */
.markdown-body .tag-faction-panel { background: #2b1d15; }
/* ③ 用 data 属性 */
.markdown-body [data-tag="faction-panel"] { background: #2b1d15; }什么时候是 span 而不是 div
当标签在
<p> 内（任意层祖先）或直接父级是 <span> 时， 会渲染成内联的 <span>（同样带 tag-名字 类），避免 <p><div> 非法嵌套。别用原生标签名当自定义标签
<s> 是删除线、<b> 是加粗、<i> 是斜体，按原生语义渲染，不会变成 .tag-s。自定义请用不在白名单里的名字，如<stat> <panel> <tip>。CSS 规则与限制
作用域：选择器以 .markdown-body 开头
正文渲染在一个专属容器里，作者用 .markdown-body 这个别名来定位它。你写的 CSS 只影响这张卡的内容，系统自动给选择器加容器前缀（作用域），你不用管前缀长什么样。
/* 推荐：SillyTavern 通用写法，本站完全支持 */
.markdown-body .panel { background: #1a1a1a; }
.markdown-body faction_panel { color: #fff; } /* 自定义标签也这么写 */沙箱：z-index 与定位
z-index被限制在 [-100, 100]。叠层用 1~99 即可。- 容器开了
contain，position: fixed也只在本条消息范围内，逃不出去。
隐藏声明的安全网（最易踩坑）
一句话规则
想做"默认隐藏、交互时显示"（tooltip / 折叠详情），必须成对写：一条隐藏 + 一条带
:hover / :focus / :checked / [open] 等交互状态的显示规则。 否则系统认为你在误藏内容，会剥掉隐藏、强制显示。| 你的写法 | 结果 |
|---|---|
.markdown-body cot { display:none } | 独立壳被藏 剥隐藏，强制可见 |
.markdown-body panel .secret { display:none } | 无配套显示 剥隐藏，强制可见 |
上方 + panel:hover .secret { display:block } | 有配套显示 保留隐藏，hover 显示 |
关于 !important
合法交互模式下隐藏声明原样保留（含
!important）。显示规则要赢也必须加 !important。 但在没有配套显示时，!important 也保不住隐藏。颜色自适应
- 暗色主题：无背景的深色文字自动提亮。想锁死，给元素同时设
color和background。 - 对比度守卫：前景背景太接近时文字色自动改成可读色（阅读模式关闭时生效）。
- 阅读模式：强制统一可读前景/背景（与对比度守卫互斥）。
基础样式你天然就赢
系统内置的基础样式优先级很低，你写的 custom CSS 默认就能覆盖它，不需要为此特意加
!important。危险 CSS 清洗与硬性限制
| 写法 | 角色卡 Custom CSS | 消息正文 <style> |
|---|---|---|
url("https://…") 外链图片 | 保留 立绘/背景图推荐用法 | 剥离 只允许 data: 内联图 |
@import | 一律别用 渲染时全部移除（见下方说明） | 剥离 |
@keyframes / @media | 支持 见「动画」节 | 支持 |
<script> / expression() / javascript: | 保存被拒 | 剥离 |
html 选择器 | 保存被拒（body 已放开） | 剥离 |
为什么 @import 引字体不行
后端虽然放行 Google Fonts 等字体 CDN 白名单（能保存成功），但网页端渲染时会移除所有 @import——结果就是"保存成功却永远不生效"。自定义字体目前没有官方通道，请用系统字体栈：
font-family: "Kaiti", "STKaiti", serif;长度限制（超限保存被拒）
| 字段 | 上限 |
|---|---|
| 广场「配套 CSS」 | 10000 字符（发布页有实时计数） |
| 角色卡「自定义 CSS」 | 无硬性上限（建议克制在几十 KB 内，过长影响加载） |
| 提示词类字段 | 破甲词/世界观等 ≤ 15000；主提示词 ≤ 32000 |
| 广场其它 | 标题 ≤ 200；简介 ≤ 2000；提示词内容 ≤ 20000 |
@keyframes 可用
动画
作用域系统对 @keyframes 原样保留、对 @media 内部规则自动加前缀， 所以纯 CSS 动画开箱即用：呼吸灯、充能条、入场淡入都能做，且不受 z-index/定位沙箱影响。
可直接编辑，右侧实时预览
动画别太闹
每条消息都会重新播放动画。呼吸灯这类循环动画建议只用在状态指示上； 入场动画 0.3~0.8 秒为宜。记得加
prefers-reduced-motion 关照敏感用户。不用自己造
内置交互组件
这三个是系统自带的，不用写 JS：
1. 点击揭示（click-to-reveal）
<span class="observe-wrap-v2">
<span class="secret-trigger-v2">🔮 点击查看密信</span>
<span class="secret-popup-v2">这是一段隐藏的剧情…</span>
</span>2. 纯 CSS 手风琴 / Tab
写 <label for="x">，系统自动补缺失的 <input type="checkbox">：
<label for="t1">展开第一章</label>
<div class="ch1">第一章内容…</div>单选 Tab 要用 radio
自动注入的永远是 checkbox。要"只展开一个"请自己写
<input type="radio" name="tabs">。3. <details> 折叠 + ``` 围栏
- 嵌套
<details>会被拍平成兄弟（不能靠嵌套做层级）。 ```围栏会变成一个带样式的布局区块，里面的 Markdown 会继续渲染（不是灰色代码框）。
HTML 标签参考
标准 HTML 标签按原生渲染。常用标签节选：
a b i em strong p span div section
h1-h6 ul ol li details summary
table thead tbody td th
img pre code blockquote q
label input button select textarea
br hr mark small sub sup ...特殊处理的标签
| 标签 | 行为 |
|---|---|
details | 原生折叠。会被拍平/补空行（见内置组件节） |
table / thead / th | 表头自动套渐变色（改色用 !important）；Markdown 管道表格也支持 |
style | 仅写在消息正文里时保留并隔离，清洗危险 CSS |
img | 默认 max-width:100% + 圆角（见其他约定） |
script iframe link meta object … | 强制剥壳：功能性移除，文字仍可见 |
think / text / ai-summary / next-prompt | 系统专用，会被移除，别当普通标签 |
交互不能用 onclick
on* 事件、contenteditable、ref 会被删除。交互只能用纯 CSS （:hover / :checked / [open] / <details>）或内置组件。data-* / aria-* 属性会保留，可作选择器钩子。其他约定
| 项 | 说明 |
|---|---|
| 图片 | 默认 max-width:100% + 圆角；别用 cg-inline-image 类（站内 CG 保留类）。 |
| CSS 变量 | 可在 .markdown-body 上定义自己的变量（如 --my-color），子元素直接复用。 |
| iOS 限制 | 无 ~~删除线~~（用 <s>）、无任务列表（用 checkbox）、无裸链接自动识别（用 <a>）。 |
| 流式输出 | AI 边生成边显示，未闭合标签会被临时处理；以生成完成后的样子为准。 |
常见问题
Q.我写的 sprite.char-xxx 没生效？
系统把 <sprite> 转成 <div class="char-xxx tag-sprite">，CSS 里 sprite 自动改写为 .tag-sprite。.markdown-body sprite.char-xxx { } 能命中。空标签记得给 width/height。
Q.<top_status> 显示成字面文字了？
通常是标签 < 前紧贴了字母/数字/下划线（如 n<top_status>），被当比较运算符而没归一。给标签前后留空格/换行即可。
Q.details / tooltip 默认就展开了？
要做'默认隐藏+交互显示'，必须配套写带 :hover/:focus/:checked/[open] 的显示规则。只写隐藏会被安全网强制改成可见。
Q.颜色 / 背景被改了？
暗色模式自动提亮、对比度守卫、或阅读模式在起作用。给元素同时设 color + background 可减少被改。
Q.@import 引入字体怎么不行？
网页端渲染器会移除所有 @import——后端虽然放行 Google Fonts 等白名单域名（能保存成功），但渲染时一律剥掉，所以永远不生效。自定义字体目前没有官方通道，请用系统字体栈（如 font-family: 'Kaiti', 'STKaiti', serif）。
Q.开场白里的 HTML 保存被拦？
开场白限制比详细介绍严格：不允许 script/iframe/svg 等标签和 on* 事件属性。把复杂排版放到详细介绍或回复样式里。
Q.能用 <script onclick> 做交互吗？
不能。<script> 剥壳、on* 属性被删。交互用纯 CSS 或内置组件。
一页速查 + 术语表
容器定位
所有选择器以 .markdown-body 开头
自定义标签
→ div/span.tag-名字（下划线自动转连字符）
别用原生名
<s>/<b>/<i> 等按原生渲染，不会变 .tag-*
沙箱
z-index ∈ [-100,100]；position:fixed 关在气泡内
隐藏内容
必须配套交互显示规则，否则强制可见
颜色
建议同时给 color + background；基础样式你天然赢
内置交互
点击揭示 / label+input 手风琴 / details
代码围栏
``` = 布局区块，内部 Markdown 会渲染
外链 url()
仅角色卡 CSS 可用；正文 <style> 里被剥
@import
一律别用（渲染时全部移除）；字体用系统字体栈
动画
@keyframes / @media 都支持，见「动画」节
长度
广场配套 CSS ≤ 10000 字符；角色卡无硬限
开场白
比详细介绍严：禁 script/iframe/svg/on*
术语表
| 术语 | 白话解释 |
|---|---|
| 选择器 selector | 告诉样式"给谁"的定位写法，如 .markdown-body status |
| 作用域 scope | 样式起效的范围。系统自动把你的 CSS 限定在这张卡的内容里 |
| 归一 normalize | 系统把不同写法统一成同一种形式（如 top_status → top-status） |
| 剥壳 unwrap | 移除外层标签但保留里面的文字（如 <script>内容</script> → 内容） |
| 沙箱 sandbox | 把内容关在固定范围内的保护机制（z-index 限制、fixed 不逃逸） |
| 白名单 whitelist | 只有列出的才允许通过（如 @import 的字体域名白名单） |
| 伪类 pseudo-class | :hover 这类"状态选择器"，鼠标悬停/选中时才生效 |
遇到问题欢迎在客服群反馈，我们会持续完善这份指南