/*(Step 5)設定連結(link)的屬性*/
在談連結屬性之前,我們得先談一下連結的概念,在網頁中我們可以最常選擇文字或圖片來作為連結客體,當我們按下連結文字或圖片時,網頁就會轉向(redirect)到我們指定的連結位址去。而HTML語言中,連結的語法不外是下面兩種:
<A HREF="指定的連結位址">設定作為連結的文字內容</A>
<A HREF="指定的連結位址"><IMG="設定作為連結的圖片位址"></A>


這表示在Container這個選擇器下,可以指定文字與圖片連結的表現形式,以及當滑鼠移到這連結時,所出現的hover效果。在一般網頁原始碼中,連結的標籤的程式碼會是這樣的形式:
<A HREF="指定的連結位址">設定作為連結的文字內容</A>

這原始碼呈現出的網頁效果,會只是簡單的底線表示此文字帶有連結,當滑鼠移到連結處時,就會根據瀏覽器的設定更改顏色。如果我們想讓某一個容器標籤下的連結式樣有些不同,我們就必須在這個容器標籤下,額外宣告一種特殊的上下文選擇器(Contextual Selector)。以Container容器為例,在這容器標籤下所連結的一段文字,網頁原始碼會大概是下列的情況:<Div ID=Container>...<A HREF=""></A>...</Div>

這表示如果我想讓Conatiner容器下的連結標籤所呈現的樣式效果,跟原本的網頁效果不同,那我就得額外如下宣告:
#Conatiner a {
color:#3399FF;/*顏色改為#3399FF色碼*/
text-decoration:none;/*文字不加底線*/
}

而如果我們想讓滑鼠移到文字連結處時,會產生獨特的hover效果,那就得額外作這樣的宣告:
#Conatiner a:hover {
color:#FFFFFF;/*顏色改為白色*/
background-color:#808080;/*文字背景改為鐵灰色*/
}

因此,如果我們想讓Top容器標籤的連結效果跟Container所指定的不同,那麼我們就得針對Top標籤,重新宣告上下文選擇器:#Top a 以及#Conatiner a:hover

同樣道理,當我們想要宣告關於標籤下某圖片的樣式,我們得就宣告這樣的上下文選擇器:#Container img
如果是關於圖片的連結,那就變成#Container a img。

沒錯,上下文選擇器可能已經把你搞得頭暈腦漲了,不過一旦你瞭解並學會了這個觀念,你就更遠離那個過氣的丁丁大站了!!所以,加油吧!同志們。

克里斯 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 幾摳
  • 在google上搜尋"css a img 不想繼承"找到這裡來,因為我也做了類似上面所舉的例子,但是a img 一定會繼承 a:link a:hover a:visited底下的東西...結果變的很奇怪,想請問是否有辦法解決??.post-body a:link, .post-body a:visited{
    text-decoration:none;
    color:#000000;
    border: 1px solid;
    }
    .post-body a:hover{
    text-decoration:none;
    color:#ffffff;
    background:#000000;
    } 感謝
  • 要問一下你的 .post-body a img {},是寫怎樣的內容呢?是不是有網頁我可以幫你看一下?因為不清楚你說的不想繼承那個屬性?

    克里斯 於 2009/05/08 12:57 回覆