CSS——讀書筆記-05-連接

第五章 對連接應用樣式

1.簡單的連接樣式

1》錨類型選擇器

a { color: red; }

2》僞類型選擇器

錨能夠做爲內部引用，也能夠做爲外部連接。

如：第一個錨點擊跳轉第二個錨位置。

<p><a href="#mainContent">Skip to main content</a></p>
<h1><a name="mainContent">Welcome</h1>

因此能夠設置僞類型：未被訪問link，已訪問過visited

a:link { color:blue; }
a:visited { color:green; }

懸停hover(使用時最好加上focus，使經過鍵盤移動到連接時有一樣效果)；

a:hover, a:focus { color: red; }　　

被激活active(連接單擊時)

不少時候，會先去掉下劃線，在懸停或者單擊時顯示下劃線。

a:link, a:visited { text-decoration: none; }
a:hover, a:focus, a:active { text-decoration: underline; }

注意:上面兩句順序不能顛倒，不然會覆蓋hover和active的樣式。建議順序：link/visited/hover/focus/active。

 

2.讓下劃線更有趣

1》使用下邊框(點線->實線)

a:link, a:visited {
    text-decoration: none;
    border-bottom: 1px dotted #000;
}

a:hover, a:focus, a:active {
    border-bottom-style: solid;
}

2》使用圖像

a:link, a:visited {
    color: #666;
    text-decoration: none;
    background: url(/img/underline1.gif) repeat-x left bottom;
}

 

3.特殊的已訪問連接樣式

採用圖像:

a:visited {
    padding-right: 20px;
    background: url(/img/check.gif) no-repeat right middle;
}

　　

4.未鏈接目標設置樣式

跳轉

<a href="http://xxx.com/story.htm#comment3">
    A great comment by simon
</a>

跳轉後，不容易發現目標元素，因此設置目標元素的樣式（IE暫不支持，safari和Firefox已經支持）

.comment:target {
    background-color: yellow;
}

　　

5.突出顯示不一樣類型的連接

對於外部連接，許多站點在新窗口中打開，在沒通知用戶的狀況下使用戶失去了控制能力，

因此在外部連接添加一個特殊的樣式，用於區別。

如，Wikipedia等站點使用一個框右上角一個箭頭的圖像標識。

方式：

　　能夠經過給全部外部連接添加一個類去設置；

　　經過屬性選擇器，a[href^="http://"]

(可是一樣會設置了使用絕對url而不是相對url的內部連接，能夠將指向本身域名的連接去掉該樣式)

一樣，能夠設置其餘類型的連接，如全部pdf連接a[href$=".pdf"]