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;
     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

  • 相关阅读:
    个人作业-Alpha项目测试
    第三次作业
    第二次作业
    第一次作业
    JQuery(一)页面加载,写入文本,对象转换,隐藏显示,基本选择器,层级选择器,基本过滤选择器,表单选择器,class操作,属性操作
    JavaScript(二)
    轮辐广告、简单选项卡
    div层随着页面大小变化相对位置不变、按钮隐藏一半鼠标放上去就出来,不放上去就退回去
    markDown语法详解
    Mybatis中动态SQL语句
  • 原文地址:https://www.cnblogs.com/twoheads/p/10141919.html
Copyright © 2011-2022 走看看