使用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;}

View Code

　　修改的內容如下：

　　　　預設的代碼字型大小；

　　　　大標題的字型種類和大小，並取消加粗；

　　　　副標題的字型種類和大小，並設定顏色為黑色；

　　　　頁面字型的種類和大小；

使用CSS代碼修改部落格模板