zoukankan      html  css  js  c++  java
  • 修改博客园默认的代码字体大小

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

  • 相关阅读:
    javascript中的常用表单事件用法
    关于js键盘事件的例子
    对象间引用赋值及方法时引用传递
    反编译工具reflector破解方法
    使用委托(C# 编程指南)
    委托(C# 编程指南)
    浅谈线程池(下):相关试验及注意事项
    Lambda 表达式(C# 编程指南)
    浅谈线程池(中):独立线程池的作用及IO线程池
    浅谈线程池(上):线程池的作用及CLR线程池
  • 原文地址:https://www.cnblogs.com/tianzhijiexian/p/4248585.html
Copyright © 2011-2022 走看看