通常我们插入代码后,博客园的网页模板就会提供默认的样式进行显示,那么如果我们想要代码变大些该怎么办呢?幸好博客园在博客设置中提供了自定义的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; 1330px; } #main { min- 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; 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; _ 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; 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