文章目录

前言
- 主题文件下载地址
主题展示
- 代码样式
- 表格和子项目
- 菜单页面
主题编写思路
- 先定义全局属性
- - root根元素
  - html和body元素
  - #write
- 书写区
- - 选择器
  - 举例
- 侧边栏
- 菜单栏

前言

本来是想写一篇教程的，发现好麻烦，写不出来。所以就只列举了一些选择器，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里面定义了全局字体大小

html{font-size:16px;}

body元素里面定义字体，全局背景色，行高。

body {font-family:'Microsoft YaHei','Consolas','HarmonyOS Sans','SimHei','Twitter Color Emoji','sans','serif','monospace';font-weight: normal;line-height: 1.6;color: black
}

#write

这个主要定义的是书写区域的样式

定义书写区域的宽度，高度，最大宽度，最小宽度，最小高度等

#write {position: static;/* width: 90%; */max-width: 1000px;min-height: calc(100vh - 6rem);min-width: calc(100vw - 45rem);line-height: 1.6;transform: none;height: auto;
}

书写区

选择器

选择器		添加属性	说明
h1~h6	标题元素
p	段落	margin:0;	使得每行内容间距正常大小
a	链接	text-decoration: none;	取消下划线
hr	水平线
表格相关的选择器
table	表格	border-collapse: collapse;	边框合为一条
table tr:nth-child(odd)	表格奇数行
thead
tbody tr:hover	鼠标悬停在表格上时	box-shadow: 0 0 10px 5px #50ab86	设置阴影效果
caption,td,th
ol,ul	有序，无序列表
blockquote	引用块
p>.md-image:only-child:not(.md-img-error) img, p>img:only-child	图片标签	display: block;margin: 10px 0 10px 0;
.in-text-selection,::selection	选中的内容
code	行内代码
#write pre.md-fences	代码块

举例

h1,h2,h3,h4,h5,h6标题

/* h1-h4 */
h1::before{content: 'H1 ';font-size: 10px;color: #CC9966;}
h1{font-size: 25px;}
h2::before{content: 'H2 ';font-size: 10px;color: #CC9966;}
h2{font-size: 23px;}
h3::before{content: 'H3 ';font-size: 10px;color: #CC9966;}
h3{font-size: 21px;}
h4::before{content: 'H4 ';font-size: 10px;color: #CC9966;}
h4{font-size: 19px;}

其中::before伪元素：在标题前面加上各自的标签，也就是截图上的 ’H1’

侧边栏

选择器
.typora-node #typora-sidebar	侧边栏区域
.outline-item	大纲
.outline-item-active	大纲中被选中的区域
.outline-item:hover	鼠标悬停时
.active-tab-files #info-panel-tab-file .info-panel-tab-title	文件啊标题栏
.active-tab-outline #info-panel-tab-outline .info-panel-tab-title	大纲标题栏
.info-panel-tab-border	取消（文件，大纲）下划线	display: none;

菜单栏

选择器
#megamenu-content,.megamenu-opened header	菜单栏右边面板
.megamenu-menu-panel
.megamenu-menu-panel:not(:first-of-type)
.megamenu-menu-header-title-menu
.megamenu-menu-header-title-back
.megamenu-menu-header
#megamenu-menu-sidebar	菜单栏侧边框
#megamenu-back-btn	侧边返回按钮
#megamenu-back-btn:hover
#megamenu-menu-list > li
#megamenu-menu-list > li:hover
#megamenu-menu-list > li:focus

Typora自定义主题#简约风主题相关推荐

wordpress网址导航源码全局自适应手机端网站导航简约风主题模板
wordpress网址导航源码全局自适应手机端网站导航简约风主题模板源码下载:wordpress网址导航源码全局自适应手机端网站导航简约风主题模板-小程序文档类资源-CSDN下载
Typora自定义主题样式
Typora自定义主题样式 1.打开Typora开发者工具视图 --> 开发者工具(Shift + F12) 2.使用选区工具选中想要更改的元素 3.查看styles区域 4.修改颜色并预览 ...
WordPress简约博客主题模板Chen主题V1.2
介绍: WordPress简约博客主题模板Chen主题V1.2分享,喜欢就下载吧. 这个: 今天给大家分享一款还不错的源码,比较简约风的,如果是适合搭建个人站点,记录一下个人生活或者发布记录一些日志什 ...
R语言使用gt包和gtExtras包优雅地、漂亮地显示表格数据：使用gtExtras包添加一个图，显示表中某一列中的数字、并自定义表格数据显示的主题格式、并自定义数值数据的格式（例如百分比）
R语言使用gt包和gtExtras包优雅地.漂亮地显示表格数据:使用gtExtras包添加一个图,显示表中某一列中的数字.并自定义表格数据显示的主题格式.并自定义数值数据的格式(例如百分比) 目录
R语言使用ggplot2包使用geom_dotplot函数绘制分组点图(自定义分组颜色、主题)实战（dot plot）
R语言使用ggplot2包使用geom_dotplot函数绘制分组点图(自定义分组颜色.主题)实战(dot plot) 目录 R语言使用ggplot2包使用geom_dotplot函数绘制分组点图(自 ...
Xiuno 简约白色主题
简介 xiuno 简约白色主题,适合个人博客.部分简洁论坛. Example 使用将解压后的 bruce_theme_sample 文件夹放在 plugin 目录下,登录后台,安装即可可加群获取( ...
开源WordPress博客主题二次元风-LoliMeow主题
开源WordPress博客主题二次元风-LoliMeow主题 ☑️ 编号:ym506 ☑️ 品牌:WordPress ☑️ 语言:php ☑️ 大小:5.1MB ☑️ 类型:二次元风 ☑️ 支持:pc ...
Qt在win10自定义标题栏，应用主题颜色到标题栏
Qt在win10自定义标题栏,应用主题颜色到标题栏前言先看效果关键点 QtWin 注册表获取是否应用了颜色到标题栏代码头文件:captionwidget.h 源文件:captionwidge ...
三栏简约typecho主题Lanstar/蓝星typecho主题
三栏简约typecho主题Lanstar/蓝星typecho主题 ☑️ 编号:ym435 ☑️ 品牌:typecho ☑️ 语言:php ☑️ 大小:2.6MB ☑️ 类型:蓝星typecho主题 ☑ ...

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