小屋創作

日誌2008-04-08 10:15

【小屋】CSS自訂版面:文章標題和下方的上下篇連結顏色分開設定

作者:莉薇婭莞夢

  嗯,今天小呰問我這個問題,幫她找了一下語法標籤是什麼。
  嗯,想想自己的文章沒發過,所以就發了……難得的附上參考圖。
  嗯……話說今天要報告,貼完就閃人吧~

前言:
  ‧修改方向:文章標題(您現在所看到的文章標題<無連結>)
  ‧目的:讓文章標題與最下方的上下篇連結顏色有所不同。
  ‧請善用「CTRL」+「F」
  ‧影響:個人帳號區顏色
  因為如果單修改article_t1的無連結文字顏色,還是會同時套用到下方的連結顏色,因此我們找到了第二標籤來修改,讓語法以「〝後〞設定現且忽略〝前〞相同設定」的執行達到我們想要的分開修改。例:
  利用小技巧,我們知道文章標題所套用的標籤有「article_t1 home_t3」,而巴哈預設語法中已經存有「article_t1{color:#FFFFFF;}」,所以標題顏色會是白色的。如果我們設定了「home_t3{color:#000000;}」則在「article_t1、home_t3」同時有的效果,將會以後者「home_t3」的呈現,所以,標題文字顏色會變成黑色的。
  實際的狀況,請比對後述語法的些微不同,來了解這邊的概念,同樣的這也是與之前提到的小叮嚀有所異同的細部延伸。

==========================================================
以我家舉例:
【初始狀態】(基本沒有加home_t3設定)
  /*個人部落閣文章標題顏色──內文上下篇的標題連結*/
  .article_t1{color:#007b43;font-weight:bold;}
  .article_t1 a:link, .article_t1 a:visited{color:#007b43;font-weight:bold;}


【修改後1─標題無連結顏色修改】(加上home_t3的設定)
  /*個人部落閣文章標題顏色──內文上下篇的標題連結*/
  .article_t1{color:#007b43;font-weight:bold;}
  .article_t1 a:link, .article_t1 a:visited{color:#007b43;font-weight:bold;}
  /*個人部落格文章標題連結──帳號旁括弧、連結顏色*/
  .home_t3{color:#000000;}


【修改後2─標題有連結顏色修改】(加上home_t3的設定)
  /*個人部落閣文章標題顏色──內文上下篇的標題連結*/
  .article_t1{color:#007b43;font-weight:bold;}
  .article_t1 a:link, .article_t1 a:visited{color:#007b43;font-weight:bold;}
  /*個人部落格文章標題連結──帳號旁括弧、連結顏色*/
  .home_t3 a:link, .home_t3 a:visited, .home_t3 a:hover{color:#000000;}


【修改後3─標題有無連結顏色修改】(加上home_t3的設定)
  /*個人部落閣文章標題顏色──內文上下篇的標題連結*/
  .article_t1{color:#007b43;font-weight:bold;}
  .article_t1 a:link, .article_t1 a:visited{color:#007b43;font-weight:bold;}
  /*個人部落格文章標題設定──帳號旁括弧、連結顏色*/
  .home_t3{color:#000000;}
  .home_t3 a:link, .home_t3 a:visited, .home_t3 a:hover{color:#000000;}

6

6

LINE 分享

相關創作

[達人專欄] 《墮落人妻~背著丈夫的NTR H》瞞著丈夫的打工還債,這是畫廊模擬器吧!

5/5日記 - 陪室友去逛了歐洲節市集

5/4日記 - 看到好多貓貓

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】