首先启用Obsidian的Style Settings插件，在snippets目录创建note-style.css文件并应用为样式主题，接着在Markdown中使用<div class="fancy-note">定义HTML容器，随后在CSS中为.fancy-note设置渐变背景、圆角、阴影及:hover悬停动画，最终实现美观且具交互性的个性化笔记界面。
如果您希望在Obsidian中打造个性化的学习笔记界面，通过自定义CSS和HTML类标签可以实现高度美观的视觉效果。以下是实现这一目标的具体步骤：
本文运行环境：MacBook Pro，macOS Sonoma
在Obsidian中使用自定义样式前，必须先开启社区插件中的“核心插件”选项，以允许加载本地CSS文件。
1、打开Obsidian设置界面，进入“外观”选项卡。
立即学习“前端免费学习笔记（深入）”；
2、找到并启用“切换核心插件”中的Style Settings功能。
3、确认插件已激活，随后可在`.obsidian/snippets/`目录下创建或编辑CSS片段文件。
通过编写独立的CSS代码块，可以为特定的HTML类或数据属性定义样式规则，从而美化笔记内容。
1、在Obsidian的文件资源管理器中导航至.obsidian/snippets文件夹。
2、新建一个文本文件，并将其命名为note-style.css。
3、右键点击该文件，在上下文菜单中选择“应用为样式主题”，使其生效。
利用Obsidian支持的内联HTML语法，可以在笔记中插入带有自定义类名的
1、在Markdown笔记中输入以下结构：<div class="fancy-note">您的内容</div>。
2、确保类名如fancy-note与CSS文件中的选择器名称一致，避免拼写错误。
3、可在同一笔记中多次使用相同类名，实现统一风格的区块渲染。
通过CSS的background属性和box-shadow，可为笔记容器增添现代感十足的视觉层次。
1、在CSS文件中添加如下规则：
.fancy-note {
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
padding: 16px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}2、保存文件后刷新笔记视图，观察是否出现柔和渐变背景与外投影效果。
3、可根据个人偏好调整颜色值、圆角大小及阴影强度。
为提升交互体验，可通过:hover伪类为元素添加鼠标悬停时的过渡动画。
1、扩展原有的CSS类定义，加入transform和transition属性：
.fancy-note:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}2、移动鼠标至目标区块上方，验证是否存在轻微上浮动画与阴影加深效果。
3、若动画过于生硬，可调节transition的timing-function参数，例如改为cubic-bezier曲线。
以上就是Obsidian自定义CSS，HTML学习笔记美到窒息！的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
284
收藏
