• 博客园设置默认字体大小


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

  • 相关阅读:
    微服务之初识微服务
    常见的认证机制及JSON WEB TOKEN
    深入理解缓存之缓存预热与淘汰策略
    深入理解缓存之缓存和数据库的一致性
    深入理解缓存之缓存存在的问题及应对措施
    深入理解缓存之常见的缓存算法
    计算机网络之HTTP、HTTPS、HTTP2
    计算机网络之TCP(三次握手、四次挥手等),UDP及DNS
    计算机网络之网络体系架构与IP
    深入理解MyBatis(四)--缓存
  • 原文地址:https://www.cnblogs.com/guojun-junguo/p/9967906.html
Copyright © 2020-2023  润新知