有網友提出問題:http://gbook.xuite.net/index.php?bookid=11732000&ctgid=2&thrdid=2453571,『最近又換換風格,換個深色系,結果原本黑色的字,就看不到了,...』其實最兩天我丟出來的深色版型的自定樣式CSS分享http://blog.xuite.net/jeanson61/xuite/23562006,其實就有考慮到這些文字顏色的問題!就利用這一篇講一下在自定樣式CSS時,對文字顏色設定上要注意的地方!

首先講一下CSS樣式語法它在針對文字顏色的設定修改上是透過color:#六位色碼;去設定要顯示的文字顏色,但是重點在於要把這個文字顏色設定語法放到那一個Selecter選擇器裡面["選擇器"的解釋參考http://blog.xuite.net/jeanson61/xuite/19767339],我之前有講過,CSS樣式語法有所謂的族譜或是家族繼承的概念[參考http://blog.xuite.net/jeanson61/xuite/19428499 ],所以如果我們在最原始的祖先那邊去設定文字的顏色,那透過繼承的概念,應該就是整個部落格的文字顏色都會跟著改變!!!所以通常要設定"共同"的樣式,就到它們共同的祖先去設定就好!!於是Xuite Blog裡面要設定祖先的文字顏色,就是在body選擇器裡面加↓

body{ 
    margin:0px 0px 0px 0px;
    text-align: center;
    background-color: #000000;
    font-family: Comic Sans MS,arial,helvetica,sans-serif;
    color: #b5b2b5;
    font-size: 14px;
   line-height:150%;
    word-wrap: break-word;
}

/*連結*/
A {
                color: #757c8e;
 text-decoration: none;
}
A:link {
                color: #ad5529;
 text-decoration:none;
}
A:visited {
 color: #828282;
 text-decoration:none;
}
A:active {
 color: #FFFF00;
 text-decoration:underline;
}
A:hover {
 color: #FFFF00;
 text-decoration:underline;
}

上面這裡面還有一段是像下面這樣子的↓
A:link {color: #ad5529}     /* unvisited link 還沒拜訪過(點閱過)的連結*/
A:visited {color: #828282}  /* visited link 已經拜訪過(點閱過)的連結*/
A:hover {color: #FFFF00}   /* mouse over link 滑鼠移到這文字連結時的字體顏色*/
A:active {color: #FF00FF}   /* selected link 點選起動這文字連結時的文字顏色*/

它是針對文字"連結"的顏色做定義!也就是當文字本身是一個連結時,它的字體顏色的設定!也可以搭配其他的效果,例如加底線text-decoration: underline;

以上在這些區域去加文字顏色就已經解決大部份的文字顏色問題!接下來就是可以針對各個細部的區塊去定義不同的文字顏色!例如這一次網友問的問題:在部落格首頁的文章摘要的顏色,以及在單篇文章中的字體顏色等等的設定!

有關在落格首頁的文章摘要的顏色,以及在單篇文章中的字體顏色,這部落去分析Xuite部落格的網頁語法,分析後的選擇器結構↓

首頁摘要 單篇文章
<div id="content">
 <div class="ArticleShowMode">瀏覽方式:列表模式,
 </div>
 <div noname><object id="main">電視牆</object>
 </div>
 <div class="singleArticle">
  <div class="title">
   <span class="titledate"></span>
   <span class="titlename"></span>
  </div>
  <div class="blogrank">
   <span  class="counter">
    <div id="mainlist_xxxxxxx" ><li>文章列表的PV數</li>
    </div>
   </span>
   <span class="category"><li>文章類別</li>
   </span>
   <span class="mail"><li>好文轉寄</li>
   </span>
   <span class="rank">
    <span id="SelectScore2"></span>
   </span>
  </div>
  <div class="blogbody">
   <div id="mainSubContent_xxxxxxxx" >本文摘要...

    <span class="fullpost">(繼續閱讀)</span>
   </div>
   <div class="morebtn"><li>more</li>
   </div>
   <div class="posted">
   </div>
  </div>
 </div>
 <div class="page">換頁按鈕
 </div>
</div>
<div id="content">
 <div class="title">
  <span class="titledate"></span>
  <span class="titlename"></span>
 </div>
 <div class="blogrank">
  <span  class="counter">
   <div id ="article_counter"><li>單篇文章PV數</li>
   </div>
  </span>
  <span class="category"><li>文章類別</li>
  </span>
  <span class="mail"><li>好文轉寄</li>
  </span>
  <span class="rank">平均分數:
   <span id="article_average_stars"></span>
   <span id="article_men"></span>
   <span id="SelectScore2"></span>
  </span>
  <div class="tags">
  </div>
 </div>
 <div class="blogbody">
  <p 本文...>
  </p>
  <div class="articleExt">
   <div name="ArticleTodaySide">歷史上的今天:<li></li>
   </div>
   <div id="ArticleRandomSide">隨機推薦文章:
    <div><li></li><li></li>
    </div>
   </div>
  </div>
  <div class="posted">
  </div>
  <div class="selectbar">
  </div>
 </div>
</div>

從選擇器的定義來看,它們有共同的地方去定義,也就是在blogbody裡面去設定它的字體顏色就可以一次改到兩個地方!然後如果我想要讓兩個地方的字體"不"一樣,那要怎麼達到!?就狗貓的分析發現,要讓兩個地方不同,就需要在singleArticle裡面去做設定,因為這是比較兩者的差異發現的!

也就是在
/*單文章外框*/
.singleArticle{
width : 100%;
    margin: 0px 0px 0px 0px;
color: #0000FF;
}
/*文章主體*/
.blogbody{
 width:95%;
 color: #b5b2b5;
 padding: 0px 20px 0px 20px;
 margin: 0px 0px 0px 0px;
font-size:17px;
line-height: 150%;
}
裡面去做調整修改就可以有不同的文字顏色了!

另外再補充一下,如果是在編輯文章時才去做文字顏色的設定,那麼要透過自定樣式CSS是"不可能的",這個概念就是繼承到子孫的部份如果在子孫裡面有各自的定義,那麼就以最最最下層子孫的定義為最優先,沒有定義的則往上繼承,所以當你在每一篇文章中去各別設定自體的顏色或是大小,是不會受它祖先的定義影響!也就是說這樣就改CSS樣式的話是沒有效的喔!!



隨機文章


  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。