有看到兩邊紫色連結字體大小不同吧
沒錯就是要單獨設定連結字體的大小
還可以設定單獨的連結字體顏色唷
以下就是教學方法

事先聲明
這篇文章是從
http://www.wretch.cc/blog/tjliu轉貼的

文字連結控制:
/* 語法開始 */
a              {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:link      {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:visited {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
a:active  {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}
a:hover   {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}

/* 語法結束 */

★注意:這四行語法分別是獨立的語法,不用在在任何的 { ... }當中,注意看,這些語法本身就有 { ... }。

a:設定所有連結的樣式!

a:link:設定連結(正常情況之下)的樣式。

a:visited:設定拜訪過的連結樣式。(也就是點選過的連結)

a:active:設定正在作連結動作時候的樣式。(也就是當你滑鼠按下連結的那時刻)

a:hover:設定當滑鼠移到連結上面時候的連結樣式!

PS3 在大刮號中間 { ... },就是我們填寫語法控制的部分,你可以依據你自己想要的樣式,參考前面的「背景、邊框、文字」控制語法來加以設定!

★重要觀念說明:

Question:以上說的連結樣式設定是針對全部的網誌頁面來說,如果我現在只要針對「行事曆」的部分作連結設定,又該如何設定呢?請繼續看下去喔!

Ans:以無名網誌為例:在無名網誌的CSS設定當中,可以找到「.calendar」這個部分,這就是「行事曆」樣式設定的部分。那我們是將語法寫在「.calendar」當中嗎?答案是否定的!很多人以為要修改這部分的連結樣式,只要將上面五行文字寫到「.calendar」當中就可以囉,這是錯誤的觀念。因為在CSS語法當中,在一個相對應的 { ... } 當中,不可以在包含有其他的 { ... },而在「.calendar」語法當中,它自己本身就已經有一組{ ... },所以不能將上面五行的連結語法加入到「.calendar」當中,因為這五行語法本身都包含著 { ... }。

★注意:在CSS語法當中,在一個相對應的 { ... } 當中,不可以在包含有其他的 { ... }。

我們採取解決的方式,在程式語法當中稱之為「繼承」。在原先的屬性下再加入一個新的屬性。這段文字看不懂,就直接跳到下面吧!(這個對初學者有點難懂!)

/* 語法開始 */

.calendar a              {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
.calendar a:link      {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
.calendar a:visited {font-weight:normal; font-size:10pt; color:#298bd3; text-decoration:none;}
.calendar a:active  {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}
.calendar a:hover   {font-weight:normal; font-size:10pt; color:#0033cc; text-decoration:none;}

/* 語法結束 */

我們必須另外定義五行新的樣式,在連結前面加上我們要設定的「.calendar」部分,這樣就可以特定為這個部分「.calendar」設定連結樣式,而不會和網誌的其他部分有所衝突!

同理,如果要修改其他部分,就將「.calendar」改為你要修正部分的名稱即可。例如:要修改「標題Banner」就將「.calendar」改成「#banner」。至於前面是 "." 、 "#" 還是沒有 "",就必須根據你CSS樣式表裡面的設定決定囉!不要小看這一個符號喔!設定錯,可是沒有用的喔!

資料來源:
http://www.wretch.cc/blog/tjliu

其實我是用複製的啦
屋屋屋屋不要揍我
因為我也沒辦法寫的這麼詳細啦

原本我還找不到這段語法
後來想說以前也有用過
就往以前的有去過的教學網站找
沒想到就找到了

arrow
arrow
    全站熱搜

    小李 發表在 痞客邦 留言(1) 人氣()