我的博客园CSS：处理代码块

我是一个懒人，懒人就是不喜欢搞太复杂的东西。我希望我的博客比较简单，一是可以方便撰写，二是能够使页面尽量的小。

所以，在贴代码的时候，我只希望能与正文区分出来，代码比较多时，能限制大小，并按代码常用的字体来显示。其它的功能如语法高亮和代码折叠就不需要了。

先看看我设置的CSS：

.code{
    border: 1px solid #ccc;
    padding: 5px;
    background: #eee;
    color:#004080;
    overflow: auto;
    font-family:Consolas "Courier New" Fixedsys;
}
.longcode{
    border: 1px solid #ccc;
    padding: 5px;
    background: #eee;
    color:#004080;
    overflow: auto;
    height: 200px;
    font-family: Consolas "Courier New" Fixedsys;
}
.console{
    border: 1px solid #ccc;
    padding: 2px;
    background: #000;
    color: #ccc;
    overflow: auto;
    font-family:"Verdana";
}

这里设置三个class，分别用在代码（按原始大小显示，用于小代码量-10行以内）、长代码（只显示200px)、控制台输出(黑底白字)，显示效果个人还满意…

突然感觉，这个CSS还是不够精减，我的代码都是用<pre>来实现的，所以，我可以将默认的代码样式放在pre中定义，于是得到如下：

pre{
    border: solid 1px #ccc;
    padding: 5px;
    overflow:auto;
    background: #eee;
    color:#004080;
    font-family:Consolas "Courier New" Fixedsys;
}
.code{}
.longcode{
    height: 200px;
}
.console{
    background: #000;
    color: #ccc;
    font-family:"Verdana";
}

貌似又简单多了。