/*(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。

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

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