使用CSS代码修改博客模板

  在修改设置使公告栏里的头像更新为新的头像时发现里边还有“页面定制CSS代码”这一选项,查了一下发现这东西可以对页面做一些个性化的调整。正好目前我使用的这个模板标题和导航栏的字体实在难看,顺手修改了一下。

  因为我之前是对CSS这方面完全不了解,所以只能连蒙带猜。首先,这CSS代码估计就是设置一下某些参数的值,应该跟.ini之类的文件形式比较类似。看了一下别人写的一些简单的代码,大概了解了一下格式,跟预想的差不多。接下来是要找到模板本身自己的CSS代码,不然我怎么知道要修改谁呢?一开始我是直接从浏览器里查看网页源代码,结果打开的东西完全摸不着头脑,就放弃了这种尝试,转而使用另一种形式,名字叫不上来,就是360浏览器按下F12之后出来的那个东西。大致翻了翻,找到这样一个东西,看它行文的风格估计就是模板的设置了:

  因为我要修改的是字体,肯定是在这里面搜索font family,找到了几处,挨个试了试就知道谁对应的谁了。然后按自己的喜好写好,复制到定制框里就好了。

  我是这么写的:

.cnblogs_code pre {
    font-family: Courier New!important;
    font-size: 16px!important;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.cnblogs_code span {
    font-family: Courier New!important;
    font-size: 16px!important;
    line-height: 1.5!important;
}
body {
    color: #000;
    background: #eee;
    font-family: Microsoft YaHei!important;
    font-size: 10pt;
    min-height: 101%;
}
#header h1 {
    font-weight: normal;
    font-size: 30px;
    line-height: 1;
}
#header h1 a {
    font-family: "Microsoft YaHei";
}
#header h1 a:hover {
    color: #F60;
    text-decoration: none;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 18px;
    color: #000000;
    line-height: 1.5em;
    margin-top: 10px;
    margin-left: 30px;
    width: 50%;
    margin-left: 10em;
    float: left;
}

  修改的内容如下:

    默认的代码字体大小;

    大标题的字体种类和大小,并取消加粗;

    副标题的字体种类和大小,并设置颜色为黑色;

    页面字体的种类和大小;

时间: 2024-10-19 13:12:25

使用CSS代码修改博客模板的相关文章

使用CSS/JS代码修改博客模板plus

之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和.对应的东西控制的都是啥子,这回不在看那个CSS了,直接用浏览器的开发者模式打开博客,一级一级找下去,看控制要改的内容的都是哪个DIV,把那些呆滞傻二的字体一一改掉: .cnblogs_code pre { font-family: Courier New!important; font-size:

代码:博客美化

这是设置背景: (我的是 “你的名字” 的图片,大家可以自己拿去用,也可用自己的图片) body { background-image:url("https://i.loli.net/2019/08/19/bwxsdE3RQFmHotJ.jpg"); background-repeat:no-repeat; background-size:100%; background-attachment: fixed; opacity: 0.8; filter:alpha(opacity=100

博客模板更新

博客后台 皮肤选择BlueSky 复制以下代码 禁用模板默认CSS 完成 我现在的博客模板CSS,更新中... * { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .clear { clear: both; } body, button, input, select, textarea { font: 12px/1.5 Tahoma, Arial, Helvetica, sans-serif; }

查看博客模板名字和样式设置

在浏览他人的博客时发现他们的排版布局很好很舒适,但是又不知道这个模板的名字是什么,可以这样解决: 1.打开浏览器的开发者工具,大部分工具通过按F12打开. 2.找到<head>中的元素<link id="MainCss" type="text/css" rel="stylesheet" href="http://common.cnblogs.com/Skins/Cogitation/style.css?id=20140

博客模板开发测试随笔

博客模板开发测试随笔博客模板开发测试随笔

博客模板开发测试随笔2

博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔

博客模板开发测试随笔5

博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔

博客模板开发测试随笔4

博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔

博客模板开发测试随笔3

博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔 博客模板开发测试随笔