Typora自定义主题#简约风主题

前言

  本来是想写一篇教程的，发现好麻烦，写不出来。所以就只列举了一些选择器，css文件里面有注释。写typora主题，需要有一定css基础css参考手册

主题文件下载地址

链接：https://pan.baidu.com/s/1CxKFqiis7uQf1RdhEiQ6Sw?pwd=nohn
提取码：nohn

主题展示

代码样式

表格和子项目

菜单页面

主题编写思路

主题编写是分区进行的。不同区域的样式不同

• 书写区 #write
• 侧边栏
• 菜单栏

​  其实Typora主题的编写实际上是定位选择器，然后编写css文件。找选择器，可以通过偏好设置=>通用=>高级设置=>开启调试模式，然后就可以【鼠标右键=>检查元素】，右上角的元素定位器（你可以在页面选择任意区域，从而定位你感兴趣的部分）

首页
菜单区

先定义全局属性

root根元素

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 html 元素，除了优先级更高之外，与 html 选择器相同。我们主要将root用来声明全局变量（注: 自定义变量需要以--开头，用var()引用）

:root{
   
   
    --main-color:#cbd8fb;
    --bg-color:#e9ecef;
    --shadow-color:#e8e8f0;
    --code-fonts:;
    
}

html和body元素

html里面定义了全局字体大小