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

//系列文章//

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

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

 

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

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

 

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

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


h1.jpg

 

#banner h1 a {

            color: #fff;

            font-family: "simhei";

            font-size: 25px;

          }


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

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


h1ahover.jpg

 

#banner h1  a:hover{

            color: #888;

            font-family: "simhei";

            font-size: 25px;

          }

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

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

h2.jpg

#banner h2 {

            color: #fff;

            line-height: 150%;

            height: 40px;

            overflow: hidden;

          }

 

 

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

arrow
arrow
    全站熱搜

    鹿老師 發表在 痞客邦 留言(0) 人氣()