我的博客園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";
}

貌似又簡單多了。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com