网页开发学习笔记七: css 伪类

  • 链接伪类
    • 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>

 

posted @ 2017-02-26 21:01  小小聪明屋  阅读(222)  评论(0)  编辑  收藏  举报