Browse Source
- 在package.json中添加了extend-shallow、koa-helmet和koa-ratelimit等依赖 - 新增markdown-reset.scss和markdown-green.scss样式文件，增强Markdown内容的样式支持 - 更新公共样式，改善响应式设计，提升用户体验 - 在中间件中集成了安全性和速率限制功能，增强应用的安全性pure
25 changed files with 6972 additions and 269 deletions
Binary file not shown.
@ -0,0 +1,677 @@ |
|||
|
|||
/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */ |
|||
@media (prefers-color-scheme: dark) { |
|||
.markdown-body { |
|||
/* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */ |
|||
color-scheme: dark; |
|||
} |
|||
} |
|||
/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */ |
|||
@media (prefers-color-scheme: light) { |
|||
// https://verytoolz.com/blog/03bfb3598f/ |
|||
.markdown-body { |
|||
/* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */ |
|||
color-scheme: light; |
|||
/* 定义CSS自定义属性，用于主题色彩管理 */ |
|||
--color-fg-default: #24292f; // 文本色-默认 - 主要文本颜色 |
|||
--color-fg-muted: #57606a; // 文本色-柔和 - 次要文本颜色 |
|||
--color-fg-subtle: #6e7781; // 文本色-微妙 - 最淡的文本颜色 |
|||
--color-canvas-default: #ffffff; // 底色-默认 - 主要背景颜色 |
|||
--color-canvas-subtle: #f6f8fa; // 底色-微妙 - 次要背景颜色 |
|||
--color-border-default: #d0d7de; // 边框色-默认 - 主要边框颜色 |
|||
--color-border-muted: hsla(210, 18%, 87%, 1); // 边框色-柔和 - 次要边框颜色 |
|||
--color-neutral-muted: rgba(175, 184, 193, 0.2); // 边框色-中性 - 中性边框颜色 |
|||
--color-accent-fg: #0969da; // 文本强调色 - 强调文本颜色 |
|||
--color-accent-emphasis: #0969da; // 背景强调色 - 强调背景颜色 |
|||
--color-attention-subtle: #fff8c5; // 背景注意色 - 注意提示背景色 |
|||
--color-danger-fg: #cf222e; // 文本危险色 - 危险/错误文本颜色 |
|||
--color-mark-default: rgb(255, 255, 0); // mark 默认色 - 标记默认背景色 |
|||
--color-mark-fg: rgb(255, 187, 0); // mark 强调色 - 标记强调背景色 |
|||
} |
|||
} |
|||
|
|||
/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */ |
|||
.markdown-body { |
|||
/* 防止iOS Safari自动调整文本大小 */ |
|||
-webkit-text-size-adjust: 100%; |
|||
/* 防止IE自动调整文本大小 */ |
|||
-ms-text-size-adjust: 100%; |
|||
/* 优化文本渲染质量，提升可读性 */ |
|||
text-rendering: optimizelegibility; |
|||
/* 重置外边距为0 */ |
|||
margin: 0; |
|||
/* 允许长单词在必要时换行，防止溢出 */ |
|||
word-wrap: break-word; |
|||
/* 使用CSS变量设置文本颜色 */ |
|||
color: var(--color-fg-muted); |
|||
/* 伪元素before - 用于清除浮动 */ |
|||
&::before { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
/* 伪元素after - 用于清除浮动 */ |
|||
&::after { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 清除左右浮动 */ |
|||
clear: both; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
/* 第一个子元素 - 移除顶部外边距 */ |
|||
> *:first-child { |
|||
/* 强制移除顶部外边距，避免不必要的空白 */ |
|||
margin-top: 0 !important; |
|||
} |
|||
/* 最后一个子元素 - 移除底部外边距 */ |
|||
> *:last-child { |
|||
/* 强制移除底部外边距，避免不必要的空白 */ |
|||
margin-bottom: 0 !important; |
|||
} |
|||
/* 块级元素统一间距设置 - 段落、引用、列表、表格等 */ |
|||
p, |
|||
blockquote, |
|||
ul, |
|||
ol, |
|||
dl, |
|||
table, |
|||
hr, |
|||
form, |
|||
pre, |
|||
details { |
|||
/* 移除顶部外边距，避免重复间距 */ |
|||
margin-top: 0; |
|||
/* 设置底部外边距为1em，保持适当间距 */ |
|||
margin-bottom: 1em; |
|||
} |
|||
/* 引用块内部元素间距处理 */ |
|||
blockquote { |
|||
/* 引用块内第一个子元素 - 移除顶部外边距 */ |
|||
& > :first-child { |
|||
margin-top: 0; |
|||
} |
|||
/* 引用块内最后一个子元素 - 移除底部外边距 */ |
|||
& > :last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
/* 统一显示成块状元素 - 确保这些元素独占一行 */ |
|||
details, |
|||
figcaption, |
|||
figure { |
|||
/* 设置为块级元素，独占一行显示 */ |
|||
display: block; |
|||
} |
|||
/* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */ |
|||
audio, |
|||
canvas, |
|||
video { |
|||
/* 设置为内联块级元素，可以设置宽高但不会独占一行 */ |
|||
display: inline-block; |
|||
} |
|||
/* 按钮内部间距统一 - 移除Firefox默认内边距 */ |
|||
button::-moz-focus-inner, |
|||
input::-moz-focus-inner { |
|||
/* 移除Firefox浏览器按钮和输入框的内部内边距 */ |
|||
padding: 0; |
|||
/* 移除Firefox浏览器按钮和输入框的内部边框 */ |
|||
border: 0; |
|||
} |
|||
/* 定义元素显示为斜体 - 术语定义样式 */ |
|||
dfn { |
|||
/* 设置字体为斜体，用于术语定义 */ |
|||
font-style: italic; |
|||
} |
|||
/* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */ |
|||
table { |
|||
/* 合并表格边框，相邻单元格边框合并为一条 */ |
|||
border-collapse: collapse; |
|||
/* 设置表格单元格间距为0 */ |
|||
border-spacing: 0; |
|||
/* 设置为块级元素，可以设置宽高 */ |
|||
display: block; |
|||
/* 宽度根据内容自适应 */ |
|||
width: max-content; |
|||
/* 最大宽度不超过父容器 */ |
|||
max-width: 100%; |
|||
/* 内容溢出时显示滚动条 */ |
|||
overflow: auto; |
|||
} |
|||
/* 可拖动文件添加拖动手势 - 拖拽元素样式 */ |
|||
[draggable] { |
|||
/* 设置鼠标悬停时显示移动光标 */ |
|||
cursor: move; |
|||
} |
|||
/* 加粗元素 - 粗体文本样式 */ |
|||
b, |
|||
strong { |
|||
/* 设置字体粗细，使用CSS变量或默认600 */ |
|||
font-weight: var(--base-text-weight-semibold, 600); |
|||
} |
|||
/* 缩写元素样式统一 - 缩写和首字母缩写样式 */ |
|||
abbr, |
|||
acronym { |
|||
/* 移除底部边框 */ |
|||
border-bottom: none; |
|||
/* 设置字体变体为正常 */ |
|||
font-variant: normal; |
|||
/* 设置虚线下划线装饰 */ |
|||
text-decoration: underline dotted; |
|||
} |
|||
/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ |
|||
abbr { |
|||
/* 设置鼠标悬停时显示帮助光标 */ |
|||
cursor: help; |
|||
} |
|||
/* 一致的 del 样式 - 删除线文本样式 */ |
|||
del { |
|||
/* 设置文本装饰为删除线 */ |
|||
text-decoration: line-through; |
|||
} |
|||
/* a标签去除下划线 - 链接样式处理 */ |
|||
a { |
|||
/* 默认移除下划线，保持页面简洁 */ |
|||
text-decoration: none; |
|||
/* 没有href属性的链接样式 */ |
|||
&:not([href]) { |
|||
/* 继承父元素颜色 */ |
|||
color: inherit; |
|||
/* 移除下划线装饰 */ |
|||
text-decoration: none; |
|||
} |
|||
/* 鼠标悬停时显示下划线 */ |
|||
&:hover { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
/* 默认不显示下划线，保持页面简洁 - 插入文本样式 */ |
|||
ins { |
|||
/* 移除下划线装饰，保持页面简洁 */ |
|||
text-decoration: none; |
|||
} |
|||
/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， |
|||
* 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号 |
|||
* 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element |
|||
* 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated |
|||
* 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/ |
|||
*/ |
|||
u, |
|||
.typo-u { |
|||
/* 设置文本装饰为下划线，用于专名号显示 */ |
|||
text-decoration: underline; |
|||
} |
|||
/* 隐藏指定元素 - 隐藏带有hidden属性的元素 */ |
|||
[hidden] { |
|||
/* 强制隐藏元素，优先级最高 */ |
|||
display: none !important; |
|||
} |
|||
/* 伸缩框显示为列表元素 - 详情框摘要样式 */ |
|||
summary { |
|||
/* 设置为列表项显示，显示为可点击的列表项 */ |
|||
display: list-item; |
|||
} |
|||
/* 引用元素前后内容 - 移除默认引号 */ |
|||
q:before, |
|||
q:after { |
|||
/* 移除引用元素前后的默认引号内容 */ |
|||
content: ""; |
|||
} |
|||
/* 表格标题和表头文本对齐 - 默认左对齐 */ |
|||
caption, |
|||
th { |
|||
/* 设置文本左对齐 */ |
|||
text-align: left; |
|||
} |
|||
/* 居中对齐的表格标题和表头 */ |
|||
caption[align="center"], |
|||
th[align="center"] { |
|||
/* 设置文本居中对齐 */ |
|||
text-align: center; |
|||
} |
|||
/* 特定元素字体粗细统一 - 地址、标题、引用等 */ |
|||
address, |
|||
caption, |
|||
cite, |
|||
em, |
|||
th, |
|||
var { |
|||
/* 设置字体粗细为正常（400） */ |
|||
font-weight: 400; |
|||
} |
|||
/* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */ |
|||
mark { |
|||
/* 设置标记背景色，使用CSS变量 */ |
|||
background: var(--color-mark-default); |
|||
// background: #fffdd1; // 备用背景色 |
|||
// border-bottom: 1px solid #ffedce; // 备用底部边框 |
|||
/* 设置内边距，增加标记的可读性 */ |
|||
padding: 2px; |
|||
|
|||
/* 激活状态的标记样式 */ |
|||
&.active { |
|||
/* 激活时使用强调色背景 */ |
|||
background: var(--color-mark-fg); |
|||
} |
|||
// margin: 0 5px; // 备用外边距 |
|||
} |
|||
/* 统一h1元素的间隔和字体大小 - 一级标题样式 */ |
|||
h1 { |
|||
/* 设置上下外边距为0.67em */ |
|||
margin: 0.67em 0; |
|||
/* 设置字体粗细，使用CSS变量或默认600 */ |
|||
font-weight: var(--base-text-weight-semibold, 600); |
|||
/* 设置字体大小为2倍基础大小 */ |
|||
font-size: 2em; |
|||
} |
|||
/* small字体缩小 - 小字体文本样式 */ |
|||
small { |
|||
/* 设置字体大小为父元素的90% */ |
|||
font-size: 90%; |
|||
} |
|||
/* 上下标显示 - 下标和上标文本样式 */ |
|||
sub, |
|||
sup { |
|||
/* 设置字体大小为75% */ |
|||
font-size: 75%; |
|||
/* 设置行高为0，避免影响行间距 */ |
|||
line-height: 0; |
|||
/* 设置相对定位，用于精确控制位置 */ |
|||
position: relative; |
|||
/* 设置垂直对齐为基线 */ |
|||
vertical-align: baseline; |
|||
} |
|||
/* 上下标内链接样式 */ |
|||
sub a, |
|||
sup a { |
|||
/* 设置左右内边距为0.1em */ |
|||
padding: 0 0.1em; |
|||
} |
|||
/* 下标位置调整 */ |
|||
sub { |
|||
/* 向下偏移0.25em */ |
|||
bottom: -0.25em; |
|||
} |
|||
/* 上标位置调整 */ |
|||
sup { |
|||
/* 向上偏移0.5em */ |
|||
top: -0.5em; |
|||
} |
|||
/* 代码相关的字体大小统一 - 代码元素字体样式 */ |
|||
code, |
|||
kbd, |
|||
pre, |
|||
samp, |
|||
pre tt { |
|||
/* 设置字体为等宽字体，便于代码阅读 */ |
|||
font-family: monospace; |
|||
/* 设置字体大小为1em，保持一致性 */ |
|||
font-size: 1em; |
|||
} |
|||
/* 去除默认边框 - 移除字段集和图片的默认边框 */ |
|||
fieldset, |
|||
img { |
|||
/* 移除边框 */ |
|||
border: 0; |
|||
} |
|||
/* 图片初始化样式 - 图片元素基础样式 */ |
|||
img { |
|||
/* 设置边框样式为无 */ |
|||
border-style: none; |
|||
/* 设置最大宽度为100%，防止溢出 */ |
|||
max-width: 100%; |
|||
/* 设置盒模型为内容盒模型 */ |
|||
box-sizing: content-box; |
|||
/* 设置左右外边距为自动，实现居中 */ |
|||
margin: 0 auto; |
|||
/* 设置背景色，使用CSS变量 */ |
|||
background-color: var(--color-canvas-default); |
|||
} |
|||
/* 可附标题内容元素的间距 - 图片容器样式 */ |
|||
figure { |
|||
/* 设置上下外边距为1em，左右外边距为40px */ |
|||
margin: 1em 40px; |
|||
} |
|||
/* 间隔线 - 水平分隔线样式 */ |
|||
/* 一致化 horizontal rule - 统一水平分隔线样式 */ |
|||
hr { |
|||
/* 设置盒模型为内容盒模型 */ |
|||
box-sizing: content-box; |
|||
/* 隐藏溢出内容 */ |
|||
overflow: hidden; |
|||
/* 设置背景为透明 */ |
|||
background: transparent; |
|||
/* 设置底部边框，使用CSS变量 */ |
|||
border-bottom: 1px solid var(--color-border-muted); |
|||
/* 设置高度为0.25em */ |
|||
height: 0.25em; |
|||
/* 移除内边距 */ |
|||
padding: 0; |
|||
/* 设置上下外边距为24px */ |
|||
margin: 24px 0; |
|||
/* 设置背景色，使用CSS变量 */ |
|||
background-color: var(--color-border-default); |
|||
/* 移除边框 */ |
|||
border: 0; |
|||
/* 伪元素before - 用于清除浮动 */ |
|||
&::before { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
/* 伪元素after - 用于清除浮动 */ |
|||
&::after { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 清除左右浮动 */ |
|||
clear: both; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
} |
|||
|
|||
/* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */ |
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
/* 继承父元素的字体样式 */ |
|||
font: inherit; |
|||
/* 移除外边距 */ |
|||
margin: 0; |
|||
/* 设置溢出为可见 */ |
|||
overflow: visible; |
|||
/* 继承父元素的字体族 */ |
|||
font-family: inherit; |
|||
/* 继承父元素的字体大小 */ |
|||
font-size: inherit; |
|||
/* 继承父元素的行高 */ |
|||
line-height: inherit; |
|||
} |
|||
/* 外观显示为按钮 - 按钮类型输入框样式 */ |
|||
[type="button"], |
|||
[type="reset"], |
|||
[type="submit"] { |
|||
/* 设置WebKit浏览器按钮外观 */ |
|||
-webkit-appearance: button; |
|||
/* 设置标准按钮外观，提高兼容性 */ |
|||
appearance: button; |
|||
} |
|||
/* 这两个表单样式规则覆盖 - 复选框和单选框样式 */ |
|||
[type="checkbox"], |
|||
[type="radio"] { |
|||
/* 设置盒模型为边框盒模型 */ |
|||
box-sizing: border-box; |
|||
/* 移除内边距 */ |
|||
padding: 0; |
|||
} |
|||
/* 数字按钮内部高度自动 - 数字输入框按钮样式 */ |
|||
[type="number"]::-webkit-inner-spin-button, |
|||
[type="number"]::-webkit-outer-spin-button { |
|||
/* 设置高度为自动，适应内容 */ |
|||
height: auto; |
|||
} |
|||
/* 搜索按钮内图标外观去除 - 搜索输入框样式 */ |
|||
[type="search"]::-webkit-search-cancel-button, |
|||
[type="search"]::-webkit-search-decoration { |
|||
/* 移除WebKit浏览器搜索框默认样式 */ |
|||
-webkit-appearance: none; |
|||
} |
|||
/* 输入框的占位符样式 - WebKit浏览器占位符样式 */ |
|||
::-webkit-input-placeholder { |
|||
/* 继承父元素颜色 */ |
|||
color: inherit; |
|||
/* 设置透明度为0.54，创建半透明效果 */ |
|||
opacity: 0.54; |
|||
} |
|||
/* 文件选择按钮样式统一 - 文件上传按钮样式 */ |
|||
::-webkit-file-upload-button { |
|||
/* 设置WebKit浏览器按钮外观 */ |
|||
-webkit-appearance: button; |
|||
/* 继承父元素字体样式 */ |
|||
font: inherit; |
|||
} |
|||
/* 占位符显示统一 - 通用占位符样式 */ |
|||
::placeholder { |
|||
/* 设置占位符颜色，使用CSS变量 */ |
|||
color: var(--color-fg-subtle); |
|||
/* 设置完全不透明 */ |
|||
opacity: 1; |
|||
} |
|||
/* table内的td,th去除留白 - 表格单元格样式 */ |
|||
td, |
|||
th { |
|||
/* 移除表格单元格内边距 */ |
|||
padding: 0; |
|||
} |
|||
/* 伸缩框鼠标显示 - 详情框摘要样式 */ |
|||
details summary { |
|||
/* 设置鼠标悬停时显示手型光标 */ |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* 未展开的详情框隐藏内容 - 详情框内容显示控制 */ |
|||
details:not([open]) > *:not(summary) { |
|||
/* 强制隐藏未展开详情框内的非摘要内容 */ |
|||
display: none !important; |
|||
} |
|||
/* 按键显示 - 键盘按键样式 */ |
|||
kbd { |
|||
/* 设置为内联块级元素，可以设置宽高但不会独占一行 */ |
|||
display: inline-block; |
|||
/* 设置内边距为3px上下，5px左右 */ |
|||
padding: 3px 5px; |
|||
/* 设置字体为11px等宽字体，包含多种等宽字体备选 */ |
|||
font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; |
|||
/* 设置行高为10px */ |
|||
line-height: 10px; |
|||
/* 设置文本颜色，使用CSS变量 */ |
|||
color: var(--color-fg-default); |
|||
/* 设置垂直对齐为中间 */ |
|||
vertical-align: middle; |
|||
/* 设置背景色，使用CSS变量 */ |
|||
background-color: var(--color-canvas-subtle); |
|||
/* 设置边框为1px实线，使用CSS变量 */ |
|||
border: solid 1px var(--color-neutral-muted); |
|||
/* 设置底部边框颜色，使用CSS变量 */ |
|||
border-bottom-color: var(--color-neutral-muted); |
|||
/* 设置圆角为6px */ |
|||
border-radius: 6px; |
|||
/* 设置内阴影，创建按键凹陷效果 */ |
|||
box-shadow: inset 0 -1px 0 var(--color-neutral-muted); |
|||
} |
|||
/* 清除浮动工具类 - 清除浮动伪元素 */ |
|||
.clearfix:before, |
|||
.clearfix:after { |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
} |
|||
/* 清除浮动工具类 - after伪元素 */ |
|||
.clearfix:after { |
|||
/* 清除左右浮动 */ |
|||
clear: both; |
|||
} |
|||
/* 清除浮动工具类 - 主容器 */ |
|||
.clearfix { |
|||
/* 触发IE的hasLayout属性，用于清除浮动 */ |
|||
zoom: 1; |
|||
} |
|||
/* 强制文本换行 - 文本换行工具类 */ |
|||
.textwrap, |
|||
.textwrap td, |
|||
.textwrap th { |
|||
/* 允许长单词在必要时换行，防止溢出 */ |
|||
word-wrap: break-word; |
|||
/* 强制在任意字符间换行，防止溢出 */ |
|||
word-break: break-all; |
|||
} |
|||
/* 文本换行表格 - 固定表格布局 */ |
|||
.textwrap-table { |
|||
/* 设置表格布局为固定，提高渲染性能 */ |
|||
table-layout: fixed; |
|||
} |
|||
/* 无序列表样式 - 项目符号列表 */ |
|||
ul { |
|||
/* 重置左边距为0 */ |
|||
margin-left: 0; |
|||
/* 重置左内边距为0 */ |
|||
padding-left: 0; |
|||
/* 设置左边距为2em，创建缩进效果 */ |
|||
margin-left: 2em; |
|||
/* 设置列表样式为实心圆点 */ |
|||
list-style: disc; |
|||
} |
|||
/* 有序列表样式 - 数字列表 */ |
|||
ol { |
|||
/* 重置左边距为0 */ |
|||
margin-left: 0; |
|||
/* 重置左内边距为0 */ |
|||
padding-left: 0; |
|||
/* 设置左边距为2em，创建缩进效果 */ |
|||
margin-left: 2em; |
|||
/* 设置列表样式为数字 */ |
|||
list-style: decimal; |
|||
/* 列表项样式 */ |
|||
li { |
|||
/* 设置左内边距为0.4em，增加数字与文本间距 */ |
|||
padding-left: 0.4em; |
|||
} |
|||
} |
|||
/* 相邻列表项间距 - 列表项之间的间距 */ |
|||
li + li { |
|||
/* 设置顶部外边距为0.25em，增加列表项间距 */ |
|||
margin-top: 0.25em; |
|||
} |
|||
/* 嵌套列表样式 - 列表项内的子列表 */ |
|||
li { |
|||
/* 无序子列表样式 */ |
|||
ul { |
|||
/* 设置底部外边距为0.8em */ |
|||
margin-bottom: 0.8em; |
|||
/* 设置左边距为2em，创建嵌套缩进 */ |
|||
margin-left: 2em; |
|||
/* 设置列表样式为空心圆点 */ |
|||
list-style: circle; |
|||
/* 三级无序列表样式 */ |
|||
li { |
|||
ul { |
|||
/* 设置列表样式为实心方块 */ |
|||
list-style: square; |
|||
} |
|||
} |
|||
} |
|||
/* 有序子列表样式 */ |
|||
ol { |
|||
/* 设置底部外边距为0.8em */ |
|||
margin-bottom: 0.8em; |
|||
/* 设置左边距为2em，创建嵌套缩进 */ |
|||
margin-left: 2em; |
|||
} |
|||
} |
|||
/* 任务列表项样式 - 待办事项列表项 */ |
|||
.task-list-item { |
|||
/* 移除列表样式，不显示项目符号 */ |
|||
list-style-type: none; |
|||
/* 设置相对定位，用于绝对定位子元素 */ |
|||
position: relative; |
|||
/* 第一个子输入框样式 */ |
|||
> input { |
|||
/* 第一个子元素右边距 */ |
|||
&:nth-child(1) { |
|||
/* 设置右边距为6px */ |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
/* 标签样式 */ |
|||
label { |
|||
/* 设置字体粗细为正常（400） */ |
|||
font-weight: 400; |
|||
} |
|||
/* 拖拽手柄样式 */ |
|||
.handle { |
|||
/* 隐藏拖拽手柄 */ |
|||
display: none; |
|||
} |
|||
/* 复选框样式 */ |
|||
input[type="checkbox"] { |
|||
/* 设置宽度为0.9em */ |
|||
width: 0.9em; |
|||
/* 设置高度为0.9em */ |
|||
height: 0.9em; |
|||
/* 设置绝对定位 */ |
|||
position: absolute; |
|||
/* 向左偏移1.3em */ |
|||
left: -1.3em; |
|||
/* 向下偏移0.35em */ |
|||
top: 0.35em; |
|||
} |
|||
} |
|||
/* 启用的任务列表项样式 */ |
|||
.task-list-item.enabled { |
|||
/* 标签样式 */ |
|||
label { |
|||
/* 设置鼠标悬停时显示手型光标 */ |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
/* 相邻任务列表项间距 */ |
|||
.task-list-item + .task-list-item { |
|||
/* 设置顶部外边距为3px */ |
|||
margin-top: 3px; |
|||
} |
|||
/* 包含任务列表的容器样式 */ |
|||
.contains-task-list { |
|||
// margin-left: 0.6em; // 备用左边距 |
|||
/* 从右到左文本方向样式 */ |
|||
&:dir(rtl) { |
|||
.task-list-item { |
|||
input[type="checkbox"] { |
|||
/* 设置复选框外边距，适配RTL布局 */ |
|||
margin: 0 -1.6em 0.25em 0.2em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 目录样式 - 表格目录容器 */ |
|||
.toc { |
|||
/* 重置左边距为0 */ |
|||
margin-left: 0; |
|||
} |
|||
|
|||
/* 定义列表样式 - 描述列表容器 */ |
|||
dl { |
|||
/* 设置为块级元素 */ |
|||
display: block; |
|||
/* 设置块级起始外边距为1em */ |
|||
margin-block-start: 1em; |
|||
/* 设置块级结束外边距为1em */ |
|||
margin-block-end: 1em; |
|||
/* 设置内联起始外边距为0px */ |
|||
margin-inline-start: 0px; |
|||
/* 设置内联结束外边距为0px */ |
|||
margin-inline-end: 0px; |
|||
/* 设置Unicode双向算法为隔离 */ |
|||
unicode-bidi: isolate; |
|||
/* 定义术语样式 */ |
|||
dt { |
|||
/* 设置为块级元素 */ |
|||
display: block; |
|||
/* 设置Unicode双向算法为隔离 */ |
|||
unicode-bidi: isolate; |
|||
} |
|||
/* 定义描述样式 */ |
|||
dd { |
|||
/* 设置为块级元素 */ |
|||
display: block; |
|||
/* 设置内联起始外边距为40px，创建缩进效果 */ |
|||
margin-inline-start: 40px; |
|||
/* 设置Unicode双向算法为隔离 */ |
|||
unicode-bidi: isolate; |
|||
} |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,136 @@ |
|||
@charset "UTF-8"; |
|||
/* 首页样式 */ |
|||
.hero-section { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.hero-section::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: url("/images/hero-bg.svg") no-repeat center center; |
|||
background-size: cover; |
|||
opacity: 0.1; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.hero-content { |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.feature-card { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.feature-card:hover { |
|||
transform: translateY(-5px); |
|||
} |
|||
|
|||
.feature-card .material-symbols-light--article, |
|||
.feature-card .material-symbols-light--bookmark, |
|||
.feature-card .material-symbols-light--person { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.feature-card:hover .material-symbols-light--article, |
|||
.feature-card:hover .material-symbols-light--bookmark, |
|||
.feature-card:hover .material-symbols-light--person { |
|||
transform: scale(1.1); |
|||
} |
|||
|
|||
.stats-section { |
|||
position: relative; |
|||
} |
|||
|
|||
.stats-section::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: url("/images/stats-bg.svg") no-repeat center center; |
|||
background-size: cover; |
|||
opacity: 0.05; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.stat-item { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.stat-item:hover { |
|||
transform: scale(1.05); |
|||
} |
|||
|
|||
.user-dashboard { |
|||
position: relative; |
|||
} |
|||
|
|||
.user-dashboard::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: url("/images/dashboard-bg.svg") no-repeat center center; |
|||
background-size: cover; |
|||
opacity: 0.03; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.avatar { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.avatar:hover { |
|||
transform: scale(1.05); |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 768px) { |
|||
.hero-section { |
|||
padding: 4rem 0; |
|||
} |
|||
.hero-content h1 { |
|||
font-size: 2.5rem; |
|||
} |
|||
.features-grid { |
|||
grid-template-columns: 1fr; |
|||
} |
|||
.stats-grid { |
|||
grid-template-columns: 1fr 1fr; |
|||
} |
|||
.user-info { |
|||
text-align: center; |
|||
margin-bottom: 1.5rem; |
|||
} |
|||
.user-actions { |
|||
justify-content: center; |
|||
} |
|||
} |
|||
@media (max-width: 480px) { |
|||
.hero-content h1 { |
|||
font-size: 2rem; |
|||
} |
|||
.hero-content p { |
|||
font-size: 1rem; |
|||
} |
|||
.stats-grid { |
|||
grid-template-columns: 1fr; |
|||
} |
|||
.hero-actions { |
|||
flex-direction: column; |
|||
gap: 1rem; |
|||
} |
|||
.hero-actions a { |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,83 @@ |
|||
const path = require("path") |
|||
const sass = require("sass") |
|||
const extend = require("extend-shallow") |
|||
|
|||
exports.name = "scss" |
|||
exports.outputFormat = "css" |
|||
|
|||
exports.render = function (str, options) { |
|||
const includePaths = [ |
|||
path.parse(options.filename).dir, |
|||
...options.includePaths, |
|||
] |
|||
|
|||
const input = extend({}, options, { data: str, includePaths }) |
|||
// TODO: Replace with sass.compileString()
|
|||
const out = sass.renderSync(input) |
|||
return { |
|||
body: out.css.toString(), |
|||
dependencies: out.stats.includedFiles.map(filename => { |
|||
return path.resolve(filename) |
|||
}), |
|||
} |
|||
} |
|||
|
|||
exports.renderAsync = function (str, options) { |
|||
const input = extend({}, options, { data: str }) |
|||
return new Promise((resolve, reject) => { |
|||
// TODO: Replace with sass.compileStringAsync()
|
|||
sass.render(input, (err, out) => { |
|||
if (err) { |
|||
return reject(err) |
|||
} |
|||
|
|||
return resolve({ |
|||
body: out.css.toString(), |
|||
dependencies: out.stats.includedFiles.map(filename => { |
|||
return path.resolve(filename) |
|||
}), |
|||
}) |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
exports.renderFile = function (filename, options) { |
|||
const input = extend({}, options, { |
|||
file: path.resolve(filename), |
|||
}) |
|||
// TODO: Replace with sass.compile()
|
|||
const out = sass.renderSync(input) |
|||
return { |
|||
body: out.css.toString(), |
|||
dependencies: out.stats.includedFiles |
|||
.map(filename => { |
|||
return path.resolve(filename) |
|||
}) |
|||
.filter(name => { |
|||
return name !== filename |
|||
}), |
|||
} |
|||
} |
|||
|
|||
exports.renderFileAsync = function (filename, options) { |
|||
const input = extend({}, options, { file: path.resolve(filename) }) |
|||
return new Promise((resolve, reject) => { |
|||
// TODO: Replace with sass.compileAsync()
|
|||
sass.render(input, (err, out) => { |
|||
if (err) { |
|||
return reject(err) |
|||
} |
|||
|
|||
return resolve({ |
|||
body: out.css.toString(), |
|||
dependencies: out.stats.includedFiles |
|||
.map(filename => { |
|||
return path.resolve(filename) |
|||
}) |
|||
.filter(name => { |
|||
return name !== filename |
|||
}), |
|||
}) |
|||
}) |
|||
}) |
|||
} |
|||
@ -1,22 +0,0 @@ |
|||
extends /layouts/empty.pug |
|||
|
|||
block pageHead |
|||
style |
|||
:scss(includePaths=["D:/@code/demo/koa3-demo/src/views/page/index", "D:/@code/demo/koa3-demo/src/views"]) |
|||
//- process.env.SASS_PATH = "D:/@code/demo/koa3-demo/src/views/page/index" |
|||
@import "./index.scss"; |
|||
$color: red; |
|||
* { |
|||
color: $color; |
|||
} |
|||
|
|||
|
|||
block pageContent |
|||
:markdown-it(linkify langPrefix='highlight-') |
|||
# Markdown |
|||
|
|||
Markdown document with http://links.com and |
|||
|
|||
```js |
|||
var codeBlocks; |
|||
``` |
|||
@ -1,19 +1,22 @@ |
|||
extends /layouts/empty.pug |
|||
|
|||
block pageHead |
|||
style |
|||
|
|||
:scss |
|||
@use "./_global.scss"; |
|||
@use "./style.scss"; |
|||
@use "./markdown-reset.scss"; |
|||
@use "./markdown-green.scss"; |
|||
|
|||
|
|||
block pageContent |
|||
:my-own-filter(addStart addEnd) |
|||
Filter |
|||
Body |
|||
:markdown-it(linkify langPrefix='highlight-') |
|||
# Markdown |
|||
.markdown-body |
|||
:markdown-it(linkify langPrefix='highlight-') |
|||
# Markdown |
|||
|
|||
Markdown document with http://links.com and |
|||
Markdown document with http://links.com and |
|||
|
|||
```js |
|||
var codeBlocks; |
|||
``` |
|||
```js |
|||
var codeBlocks; |
|||
``` |
|||
|
|||
> blockquote |
|||
@ -0,0 +1,316 @@ |
|||
@mixin chinese() { |
|||
&.chinese { |
|||
text-indent: 1.5em; |
|||
font-weight: 300; |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
ol, |
|||
ul, |
|||
blockquote, |
|||
details, |
|||
summary, |
|||
pre, |
|||
.tabs { |
|||
text-indent: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
// ::selection { |
|||
// background-color: #1abc9c; |
|||
// color: #fff; |
|||
// } |
|||
|
|||
// pre ::selection { |
|||
// color: inherit; |
|||
// } |
|||
|
|||
.markdown-body { |
|||
--color-base: #ef4444; |
|||
--markdown-bg: white; |
|||
--color-bg: #ff47479c; |
|||
--color-light: #ef44441a; |
|||
--color-extra: rgba(239, 68, 68, 0.3); |
|||
--color-more: rgba(239, 68, 68, 0.4); |
|||
} |
|||
|
|||
.markdown-body.green { |
|||
background-color: var(--markdown-bg); |
|||
@apply p-3 lg:p-6; |
|||
|
|||
strong { |
|||
&::before { |
|||
content: "『"; |
|||
} |
|||
&::after { |
|||
content: "』"; |
|||
} |
|||
// color: #ff4d20; |
|||
} |
|||
|
|||
/* 块/段落引用 */ |
|||
// blockquote { |
|||
// position: relative; |
|||
// // color: #555; |
|||
// font-weight: 400; |
|||
// border-left: 6px solid var(--color-base); |
|||
// padding-left: 1em; |
|||
// margin-left: 0; |
|||
// padding: 1em; |
|||
// background-color: var(--color-light); |
|||
// } |
|||
|
|||
blockquote { |
|||
position: relative; |
|||
z-index: 600; |
|||
padding: 20px 20px 15px 20px; |
|||
line-height: 1.4 !important; |
|||
background-color: rgba(239, 68, 68, 0.06); |
|||
border-radius: 0.4em; |
|||
> * { |
|||
position: relative; |
|||
&:first-child:before { |
|||
content: "\201C"; |
|||
color: var(--color-light); |
|||
font-size: 6.5em; |
|||
font-weight: 700; |
|||
transform: rotate(15deg) translateX(-10px); |
|||
opacity: 1; |
|||
position: absolute; |
|||
top: -0.4em; |
|||
left: -0.2em; |
|||
text-shadow: none; |
|||
z-index: -10; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tabs { |
|||
margin-top: 0; |
|||
margin-bottom: 1em; |
|||
} |
|||
|
|||
/* 让链接在 hover 状态下显示下划线 */ |
|||
// a { |
|||
// color: var(--color-base); |
|||
// text-decoration: none; |
|||
// &:hover { |
|||
// text-decoration: underline; |
|||
// } |
|||
// } |
|||
a { |
|||
position: relative; |
|||
z-index: 10; |
|||
transition: color 0.3s linear; |
|||
cursor: pointer; |
|||
font-weight: bolder; |
|||
// text-decoration: underline #c7254e; |
|||
text-decoration: none; |
|||
color: var(--color-base); |
|||
border-bottom: 1px solid currentColor; |
|||
padding: 0 4px; |
|||
&[data-footnote-backref], |
|||
&[data-footnote-ref] { |
|||
// text-decoration: none; |
|||
border: none; |
|||
&:hover { |
|||
background: none; |
|||
animation: none; |
|||
} |
|||
} |
|||
&:hover { |
|||
content: ""; |
|||
// text-decoration: none; |
|||
border: none; |
|||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") |
|||
repeat-x 0 100%; |
|||
background-size: 20px auto; |
|||
animation: waveMove 1s infinite linear; |
|||
} |
|||
@keyframes waveMove { |
|||
0% { |
|||
background-position: 0 100%; |
|||
} |
|||
100% { |
|||
background-position: -20px 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 由prism.scss处理了 |
|||
pre { |
|||
background: var(--prism-background); |
|||
font-size: var(--prism-font-size); |
|||
// /* border: 1px solid #ddd; */ |
|||
// padding: 1em 1.5em; |
|||
display: block; |
|||
-webkit-overflow-scrolling: touch; |
|||
} |
|||
|
|||
pre, |
|||
pre code { |
|||
font-family: var(--prism-font-family); |
|||
} |
|||
|
|||
// /* 底部印刷体、版本等标记 */ |
|||
small, |
|||
/* 图片说明 */ |
|||
figcaption { |
|||
font-size: 0.75em; |
|||
color: #888; |
|||
} |
|||
// .markdown-body { |
|||
legend { |
|||
color: #000; |
|||
font-weight: inherit; |
|||
} |
|||
caption { |
|||
color: #000; |
|||
font-weight: inherit; |
|||
} |
|||
del { |
|||
text-decoration: line-through var(--color-base) 2px; |
|||
} |
|||
code { |
|||
color: rgb(45, 55, 72); |
|||
background-color: rgba(160, 174, 192, 0.25); |
|||
font-family: inherit; |
|||
font-size: 1em; |
|||
// color: #ffffff; |
|||
// background-color: #ff4c209c; |
|||
border-radius: 4px; |
|||
padding: 1px 6px; |
|||
// font-size: 0.875em; |
|||
// font-size: 1.0769em; |
|||
// position: relative; |
|||
// top: 0.1em; |
|||
margin: 0 2px; |
|||
vertical-align: bottom; |
|||
} |
|||
pre { |
|||
code { |
|||
padding: 0; |
|||
font-size: inherit; |
|||
font-weight: inherit; |
|||
color: inherit; |
|||
white-space: pre; |
|||
background-color: transparent; |
|||
vertical-align: baseline; |
|||
border-radius: 0; |
|||
margin: 0; |
|||
} |
|||
} |
|||
table { |
|||
width: 100%; |
|||
display: table; |
|||
border: 1px solid var(--color-light); |
|||
tr:hover { |
|||
background: var(--color-light); |
|||
} |
|||
&:hover { |
|||
border: 1px solid var(--color-extra); |
|||
th { |
|||
border-right: 1px solid var(--color-extra); |
|||
background: var(--color-extra); |
|||
border-bottom: 1px solid var(--color-extra); |
|||
} |
|||
td { |
|||
border-right: 1px solid var(--color-extra); |
|||
} |
|||
caption { |
|||
border-right: 1px solid var(--color-extra); |
|||
} |
|||
thead { |
|||
th { |
|||
background: var(--color-extra); |
|||
} |
|||
} |
|||
} |
|||
// table-layout: fixed; |
|||
th { |
|||
border-right: 1px solid var(--color-light); |
|||
padding: 0.5em 1em; |
|||
background: var(--color-light); |
|||
border-bottom: 1px solid var(--color-light); |
|||
} |
|||
td { |
|||
border-right: 1px solid var(--color-light); |
|||
padding: 0.5em 1em; |
|||
} |
|||
caption { |
|||
border-right: 1px solid var(--color-light); |
|||
padding: 0.5em 1em; |
|||
border-bottom: none; |
|||
} |
|||
thead { |
|||
th { |
|||
background: var(--color-extra); |
|||
} |
|||
} |
|||
} |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
margin-top: 1.2em; |
|||
margin-bottom: 0.6em; |
|||
line-height: 1.35; |
|||
position: relative; |
|||
} |
|||
h1 { |
|||
font-size: 1.8em; |
|||
} |
|||
h2 { |
|||
font-size: 1.6em; |
|||
} |
|||
h3 { |
|||
font-size: 1.4em; |
|||
} |
|||
h4 { |
|||
font-size: 1.2em; |
|||
} |
|||
h5 { |
|||
font-size: 1em; |
|||
} |
|||
h6 { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
::-webkit-calendar-picker-indicator { |
|||
filter: invert(50%); |
|||
} |
|||
em { |
|||
// color: #000; |
|||
font-weight: inherit; |
|||
position: relative; |
|||
&:after { |
|||
position: absolute; |
|||
top: 0.65em; |
|||
left: 0; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
pointer-events: none; |
|||
color: var(--color-base); |
|||
content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; |
|||
} |
|||
} |
|||
ul.toc { |
|||
li { |
|||
list-style-type: none; |
|||
a { |
|||
text-decoration: none; |
|||
border: 0; |
|||
list-style-type: none; |
|||
} |
|||
} |
|||
} |
|||
@include chinese; |
|||
} |
|||
@ -0,0 +1,677 @@ |
|||
|
|||
/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */ |
|||
@media (prefers-color-scheme: dark) { |
|||
.markdown-body { |
|||
/* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */ |
|||
color-scheme: dark; |
|||
} |
|||
} |
|||
/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */ |
|||
@media (prefers-color-scheme: light) { |
|||
// https://verytoolz.com/blog/03bfb3598f/ |
|||
.markdown-body { |
|||
/* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */ |
|||
color-scheme: light; |
|||
/* 定义CSS自定义属性，用于主题色彩管理 */ |
|||
--color-fg-default: #24292f; // 文本色-默认 - 主要文本颜色 |
|||
--color-fg-muted: #57606a; // 文本色-柔和 - 次要文本颜色 |
|||
--color-fg-subtle: #6e7781; // 文本色-微妙 - 最淡的文本颜色 |
|||
--color-canvas-default: #ffffff; // 底色-默认 - 主要背景颜色 |
|||
--color-canvas-subtle: #f6f8fa; // 底色-微妙 - 次要背景颜色 |
|||
--color-border-default: #d0d7de; // 边框色-默认 - 主要边框颜色 |
|||
--color-border-muted: hsla(210, 18%, 87%, 1); // 边框色-柔和 - 次要边框颜色 |
|||
--color-neutral-muted: rgba(175, 184, 193, 0.2); // 边框色-中性 - 中性边框颜色 |
|||
--color-accent-fg: #0969da; // 文本强调色 - 强调文本颜色 |
|||
--color-accent-emphasis: #0969da; // 背景强调色 - 强调背景颜色 |
|||
--color-attention-subtle: #fff8c5; // 背景注意色 - 注意提示背景色 |
|||
--color-danger-fg: #cf222e; // 文本危险色 - 危险/错误文本颜色 |
|||
--color-mark-default: rgb(255, 255, 0); // mark 默认色 - 标记默认背景色 |
|||
--color-mark-fg: rgb(255, 187, 0); // mark 强调色 - 标记强调背景色 |
|||
} |
|||
} |
|||
|
|||
/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */ |
|||
.markdown-body { |
|||
/* 防止iOS Safari自动调整文本大小 */ |
|||
-webkit-text-size-adjust: 100%; |
|||
/* 防止IE自动调整文本大小 */ |
|||
-ms-text-size-adjust: 100%; |
|||
/* 优化文本渲染质量，提升可读性 */ |
|||
text-rendering: optimizelegibility; |
|||
/* 重置外边距为0 */ |
|||
margin: 0; |
|||
/* 允许长单词在必要时换行，防止溢出 */ |
|||
word-wrap: break-word; |
|||
/* 使用CSS变量设置文本颜色 */ |
|||
color: var(--color-fg-muted); |
|||
/* 伪元素before - 用于清除浮动 */ |
|||
&::before { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
/* 伪元素after - 用于清除浮动 */ |
|||
&::after { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 清除左右浮动 */ |
|||
clear: both; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
/* 第一个子元素 - 移除顶部外边距 */ |
|||
> *:first-child { |
|||
/* 强制移除顶部外边距，避免不必要的空白 */ |
|||
margin-top: 0 !important; |
|||
} |
|||
/* 最后一个子元素 - 移除底部外边距 */ |
|||
> *:last-child { |
|||
/* 强制移除底部外边距，避免不必要的空白 */ |
|||
margin-bottom: 0 !important; |
|||
} |
|||
/* 块级元素统一间距设置 - 段落、引用、列表、表格等 */ |
|||
p, |
|||
blockquote, |
|||
ul, |
|||
ol, |
|||
dl, |
|||
table, |
|||
hr, |
|||
form, |
|||
pre, |
|||
details { |
|||
/* 移除顶部外边距，避免重复间距 */ |
|||
margin-top: 0; |
|||
/* 设置底部外边距为1em，保持适当间距 */ |
|||
margin-bottom: 1em; |
|||
} |
|||
/* 引用块内部元素间距处理 */ |
|||
blockquote { |
|||
/* 引用块内第一个子元素 - 移除顶部外边距 */ |
|||
& > :first-child { |
|||
margin-top: 0; |
|||
} |
|||
/* 引用块内最后一个子元素 - 移除底部外边距 */ |
|||
& > :last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
/* 统一显示成块状元素 - 确保这些元素独占一行 */ |
|||
details, |
|||
figcaption, |
|||
figure { |
|||
/* 设置为块级元素，独占一行显示 */ |
|||
display: block; |
|||
} |
|||
/* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */ |
|||
audio, |
|||
canvas, |
|||
video { |
|||
/* 设置为内联块级元素，可以设置宽高但不会独占一行 */ |
|||
display: inline-block; |
|||
} |
|||
/* 按钮内部间距统一 - 移除Firefox默认内边距 */ |
|||
button::-moz-focus-inner, |
|||
input::-moz-focus-inner { |
|||
/* 移除Firefox浏览器按钮和输入框的内部内边距 */ |
|||
padding: 0; |
|||
/* 移除Firefox浏览器按钮和输入框的内部边框 */ |
|||
border: 0; |
|||
} |
|||
/* 定义元素显示为斜体 - 术语定义样式 */ |
|||
dfn { |
|||
/* 设置字体为斜体，用于术语定义 */ |
|||
font-style: italic; |
|||
} |
|||
/* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */ |
|||
table { |
|||
/* 合并表格边框，相邻单元格边框合并为一条 */ |
|||
border-collapse: collapse; |
|||
/* 设置表格单元格间距为0 */ |
|||
border-spacing: 0; |
|||
/* 设置为块级元素，可以设置宽高 */ |
|||
display: block; |
|||
/* 宽度根据内容自适应 */ |
|||
width: max-content; |
|||
/* 最大宽度不超过父容器 */ |
|||
max-width: 100%; |
|||
/* 内容溢出时显示滚动条 */ |
|||
overflow: auto; |
|||
} |
|||
/* 可拖动文件添加拖动手势 - 拖拽元素样式 */ |
|||
[draggable] { |
|||
/* 设置鼠标悬停时显示移动光标 */ |
|||
cursor: move; |
|||
} |
|||
/* 加粗元素 - 粗体文本样式 */ |
|||
b, |
|||
strong { |
|||
/* 设置字体粗细，使用CSS变量或默认600 */ |
|||
font-weight: var(--base-text-weight-semibold, 600); |
|||
} |
|||
/* 缩写元素样式统一 - 缩写和首字母缩写样式 */ |
|||
abbr, |
|||
acronym { |
|||
/* 移除底部边框 */ |
|||
border-bottom: none; |
|||
/* 设置字体变体为正常 */ |
|||
font-variant: normal; |
|||
/* 设置虚线下划线装饰 */ |
|||
text-decoration: underline dotted; |
|||
} |
|||
/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ |
|||
abbr { |
|||
/* 设置鼠标悬停时显示帮助光标 */ |
|||
cursor: help; |
|||
} |
|||
/* 一致的 del 样式 - 删除线文本样式 */ |
|||
del { |
|||
/* 设置文本装饰为删除线 */ |
|||
text-decoration: line-through; |
|||
} |
|||
/* a标签去除下划线 - 链接样式处理 */ |
|||
a { |
|||
/* 默认移除下划线，保持页面简洁 */ |
|||
text-decoration: none; |
|||
/* 没有href属性的链接样式 */ |
|||
&:not([href]) { |
|||
/* 继承父元素颜色 */ |
|||
color: inherit; |
|||
/* 移除下划线装饰 */ |
|||
text-decoration: none; |
|||
} |
|||
/* 鼠标悬停时显示下划线 */ |
|||
&:hover { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
/* 默认不显示下划线，保持页面简洁 - 插入文本样式 */ |
|||
ins { |
|||
/* 移除下划线装饰，保持页面简洁 */ |
|||
text-decoration: none; |
|||
} |
|||
/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， |
|||
* 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号 |
|||
* 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element |
|||
* 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated |
|||
* 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/ |
|||
*/ |
|||
u, |
|||
.typo-u { |
|||
/* 设置文本装饰为下划线，用于专名号显示 */ |
|||
text-decoration: underline; |
|||
} |
|||
/* 隐藏指定元素 - 隐藏带有hidden属性的元素 */ |
|||
[hidden] { |
|||
/* 强制隐藏元素，优先级最高 */ |
|||
display: none !important; |
|||
} |
|||
/* 伸缩框显示为列表元素 - 详情框摘要样式 */ |
|||
summary { |
|||
/* 设置为列表项显示，显示为可点击的列表项 */ |
|||
display: list-item; |
|||
} |
|||
/* 引用元素前后内容 - 移除默认引号 */ |
|||
q:before, |
|||
q:after { |
|||
/* 移除引用元素前后的默认引号内容 */ |
|||
content: ""; |
|||
} |
|||
/* 表格标题和表头文本对齐 - 默认左对齐 */ |
|||
caption, |
|||
th { |
|||
/* 设置文本左对齐 */ |
|||
text-align: left; |
|||
} |
|||
/* 居中对齐的表格标题和表头 */ |
|||
caption[align="center"], |
|||
th[align="center"] { |
|||
/* 设置文本居中对齐 */ |
|||
text-align: center; |
|||
} |
|||
/* 特定元素字体粗细统一 - 地址、标题、引用等 */ |
|||
address, |
|||
caption, |
|||
cite, |
|||
em, |
|||
th, |
|||
var { |
|||
/* 设置字体粗细为正常（400） */ |
|||
font-weight: 400; |
|||
} |
|||
/* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */ |
|||
mark { |
|||
/* 设置标记背景色，使用CSS变量 */ |
|||
background: var(--color-mark-default); |
|||
// background: #fffdd1; // 备用背景色 |
|||
// border-bottom: 1px solid #ffedce; // 备用底部边框 |
|||
/* 设置内边距，增加标记的可读性 */ |
|||
padding: 2px; |
|||
|
|||
/* 激活状态的标记样式 */ |
|||
&.active { |
|||
/* 激活时使用强调色背景 */ |
|||
background: var(--color-mark-fg); |
|||
} |
|||
// margin: 0 5px; // 备用外边距 |
|||
} |
|||
/* 统一h1元素的间隔和字体大小 - 一级标题样式 */ |
|||
h1 { |
|||
/* 设置上下外边距为0.67em */ |
|||
margin: 0.67em 0; |
|||
/* 设置字体粗细，使用CSS变量或默认600 */ |
|||
font-weight: var(--base-text-weight-semibold, 600); |
|||
/* 设置字体大小为2倍基础大小 */ |
|||
font-size: 2em; |
|||
} |
|||
/* small字体缩小 - 小字体文本样式 */ |
|||
small { |
|||
/* 设置字体大小为父元素的90% */ |
|||
font-size: 90%; |
|||
} |
|||
/* 上下标显示 - 下标和上标文本样式 */ |
|||
sub, |
|||
sup { |
|||
/* 设置字体大小为75% */ |
|||
font-size: 75%; |
|||
/* 设置行高为0，避免影响行间距 */ |
|||
line-height: 0; |
|||
/* 设置相对定位，用于精确控制位置 */ |
|||
position: relative; |
|||
/* 设置垂直对齐为基线 */ |
|||
vertical-align: baseline; |
|||
} |
|||
/* 上下标内链接样式 */ |
|||
sub a, |
|||
sup a { |
|||
/* 设置左右内边距为0.1em */ |
|||
padding: 0 0.1em; |
|||
} |
|||
/* 下标位置调整 */ |
|||
sub { |
|||
/* 向下偏移0.25em */ |
|||
bottom: -0.25em; |
|||
} |
|||
/* 上标位置调整 */ |
|||
sup { |
|||
/* 向上偏移0.5em */ |
|||
top: -0.5em; |
|||
} |
|||
/* 代码相关的字体大小统一 - 代码元素字体样式 */ |
|||
code, |
|||
kbd, |
|||
pre, |
|||
samp, |
|||
pre tt { |
|||
/* 设置字体为等宽字体，便于代码阅读 */ |
|||
font-family: monospace; |
|||
/* 设置字体大小为1em，保持一致性 */ |
|||
font-size: 1em; |
|||
} |
|||
/* 去除默认边框 - 移除字段集和图片的默认边框 */ |
|||
fieldset, |
|||
img { |
|||
/* 移除边框 */ |
|||
border: 0; |
|||
} |
|||
/* 图片初始化样式 - 图片元素基础样式 */ |
|||
img { |
|||
/* 设置边框样式为无 */ |
|||
border-style: none; |
|||
/* 设置最大宽度为100%，防止溢出 */ |
|||
max-width: 100%; |
|||
/* 设置盒模型为内容盒模型 */ |
|||
box-sizing: content-box; |
|||
/* 设置左右外边距为自动，实现居中 */ |
|||
margin: 0 auto; |
|||
/* 设置背景色，使用CSS变量 */ |
|||
background-color: var(--color-canvas-default); |
|||
} |
|||
/* 可附标题内容元素的间距 - 图片容器样式 */ |
|||
figure { |
|||
/* 设置上下外边距为1em，左右外边距为40px */ |
|||
margin: 1em 40px; |
|||
} |
|||
/* 间隔线 - 水平分隔线样式 */ |
|||
/* 一致化 horizontal rule - 统一水平分隔线样式 */ |
|||
hr { |
|||
/* 设置盒模型为内容盒模型 */ |
|||
box-sizing: content-box; |
|||
/* 隐藏溢出内容 */ |
|||
overflow: hidden; |
|||
/* 设置背景为透明 */ |
|||
background: transparent; |
|||
/* 设置底部边框，使用CSS变量 */ |
|||
border-bottom: 1px solid var(--color-border-muted); |
|||
/* 设置高度为0.25em */ |
|||
height: 0.25em; |
|||
/* 移除内边距 */ |
|||
padding: 0; |
|||
/* 设置上下外边距为24px */ |
|||
margin: 24px 0; |
|||
/* 设置背景色，使用CSS变量 */ |
|||
background-color: var(--color-border-default); |
|||
/* 移除边框 */ |
|||
border: 0; |
|||
/* 伪元素before - 用于清除浮动 */ |
|||
&::before { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
/* 伪元素after - 用于清除浮动 */ |
|||
&::after { |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
/* 清除左右浮动 */ |
|||
clear: both; |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
} |
|||
} |
|||
|
|||
/* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */ |
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
/* 继承父元素的字体样式 */ |
|||
font: inherit; |
|||
/* 移除外边距 */ |
|||
margin: 0; |
|||
/* 设置溢出为可见 */ |
|||
overflow: visible; |
|||
/* 继承父元素的字体族 */ |
|||
font-family: inherit; |
|||
/* 继承父元素的字体大小 */ |
|||
font-size: inherit; |
|||
/* 继承父元素的行高 */ |
|||
line-height: inherit; |
|||
} |
|||
/* 外观显示为按钮 - 按钮类型输入框样式 */ |
|||
[type="button"], |
|||
[type="reset"], |
|||
[type="submit"] { |
|||
/* 设置WebKit浏览器按钮外观 */ |
|||
-webkit-appearance: button; |
|||
/* 设置标准按钮外观，提高兼容性 */ |
|||
appearance: button; |
|||
} |
|||
/* 这两个表单样式规则覆盖 - 复选框和单选框样式 */ |
|||
[type="checkbox"], |
|||
[type="radio"] { |
|||
/* 设置盒模型为边框盒模型 */ |
|||
box-sizing: border-box; |
|||
/* 移除内边距 */ |
|||
padding: 0; |
|||
} |
|||
/* 数字按钮内部高度自动 - 数字输入框按钮样式 */ |
|||
[type="number"]::-webkit-inner-spin-button, |
|||
[type="number"]::-webkit-outer-spin-button { |
|||
/* 设置高度为自动，适应内容 */ |
|||
height: auto; |
|||
} |
|||
/* 搜索按钮内图标外观去除 - 搜索输入框样式 */ |
|||
[type="search"]::-webkit-search-cancel-button, |
|||
[type="search"]::-webkit-search-decoration { |
|||
/* 移除WebKit浏览器搜索框默认样式 */ |
|||
-webkit-appearance: none; |
|||
} |
|||
/* 输入框的占位符样式 - WebKit浏览器占位符样式 */ |
|||
::-webkit-input-placeholder { |
|||
/* 继承父元素颜色 */ |
|||
color: inherit; |
|||
/* 设置透明度为0.54，创建半透明效果 */ |
|||
opacity: 0.54; |
|||
} |
|||
/* 文件选择按钮样式统一 - 文件上传按钮样式 */ |
|||
::-webkit-file-upload-button { |
|||
/* 设置WebKit浏览器按钮外观 */ |
|||
-webkit-appearance: button; |
|||
/* 继承父元素字体样式 */ |
|||
font: inherit; |
|||
} |
|||
/* 占位符显示统一 - 通用占位符样式 */ |
|||
::placeholder { |
|||
/* 设置占位符颜色，使用CSS变量 */ |
|||
color: var(--color-fg-subtle); |
|||
/* 设置完全不透明 */ |
|||
opacity: 1; |
|||
} |
|||
/* table内的td,th去除留白 - 表格单元格样式 */ |
|||
td, |
|||
th { |
|||
/* 移除表格单元格内边距 */ |
|||
padding: 0; |
|||
} |
|||
/* 伸缩框鼠标显示 - 详情框摘要样式 */ |
|||
details summary { |
|||
/* 设置鼠标悬停时显示手型光标 */ |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* 未展开的详情框隐藏内容 - 详情框内容显示控制 */ |
|||
details:not([open]) > *:not(summary) { |
|||
/* 强制隐藏未展开详情框内的非摘要内容 */ |
|||
display: none !important; |
|||
} |
|||
/* 按键显示 - 键盘按键样式 */ |
|||
kbd { |
|||
/* 设置为内联块级元素，可以设置宽高但不会独占一行 */ |
|||
display: inline-block; |
|||
/* 设置内边距为3px上下，5px左右 */ |
|||
padding: 3px 5px; |
|||
/* 设置字体为11px等宽字体，包含多种等宽字体备选 */ |
|||
font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; |
|||
/* 设置行高为10px */ |
|||
line-height: 10px; |
|||
/* 设置文本颜色，使用CSS变量 */ |
|||
color: var(--color-fg-default); |
|||
/* 设置垂直对齐为中间 */ |
|||
vertical-align: middle; |
|||
/* 设置背景色，使用CSS变量 */ |
|||
background-color: var(--color-canvas-subtle); |
|||
/* 设置边框为1px实线，使用CSS变量 */ |
|||
border: solid 1px var(--color-neutral-muted); |
|||
/* 设置底部边框颜色，使用CSS变量 */ |
|||
border-bottom-color: var(--color-neutral-muted); |
|||
/* 设置圆角为6px */ |
|||
border-radius: 6px; |
|||
/* 设置内阴影，创建按键凹陷效果 */ |
|||
box-shadow: inset 0 -1px 0 var(--color-neutral-muted); |
|||
} |
|||
/* 清除浮动工具类 - 清除浮动伪元素 */ |
|||
.clearfix:before, |
|||
.clearfix:after { |
|||
/* 空内容，仅用于布局 */ |
|||
content: ""; |
|||
/* 设置为表格显示模式，用于清除浮动 */ |
|||
display: table; |
|||
} |
|||
/* 清除浮动工具类 - after伪元素 */ |
|||
.clearfix:after { |
|||
/* 清除左右浮动 */ |
|||
clear: both; |
|||
} |
|||
/* 清除浮动工具类 - 主容器 */ |
|||
.clearfix { |
|||
/* 触发IE的hasLayout属性，用于清除浮动 */ |
|||
zoom: 1; |
|||
} |
|||
/* 强制文本换行 - 文本换行工具类 */ |
|||
.textwrap, |
|||
.textwrap td, |
|||
.textwrap th { |
|||
/* 允许长单词在必要时换行，防止溢出 */ |
|||
word-wrap: break-word; |
|||
/* 强制在任意字符间换行，防止溢出 */ |
|||
word-break: break-all; |
|||
} |
|||
/* 文本换行表格 - 固定表格布局 */ |
|||
.textwrap-table { |
|||
/* 设置表格布局为固定，提高渲染性能 */ |
|||
table-layout: fixed; |
|||
} |
|||
/* 无序列表样式 - 项目符号列表 */ |
|||
ul { |
|||
/* 重置左边距为0 */ |
|||
margin-left: 0; |
|||
/* 重置左内边距为0 */ |
|||
padding-left: 0; |
|||
/* 设置左边距为2em，创建缩进效果 */ |
|||
margin-left: 2em; |
|||
/* 设置列表样式为实心圆点 */ |
|||
list-style: disc; |
|||
} |
|||
/* 有序列表样式 - 数字列表 */ |
|||
ol { |
|||
/* 重置左边距为0 */ |
|||
margin-left: 0; |
|||
/* 重置左内边距为0 */ |
|||
padding-left: 0; |
|||
/* 设置左边距为2em，创建缩进效果 */ |
|||
margin-left: 2em; |
|||
/* 设置列表样式为数字 */ |
|||
list-style: decimal; |
|||
/* 列表项样式 */ |
|||
li { |
|||
/* 设置左内边距为0.4em，增加数字与文本间距 */ |
|||
padding-left: 0.4em; |
|||
} |
|||
} |
|||
/* 相邻列表项间距 - 列表项之间的间距 */ |
|||
li + li { |
|||
/* 设置顶部外边距为0.25em，增加列表项间距 */ |
|||
margin-top: 0.25em; |
|||
} |
|||
/* 嵌套列表样式 - 列表项内的子列表 */ |
|||
li { |
|||
/* 无序子列表样式 */ |
|||
ul { |
|||
/* 设置底部外边距为0.8em */ |
|||
margin-bottom: 0.8em; |
|||
/* 设置左边距为2em，创建嵌套缩进 */ |
|||
margin-left: 2em; |
|||
/* 设置列表样式为空心圆点 */ |
|||
list-style: circle; |
|||
/* 三级无序列表样式 */ |
|||
li { |
|||
ul { |
|||
/* 设置列表样式为实心方块 */ |
|||
list-style: square; |
|||
} |
|||
} |
|||
} |
|||
/* 有序子列表样式 */ |
|||
ol { |
|||
/* 设置底部外边距为0.8em */ |
|||
margin-bottom: 0.8em; |
|||
/* 设置左边距为2em，创建嵌套缩进 */ |
|||
margin-left: 2em; |
|||
} |
|||
} |
|||
/* 任务列表项样式 - 待办事项列表项 */ |
|||
.task-list-item { |
|||
/* 移除列表样式，不显示项目符号 */ |
|||
list-style-type: none; |
|||
/* 设置相对定位，用于绝对定位子元素 */ |
|||
position: relative; |
|||
/* 第一个子输入框样式 */ |
|||
> input { |
|||
/* 第一个子元素右边距 */ |
|||
&:nth-child(1) { |
|||
/* 设置右边距为6px */ |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
/* 标签样式 */ |
|||
label { |
|||
/* 设置字体粗细为正常（400） */ |
|||
font-weight: 400; |
|||
} |
|||
/* 拖拽手柄样式 */ |
|||
.handle { |
|||
/* 隐藏拖拽手柄 */ |
|||
display: none; |
|||
} |
|||
/* 复选框样式 */ |
|||
input[type="checkbox"] { |
|||
/* 设置宽度为0.9em */ |
|||
width: 0.9em; |
|||
/* 设置高度为0.9em */ |
|||
height: 0.9em; |
|||
/* 设置绝对定位 */ |
|||
position: absolute; |
|||
/* 向左偏移1.3em */ |
|||
left: -1.3em; |
|||
/* 向下偏移0.35em */ |
|||
top: 0.35em; |
|||
} |
|||
} |
|||
/* 启用的任务列表项样式 */ |
|||
.task-list-item.enabled { |
|||
/* 标签样式 */ |
|||
label { |
|||
/* 设置鼠标悬停时显示手型光标 */ |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
/* 相邻任务列表项间距 */ |
|||
.task-list-item + .task-list-item { |
|||
/* 设置顶部外边距为3px */ |
|||
margin-top: 3px; |
|||
} |
|||
/* 包含任务列表的容器样式 */ |
|||
.contains-task-list { |
|||
// margin-left: 0.6em; // 备用左边距 |
|||
/* 从右到左文本方向样式 */ |
|||
&:dir(rtl) { |
|||
.task-list-item { |
|||
input[type="checkbox"] { |
|||
/* 设置复选框外边距，适配RTL布局 */ |
|||
margin: 0 -1.6em 0.25em 0.2em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 目录样式 - 表格目录容器 */ |
|||
.toc { |
|||
/* 重置左边距为0 */ |
|||
margin-left: 0; |
|||
} |
|||
|
|||
/* 定义列表样式 - 描述列表容器 */ |
|||
dl { |
|||
/* 设置为块级元素 */ |
|||
display: block; |
|||
/* 设置块级起始外边距为1em */ |
|||
margin-block-start: 1em; |
|||
/* 设置块级结束外边距为1em */ |
|||
margin-block-end: 1em; |
|||
/* 设置内联起始外边距为0px */ |
|||
margin-inline-start: 0px; |
|||
/* 设置内联结束外边距为0px */ |
|||
margin-inline-end: 0px; |
|||
/* 设置Unicode双向算法为隔离 */ |
|||
unicode-bidi: isolate; |
|||
/* 定义术语样式 */ |
|||
dt { |
|||
/* 设置为块级元素 */ |
|||
display: block; |
|||
/* 设置Unicode双向算法为隔离 */ |
|||
unicode-bidi: isolate; |
|||
} |
|||
/* 定义描述样式 */ |
|||
dd { |
|||
/* 设置为块级元素 */ |
|||
display: block; |
|||
/* 设置内联起始外边距为40px，创建缩进效果 */ |
|||
margin-inline-start: 40px; |
|||
/* 设置Unicode双向算法为隔离 */ |
|||
unicode-bidi: isolate; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue