CSS基礎-5 僞類

1、僞類

    咱們以a標籤爲例

 

僞類標籤分爲4類

    1. 設置超連接默認的樣式

        a:link {屬性:值;.....}

           或者

       a { 屬性: 值;}           推薦使用這種方式

 

    2. 設置超連接訪問事後的樣式

        a:visited {屬性:值; ......} 

           注意：該僞類（visited ）只能設置有關顏色的屬性。

       有瀏覽器緩存問題

   　　

    3. 鼠標移動到超連接上的樣式

       a:hover {屬性:值;.....} 

              

    4. 超連接激活狀態下的樣式

       a:active {屬性: 值;...}            

      

2、背景(background)

（1）background-color   設置背景顏色

（2）background-image: url(2.png);   設置背景圖片

  注意：給標籤元素設置背景圖片的時候，須要有寬度和高度

  例子：

  .a {

      margin:100px auto;

       width:300px;

       height:300px;

       background-image:url(img/b.jpg)

    }

效果以下：

    

 

（3）background-repeat: no-repeat;    背景不平鋪

       默認值爲　repeat 平鋪

               no-repeat;    背景不平鋪

　　　　　　　　

　　　　　　　　 代碼以下：

                .a {

                        margin:100px auto;

                        width:300px;

                        height:300px;

                        border:3px solid red;

                        background-image:url(img/b.jpg);

                        background-repeat: no-repeat;

                        }

               

              repeat-x       背景橫向平鋪

　　　　　　　　

 

              代碼以下：

                .a{

                        margin:100px auto;

                        width:300px;

                        height:300px;

                        border:3px solid red;

                        background-image:url(img/b.jpg);

            　　            background-repeat: repeat-x;

                        }

            

        repeat-y        背景縱向平鋪

（4）background-position： 設置背景圖片的位置

   直接設置具體的方位名詞 （left,right,top,center,bottom）

  

              注意： 當給背景設置位置的時候，若是背景位置的取值爲具體的方位名詞的時候，取值位置能夠調換。

　　　　　　　　

若是隻寫一個具體方位名稱，默認的第二值爲居中（center）

             例子：

          .a {

                        margin:100px auto;

                        width:500px;

                        height:500px;

                        border:3px solid red;

                        background-image:url(img/b.jpg);

                        background-repeat: no-repeat;

                        background-p osition:left;

                        }

 

 

 設置具體值的時候，第一個值爲水平方向，第二個值爲垂直方向

 

 

background-attachment: fixed;  設置背景圖片固定