常用修改选项
| 分类 |
属性 |
备注 |
| 字体类型 |
font-family |
可以设置宋体，楷体，微软雅黑等字体 |
| 字体大小 |
font-size |
1.1em 110% 16px |
| 字体颜色 |
color |
|
| 字体背景颜色 |
background-color |
可以和颜色进行叠加 |
| 字体字重 |
font-weight |
正常为 normal，加粗为 bold |
| 内边距 |
padding |
|
| 外边距 |
margin |
可以通过 margin-left,margin-right,margin-top,margin-bottom，修改某个方向的边距，上同 |
| 边框 |
border |
1px solid gray 设置 1 像素灰色边框； 0.1em dashed #ebebeb 设置 0.1 倍当前字体大小的虚线浅灰色边框；
可以通过 border-left 修改左侧边框，上下左右单侧边框同理
|
| 圆角 |
border-radius |
4px,圆角大小为 4 像素；如果数值很多，比如是 50px，则可以生成半圆 |
| 阴影 |
box-shadow |
|
| 宽度 |
width |
设置具体数字，如 300px；也可以设置百分比，如 80%，100% 等 |
| 高度 |
height |
|
| 行间距 |
line-height |
1.5em，即为 1.5 倍行间距 |
| 对齐 |
text-align
|
text-align: center; 居中对齐，left 为左对齐，right 为右对齐，justify 为两端对齐 |
外观
| 中文名称 |
选择器 |
备注 |
| 顶部 dock 栏 |
div#toolbar |
|
| 顶部 dock 栏中图标 |
#toolbar .toolbar__item svg { |
|
| 顶部 dock 栏中标题 |
div#drag |
需要加 !important |
| 左侧 dock 栏 |
div#dockLeft { |
|
| 右侧 dock 栏 |
div#dockRight { |
|
| 编辑区域 |
.protyle-content { |
|
| 正文区域（不含标题） |
.protyle .protyle-wysiwyg { |
|
| 文档树条目 |
.b3-list--background .b3-list-item |
|
| 当前文档树条目 |
.b3-list--background .b3-list-item--focus { |
|
| 当前文档树条目文字 |
.b3-list--background .b3-list-item--focus .b3-list-item__text { |
|
| 当前文档树条目图标 1 |
.b3-list--background .b3-list-item--focus .b3-list-item__graphic { |
|
| 当前文档树条目图标 2 |
.b3-list--background .b3-list-item--focus .b3-list-item__icon svg { |
|
| 鼠标悬浮文档树条目 |
.b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) { |
|
| 鼠标悬浮文档树条目文字 |
.b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) .b3-list-item__text { |
|
| 鼠标悬浮文档树条目图标 |
.b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) .b3-list-item__icon svg { |
|
| 标签页 |
.layout-tab-bar .item { |
|
| 标签页文字 |
.layout-tab-bar .item .item__text { |
|
| 当前标签页 |
.layout-tab-bar .item--focus { |
|
| 当前标签页文字 |
.layout-tab-bar .item--focus .item__text { |
|
| 当前标签页关闭按钮 |
.layout-tab-bar .item--focus .item__close svg { |
通过 color 可以修改颜色 |
| 面包屑 |
.protyle-breadcrumb { |
|
| 选中文字后的工具条 |
.protyle-toolbar { |
|
| 选中文字后的工具条单个条目 |
.protyle-toolbar__item { |
|
| 选中文字后的工具条单个条目鼠标悬浮 |
.protyle-toolbar__item:hover { |
|
| 选中文字后的工具条当前条目 |
.protyle-toolbar__item--current { |
|
行内元素
-
概念解释
- 一行中可以和其他元素一起出现的元素，比如标签，比如行内代码
| 中文名称 |
选择器 |
| 高亮 |
mark { |
| 搜索高亮 |
.protyle-wysiwyg [data-node-id] span[data-type="search-mark"] { |
| 加粗 |
.b3-typography strong,.protyle-wysiwyg strong { |
| 斜体 |
.b3-typography em, .protyle-wysiwyg em { |
| 下划线 |
.b3-typography u,.protyle-wysiwyg u { |
| 删除线 |
.b3-typography s,.protyle-wysiwyg s {
|
| 上标 |
sup |
| 下标 |
sub |
| 键盘元素 |
.b3-typography kbd, .protyle-wysiwyg kbd { |
| 标签 |
.protyle-wysiwyg [data-node-id] span[data-type="tag"]{ |
| 行内代码 |
.b3-typography code, .protyle-wysiwyg code{ |
| 行内数学公式 |
.protyle-wysiwyg [data-node-id] span[data-type="inline-math"]{ |
| 更多字体样式 |
strong[style="background-color: var(--b3-font-background1);"] { strong[style="color: var(--b3-font-color1);"] { |
| 块引用 |
.protyle-wysiwyg [data-node-id] span[data-type='block-ref'] { |
块级元素
-
概念
- 独占一行，行中不会出现其他元素，比如表格，比如一级标题
表格
| 中文名称 |
选择器 |
| 表格整体 |
.protyle-wysiwyg table,.b3-typography table { |
| 表头 |
.protyle-wysiwyg table thead,.b3-typography table thead { |
| 表格偶数行 |
tbody tr:nth-child(2n) { |
| 表格奇数行 |
tbody tr:nth-child(2n + 1) { |
| 表格第一列 |
table tr td:first-child { |
| 表格最后一列 |
table tr td:last-child { |
| 表头单元格 |
th |
| 表格单元格 |
td |
| 表格区域（除去表头） |
tbody |
| 表行 |
tr |
/*例子：给表格设置2像素实线灰色边框（包括表头和正文）*/
th, td {
border: 2px solid gray !important;
}
| 中文名称 |
选择器 |
| 引用 |
.protyle-wysiwyg [data-node-id].bq { |
| 嵌入块 |
.render-node { |
| 图片（不包括自定义表情） |
.protyle-wysiwyg img:not(img.emoji) { |
| 代码块 |
.code-block { |
| 超级块 |
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"]>div, |
| PDF 双链 |
.protyle-wysiwyg [data-node-id] span[data-type='file-annotation-ref'] { |
| 分割线 |
div.hr |
| 文档标题 |
.protyle-title__input { |
| 1-6 级标题（后面是所有标题） |
.protyle-wysiwyg [data-node-id].h1 { .protyle-wysiwyg [data-node-id][data-type="NodeHeading"] { |
|
|
自定义属性
| 中文名称 |
选择器 |
| 文档的自定义属性 |
.protyle-wysiwyg[custom-f~=hide] { |
| 块的自定义属性 |
.protyle-wysiwyg [data-node-id][custom-f~=kaiti] { |
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于