CSS入門(5)--CSS中的超連結a

1                       a:link{

2                               color:red;

3                        }

4                        a:visited{

5                               color:orange;

6                        }

7                        a:hover{

8                               color:green;

9                        }

10                     a:active{

11                            color:black;

              }

:link      表示， 使用者沒有點擊過這個連結的樣式。是英語“連結”的意思。

:visited    表示，使用者訪問過了這個連結的樣式。 是英語“訪問過的”的意思。

:hover     表示，使用者滑鼠移至上方的時候連結的樣式。 是英語“懸停”的意思。

:active     表示，使用者用滑鼠點擊這個連結，但是不鬆手，此刻的樣式。 是英語“啟用”的意思。

記住，這四種狀態，在css中，必須按照固定的順序寫：

a:link、a:visited 、a:hover 、a:active

如果不按照順序，那麼將失效。“愛恨準則”love hate。必須先愛，後恨。

1          .nav ul li a{

2                               display: block;

3                               width: 120px;

4                               height: 40px;

5                        }

6                        .nav ul li a:link,.nav ul li a:visited{

7                               text-decoration: none;

8                               background-color: yellowgreen;

9                               color:white;

10                     }

11                     .nav ul li a:hover{

12                            background-color:purple;

13                            font-weight:bold;

14                            color:yellow;               }

最標準的，就是把link、visited、hover都要寫。但是前端開發工程師在大量的實踐中，發現不寫link、visited瀏覽器也挺相容。所以這些“老油條”們，就把a標籤簡化了：

a:link、a:visited都是可以省略的，簡寫在a標籤裡面。也就是說，a標籤涵蓋了link、visited的狀態。

1          .nav ul li a{

2                               display: block;

3                               width: 120px;

4                               height: 50px;

5                               text-decoration: none;

6                               background-color: purple;

7                               color:white;

8                        }

9                        .nav ul li a:hover{

10                            background-color:orange;               }