07_CSS入門和高級技巧(5)

超級連接美化

1.僞類

同一個超級連接，根據用戶的點擊狀況，有本身樣式：

超級連接根據用戶點選狀況，有4種狀態：
a:link 沒有訪問的超級連接
a:visited 已經訪問的超級連接
a:hover 鼠標懸停的時候
a:active 鼠標按下的時候

<style type="text/css">
    a:link{
        color:orange;
    }
    a:visited{
        color:green;
    }
    a:hover{
        color:black;
        font-size: 20px;
        border: 1px solid black;
    }
    a:active{
        font-size: 30px;
    }
</style>

在css裏面叫作類，這個東西是工程師加的，能夠明確的指定某一個標籤是什麼類；
可是:link、:visited，是用戶指定的狀態，在頁面編輯的時候，咱們只能定義，可是不知道是屬於什麼類，因此叫作「僞類」。

2.愛恨準則

先愛了，才能恨。
css有規定，四個僞類的順序必須是：
link、visited、hover、active
和love hate的順序同樣，因此能夠幫助記憶，叫作「愛恨準則」。
若是順序不同，那麼就有可能一些樣式會錯亂。

注意，能夠省略某個，可是順序不能變。好比咱們省略visited，那麼：link、hover、active

3.常見寫法

通常的，咱們都會把a:link、a:visited寫在一塊兒， 這樣點過和沒有點過樣式同樣：

<style type="text/css">
    a:link,a:visited{
        text-decoration: underline;
        color:#333;
    }
    a:hover{
        color:red;
    }
</style>

若是a要轉塊、設置寬高，那麼咱們通常習慣把盒模型的屬性寫在a這個選擇器裏。把關於文字的屬性，寫在僞類選擇器中。特別的，必定要記住text-decoration必定要寫在僞類裏面，或者a標籤裏，絕對不能從父親繼承，由於父親繼承來的text-decoration:none;幹不掉超級連接默認的下劃線。

.nav ul li a{
    display: block;
    width: 120px;
    height: 40px;
 }
 .nav ul li a:link , .nav ul li a:visited{
    text-decoration: none;
    color:white;
 }
 .nav ul li a:hover{
    background-color: gold;
 }

a這個選擇器，「暗含」了a:link、a:visited，因此也能夠不寫a:link、a:visited，直接寫a:hover

.nav ul li a{
    display: block;
    width: 120px;
    height: 40px;
    text-decoration: none;
    color:white;
 }
 .nav ul li a:hover{
    background-color: gold;
 }

僞類的權重和類同樣，若是增長了一個類選擇器。

background系列屬性

1.background-color

背景顏色屬性background-color:#f00;
沒有什麼好說的，咱們一直在用，記住，padding區域也有背景顏色！border之內的地方都有顏色。

2.background-image

背景圖片屬性background-image:url(images/1.jpg);
url是uniform resource locator統一資源定位器的意思，說人話就是「網站」。
url裏面沒有引號，是相對路徑、絕對路徑都是能夠的。

和插入圖片不同

背景圖的應用

<img src=」」 />

背景圖片會默認的橫向、縱向鋪不少個。

3.background-repeat

repeat就是重複的意思

background-repeat:no-repeat;

background-repeat:repeat-x;

background-repeat:repeat-y;

background-image: url(images/libai.png);
background-repeat: repeat-y;

4.background-position

圖片位置屬性。

background-position:100px 200px;
表示讓背景圖片在盒子中向右移動100px，向下移動200px。
若是想向左、向下移動，要寫負數。

background-position最多見的用處就是「CSS精靈」css sprite，有些人叫作「CSS雪碧技術」。

就是指把多個小雜碎圖片，合成一張圖片，而後用background-position定位只顯示其中某一部分。
這樣可以顯著下降HTTP請求數。原來10個背景須要用10張圖片，可是如今只須要1個。

background-position不單單能夠用兩個數字來定位，還能夠用單詞來定位。
在左右層面，咱們用left、center、right來表示左、中、右
在上下層面，咱們用top、center、bottom來表示上、中、下
先左右後上下

background-position:left bottom;

能夠用百分比來表示background-position
backgrond-position:50% 0;等價於 background-position:center top;

假設盒子如今寬度是600px，背景圖的寬度是121px，因此
background-position:center top;
等價於：background-position:50% 0;
等價於：background-position:239.5px 0;

怎麼計算來的？
600 / 2 - 121 /2 = 239.5px

應用：
1） 大背景

2） 通欄banner

banner的尺寸通常都很是寬，是爲了照顧有錢的用戶，他們使用的是寬屏顯示器，分比率達到1920，因此banner的寬度基本都是1920的。咱們要用背景來作banner，寫上

background-image: url(images/banner160223.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #E0B895;

無論多大的分辨率，咱們的banner都是通欄的：

5.background-attachment

背景附屬屬性，attachment就是附屬的意思。它的一個值比較有用fixed;
background-attachment: fixed;

css2.1層面，就這些。css3中又要增長background另外5個屬性，等到時候再說。
咱們能夠合寫：

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:-10px -100px;
background-attachment:fixed;

等價於：
background:red url(1.jpg) no-repeat -10px -100px fixed;

背景圖的應用

1.圖換文字

咱們要插入logo：

<h1>
    <img src="images/logo.png" alt="" />
</h1>

這種插入logo的方式，對搜索引擎不友好。咱們但願的是h1裏面是文字，而不是圖片。搜索引擎是沒法識別圖上的文字的。

因此，比較好的方法，就是用背景圖來呈遞這個圖片，標籤中寫上文字，標籤中的文字是搜索引擎能抓取的。

<h1>愛前端-專業前端開發培訓</h1>

.header h1{
        width: 221px;
        height: 68px;
        background:url(images/logo.png);
        text-indent: -999em;   → 趕走文字，讓用戶看不到文字
    }

也能夠：

.header h1{
        width: 221px;
        height: 68px;
        background:url(images/logo.png);
        line-height: 400px;
        overflow: hidden;
    }

2.先導符號放在 padding裏

3.精靈的擺放

全部要成爲先導符號的小圖標，必定要放到精靈圖的最右邊。