網頁開發學習筆記七: css 僞類

時間  2019-11-18
標籤 網頁 開發 學習 筆記 css 欄目 HTML 简体版
原文   原文鏈接
  • 連接僞類
    • a:link{屬性: 值;}　　a{屬性:值;}　　效果同樣
    • a:link{屬性: 值}　　　  連接的默認狀態
    • a:visited{屬性: 值}　　連接訪問以後的狀態
    • a:hover{屬性: 值}       鼠標放到連接上顯示的狀態
    • a:active{屬性: 值}　　 連接激活的狀態(鼠標按下沒有鬆開時顯示的狀態)
    • :focus{屬性: 值}　　　 獲取焦點
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        /*默認的狀態*/
        a:link{
            color: red;        }

        /*訪問以後的狀態*/
        a:visited{
            color: green;
        }

        /*鼠標放在連接上面的狀態*/
        a:hover{
            color: yellow;
        }

        /*連接激活的狀態*/
        a:active{
            color: orange;
        }

    </style>
</head>
<body>

    <a href="#">AAAAA</a>

</body>
</html>

 

  • 文本修飾　　text-decoration: none | underline | line-through
    • none　　　　    不要下劃線
    • underline 　　   要下劃線
    • line-through　　刪除線
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        /*默認的狀態*/
        a:link{
            color: red;
            text-decoration: none;
        }

    </style>
</head>
<body>

    <a href="#">AAAAA</a>

</body>
</html>

 

  • 背景屬性
    • background-color　　　　　  背景顏色
    • background-image　　　　   背景圖片
    • background-repeat　　　　  背景平鋪 repeat | no-repeat | repeat-x | repeat-y
    • background-position　　　　背景定位 left | right | center | top | bottom
      • 方位值只寫一個的時候, 另一個默認居中
      • 寫兩個方位值的時候, 順序沒有要求
      • 寫兩個具體值的時候, 第一個值表明水平方向, 第二個值表明垂直方向
    • background-attachment　　背景是否滾動 scroll | fixed
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        .box{
            width: 300px;
            height: 500px;
            background-color: #999;
            background-image: url("1.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;

            background: red url("1.jpg") no-repeat bottom scroll;
        }
    </style>
</head>
<body>

    <div class="box">
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
        <p>AAAAA</p>
    </div>

</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程