非學不可

如何設定橫幅上部落格主副標題的顏色 

//系列文章//

【部落格痞客css樣式教學】痞客樣式簡易修改(1) 如何改橫幅

【部落格痞客css樣式教學】痞客樣式簡易修改(2) 如何設定橫幅上部落格主副標題的顏色

本篇主題是設定橫幅上部落格主副標題的顏色，談到網頁原始碼上的顏色當然不像影像處理軟體一樣，滴管選取用所見即所得方式直接上色，而是要用以十六進位值如(#ffffff)或顏色名稱(red)來標示，這個色碼是從電腦色彩RGB演算而來的。在此原理不做過多贅述。

要設定橫幅上部落格主副標題的顏色，搜尋區塊名稱修改顏色(color)，如果找不到的區塊名稱他的樣式是依循預設值，這時要修改只要自己打上區塊的名稱和描述樣式內容，當然區塊名稱不是自己隨便取，要依照痞客公告的模版架構上的規則，自己添加的區塊可以打在css最後面避免因為優先權關係導致改不動的情況。

----------------------------------------------------------------------------------------------------------------------------------------------------------------

要修改橫幅上的主標題，先找到主標題文字連結的區塊(# banner h1 a)，修改color

#banner h1 a {

            color: #fff;

            font-family: "simhei";

            font-size: 25px;

          }

----------------------------------------------------------------------------------------------------------------------------------------------------------------

因為主標題是連結的文字，如果要修改滑鼠移到連結上變色效果，修改(# banner h1 a:hover)的color

#banner h1  a:hover{

            color: #888;

            font-family: "simhei";

            font-size: 25px;

          }

----------------------------------------------------------------------------------------------------------------------------------------------------------------

修改副標題也一樣，找到副標題文字區塊(#banner h2)，修改color

#banner h2 {

            color: #fff;

            line-height: 150%;

            height: 40px;

            overflow: hidden;

          }

雖然主副標題的顏色在後台的樣式設計精靈都可以快速達到效果，但是一些細微的效果還是需要直接修改css樣式，如果有心設計css樣式，從這些小地方動手操作css學起來會比較快上手，也可藉此更瞭解區塊內寫了什麼，更實際的把原本網頁從圖像化轉為css樣式表。