以书籍模版 ElegantBookdown 为例,里面的 CSS 代码可能重复的令人发指,我摘录一段详见
https://github.com/XiangyunHuang/ElegantBookdown/blob/32fc7c008a4a17bc04ccf9f1dc08de9bd735d688/style.css#L41-L88
或者也可以看
/* Sidebar formating --------------------------------------------*/
.sidebar {
border: 1px solid #ccc;
}
.rmdwarn {
border: 1px solid #EA4335;
}
.rmdnote {
border: 1px solid #FBBC05;
}
.rmdtip {
border: 1px solid #34A853;
}
.sidebar, .rmdwarn, .rmdnote, .rmdtip {
border-left-width: 5px;
border-radius: 5px;
padding: 1em;
margin: 1em 0;
}
.book .book-body .page-wrapper .page-inner section.normal div.rmdwarn > :first-child,
.book .book-body .page-wrapper .page-inner section.normal div.rmdnote > :first-child,
.book .book-body .page-wrapper .page-inner section.normal div.rmdtip > :first-child,
.book .book-body .page-wrapper .page-inner section.normal div.sidebar > :first-child {
margin-top: 0;
}
.book .book-body .page-wrapper .page-inner section.normal div.rmdwarn > :last-child,
.book .book-body .page-wrapper .page-inner section.normal div.rmdnote > :last-child,
.book .book-body .page-wrapper .page-inner section.normal div.rmdtip > :last-child,
.book .book-body .page-wrapper .page-inner section.normal div.sidebar > :last-child {
margin-bottom: 0;
}
div.rmdwarn::before {
display: block;
content: "警告";
color: #EA4335;
font-size: 1.1em;
font-weight: bold;
margin-bottom: 0.25em;
}
div.rmdnote::before {
display: block;
content: "注意";
color: #FBBC05;
font-size: 1.1em;
font-weight: bold;
margin-bottom: 0.25em;
}
div.rmdtip::before {
display: block;
content: "提示";
color: #34A853;
font-size: 1.1em;
font-weight: bold;
margin-bottom: 0.25em;
}
两个问题
- 若有哪位大侠能帮忙简化一下就太好了,欢迎提交 PR
- 再请大侠给新手指一个学习 CSS 的路径