为什么修改 CSS

一般的显示器显示黑体的效果并不好,个人并不习惯在正文中使用黑体.最喜欢的正文字体还是 Simsun，阅读正文时更加清晰锐利

默认字体 Arial 的显示效果

修改为 Simsun 后的显示效果

此外,一般的主题在设计时也没有对文章的段落结构进行很好的区分,而且大多数人对于如何合理使用编辑器中的提供html元素来修饰文章也没有基本的常识,这些因素给阅读造成了一定的障碍

CSS 修补内容

在已有主题的基础上添加自定义 CSS 来修改部分元素渲染效果

默认全局字体修改为 Simsun
h1 ~ h6 修改为微软雅黑
toc-title 添加背景,与正文做一定区分
相同等级h*元素之间加大间隔(margin-top)

"作者"和"读者"

在后台提交 CSS 代码后,仅仅会渲染自己的博客,针对的是所有阅读你文章的人

同时,我们自己也会作为读者去阅读别人的文章,但是别人却不一定会添加自定义 CSS.如果我们想改善自己的阅读体验,就需要在浏览器中安装stylus扩展,新建一条规则给域名"cnblogs.com"并加入同样的css即可,这样看别人的文章时就会变成这样:

ps:由于每个人选择的主题不同,效果可能会有冲突,需要一定的取舍

效果展示如下

注意: 本页面已经使用此 CSS 渲染,

这是一级标题 h1

The furthest distance in the world
Is not between life and death
But when I stand in front of you
Yet you don"t know that I love you

这是二级标题 h2

The furthest distance in the world
Is not being apart while being in love
But when painly cannot resist the yearning
Yet pretending you have never been in my heart

这是三级标题 h3

The furthest distance in the world
Is not when painly cannot resist the yearning
yet pretending you have never been in my heart
but using one"s indifferent heart
To dig an uncrossable river

CSS Patch

本文使用的皮肤:SimpleMemory

CSS使用方法:在个人博客的管理-设置中粘贴CSS代码

/* #header #blogTitle {
	background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563032537620&di=cb0c07153a85a40dc51ade9c3f953e90&imgtype=0&src=http%3A%2F%2Fimgcdn.gz01.bdysite.com%2Fupfile%2Ft014bd594e665ef5ce2.png'); */
/* 	background-repeat: no-repeat; */
/* } */

/* 个人首页文章节选/文章正文 的字体以及字号 */
.c_b_p_desc, .postBody {
	font-family: Simsun, 'PingFang SC', 'Helvetica Neue', 'Helvetica', Arial, sans-serif!important;
	font-size: 16px!important;
}

/* 文章标题 */
.postTitle {
/* 	padding: 3px; */
/* 	border-style: solid!important; */
/* 	border- 2px!important; */
/* 	border-color: #4d0909!important; */
/* 	border-bottom-style: groove!important; */
/* 	border-bottom- 3px!important; */
/* 	margin-bottom: 1px; */
/* 	padding:1px; */
	padding-bottom: 10px
}

/* 导航栏背景 */
#cnblogs_post_body > .toc {
	background-color: #dcdcdc!important;
}

/* 导航栏标题 */
#cnblogs_post_body > .toc > .toc-title {
	background-color: #ffffff!important;
	font-size: 18px!important;
	font-style: italic;
	color: #fff!important;
	background: linear-gradient(to bottom right, #999999, #cccccc)!important;
	
}

/* 正文标题/导航栏标题/h1~h6 的字体 */
.postTitle, .toc-title, h1, h2, h3, h4, h5, h6{
	font-family: 'Microsoft YaHei','PingFang SC', 'Helvetica Neue', 'Helvetica', Arial, sans-serif!important;
}


/* h1样式 */
#cnblogs_post_body h1 {
	margin-top: 48px;
	background-image: none;
	border: 1px solid transparent!important;
	border-radius: 4px;
	color: #fff!important;
	background: linear-gradient(to bottom right, black, grey)!important;
}

/* h2样式 */
#cnblogs_post_body h2 {
	margin-top: 36px;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff!important;
	background-color: #286090!important;
	border-color: #204d74!important;

}

/* h3-h4样式 */
#cnblogs_post_body h3,h4,h5,h5 {
	margin-top: 24px;
/* 	background-image: none; */
/* 	border: 1px solid transparent; */
/* 	border-radius: 4px; */
/* 	color: #fff!important; */
/* 	background-color: #111111; */
/* 	border-color: #000000; */
/* 	background-color: #449d44!important; */
/* 	border-color: #398439!important; */
}


.postTitle .postTitle2{
	font-size: 18px;
/* 	color: black; */
/* 	line-height: 48px; */
/* 	border-style: solid!important; */
	background-color: #ececec;
	border: 10px;
	border-color: #4d0909;
}


pre > code > span {
	font-family: consolas;
	font-size: 12px;

}


/* .postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #21759b;
    transition: all 0.4s linear 0s;
} */

/* .blogpost-body > h1
{
animation: myfirst 5s ease-in 1s infinite reverse;
-moz-animation: myfirst 5s ease-in 1s infinite reverse;
-webkit-animation: myfirst 5s ease-in 1s infinite alternate;
-o-animation: myfirst 5s ease-in 1s infinite reverse;
} */

/* @keyframes myfirst
{
from {background: white;}
to {background: #286090;}
}

@-moz-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
} */

edited by Typora