博客园设置默认字体大小

通常我们插入代码后,博客园的网页模板就会提供默认的样式进行显示,那么如果我们想要代码变大些该怎么办呢?幸好博客园在博客设置中提供了自定义的css设置,让我们可以最大限度的设定博客风格。

一、寻找样式名称

如果你仅仅希望知道如何修改,那么可以调过本节,直接进入修改一节。

要修改代码样式就必须找到原本的样式,进入到一篇文章中,在chrome中点F12,然后通过点击元素就界面,慢慢找到代码段。需要注意的是这里面的代码都进行了折叠,你需要根据位置来展开。

可以看见我们已经选择到了代码段的部分,然后我们从右边的syle界面就可以看到样式了,这里我们想要定义的是代码的字体大小,所以我找到了如下的两个样式:

复制代码
.cnblogs_code pre {
font-family: Courier New!important;
font-size: 12px!important;
word-wrap: break-word;
white-space: pre-wrap;
}

.cnblogs_code span {
font-family
: Courier New!important;
font-size
: 12px!important;
line-height
: 1.5!important;
}

复制代码

这两个样式中font-size的大小都是12px,我们一下就知道该修改什么了。

 

二、自定义样式

通过上面的分析,我现在把默认的样式进行了修改,仅仅把原来12px变为了18px。

复制代码
.cnblogs_code pre {
font-family: Courier New!important;
font-size: 18px!important;
word-wrap: break-word;
white-space: pre-wrap;
}

.cnblogs_code span {
font-family
: Courier New!important;
font-size
: 18px!important;
line-height
: 1.5!important;
}

复制代码

然后进入博客设置,添加自定义css样式。最后保存即可!

 

 

我自己的style:

复制代码
.cnblogs_code pre {
font-family: Courier New!important;
font-size: 17px!important;
word-wrap: break-word;
white-space: pre-wrap;
}

.cnblogs_code span {
font-family
: Courier New!important;
font-size
: 17px!important;
line-height
: 1.5!important;
}

home {

margin: 0 auto;
width
: 1330px;
}

main {

min-width: 1330px;
text-align
: left;
clear
: both;
background
: #fff;
}

mainContent {

min-height: 200px;
-o-text-overflow
: ellipsis;
text-overflow
: ellipsis;
overflow
: hidden;
word-break
: break-all;
float
: left;
width
: 1100px;
background
: #fff;
}

sideBar {

min-height: 200px;
padding
: 0 5px 0 5px;
margin-left
: 700px;
-o-text-overflow
: ellipsis;
text-overflow
: ellipsis;
overflow
: hidden;
word-break
: break-all;
_margin-left
: 0;
_width
: 300px;
padding-bottom
: 20px;
}

.dayTitle {
color
: #666;
font-weight
: bold;
line-height
: 1.5em;
font-size
: 150%;
margin-top
: 3px;
margin-bottom
: 10px;
float
: right;
position
: relative;
top
: 40px;
}

.postTitle {
font-size
: 18px;
font-weight
: bold;
padding
: 0 100px 10px 20px;
border-bottom
: 1px solid #e0e0e0;
line-height
: 1.5em;
clear
: both;
border-left
: 5px solid #1fa6e6;
}

blogTitle h1 {

font-size: 200%;
font-weight
: bold;
line-height
: 1.5em;
margin-left
: 1em;
margin-top
: 10px;
width
: 50%;
float
: left;
display
: inline;
letter-spacing
: 1px;
}

topics .postTitle {

font-size: 150%;
font-weight
: bold;
border-bottom
: 1px solid #999;
line-height
: 1.5em;
padding-left
: 5px;
}

复制代码

 

参考自:

http://www.ziliao1.com/Article/Show/208C8919144E8EC355BAE1FD395AE362.html

3
0
« 上一篇:通过Gson解析Json数据
» 下一篇:详细解读LruCache类
	</div>
posted @ 2018-11-16 10:35  骏骏  阅读(2123)  评论(0编辑  收藏  举报