通过自定义CSS可提升Typora中HTML学习文档的美观性与专业性。1、在MacBook Pro上启用自定义CSS需进入偏好设置→外观→打开主题文件夹，创建或编辑CSS文件如learning-doc.css并应用。2、编写基础样式设置全局字体、行高、背景色及标题样式，例如使用Helvetica Neue字体、行距1.8、标题加底部边框。3、突出代码块与引用区域，为code设置浅灰背景和圆角，pre>code采用深色主题，blockquote添加蓝色左border和底色。4、优化表格与列表可读性，table设置边框合并与交替行颜色，ul li调整符号颜色为蓝色并控制缩进，全面提升文档视觉效果与阅读体验。
如果您希望让Typora中的HTML学习文档看起来更加美观和专业，可以通过自定义CSS来实现个性化的排版与视觉效果。通过调整字体、颜色、行距等样式，可以让文档呈现更符合个人审美的风格。
本文运行环境：MacBook Pro，macOS Sonoma
一、启用Typora的自定义CSS功能
Typora允许用户通过加载本地CSS文件来自定义编辑器外观和导出样式。启用该功能后，所有文档或指定主题将应用您编写的样式规则。
1、打开Typora，进入 偏好设置 → 外观 选项卡。
立即学习“前端免费学习笔记（深入）”；
2、点击当前主题右侧的 打开主题文件夹 按钮。
3、在打开的目录中找到对应的主题文件（如default.css），或新建一个名为 learning-doc.css 的文件用于自定义。
4、保存CSS文件后，在外观界面选择新添加的主题即可生效。
二、编写基础美化样式
通过定义基本的选择器，可以统一文档的字体、背景色和段落间距，提升整体阅读舒适度。
1、使用文本编辑器打开刚创建的 learning-doc.css 文件。
2、添加以下代码以设置全局样式：
body { font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.8; background-color: #f9f9f9; color: #333; }
3、进一步优化标题层级显示：
h1, h2, h3 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 5px; }
三、高亮代码块与引用区域
对于学习文档而言，代码示例和引用内容需要特别突出，便于读者快速识别关键信息。
1、为代码块设置背景色和圆角边框：
code { background-color: #f1f1f1; padding: 2px 6px; border-radius: 3px; }
2、对多行代码块进行美化：
pre > code { display: block; padding: 15px; background-color: #2d3748; color: #e2b8b8; border-radius: 6px; overflow-x: auto; }
3、设置引用区块的左侧边框和文字样式：
blockquote { border-left: 5px solid #3498db; background-color: #ecf2f8; padding: 10px 15px; margin-left: 0; }
四、增强表格与列表可读性
结构化内容如表格和列表是技术文档的重要组成部分，合理设计能显著提高信息传达效率。
1、为表格添加边框和交替行颜色：
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
tr:nth-child(even) { background-color: #f2f6fc; }
2、调整无序列表符号颜色和缩进：
ul li { color: #555; margin-left: 1em; }
ul li::marker { color: #3498db; }
