css补充

最新推荐文章于 2022-09-06 15:51:50 发布

HashFlag

最新推荐文章于 2022-09-06 15:51:50 发布

阅读量158

点赞数

分类专栏： Python基础

本文链接：https://blog.csdn.net/sinat_41672927/article/details/107054985

版权

Python基础专栏收录该内容

45 篇文章 0 订阅

订阅专栏

（12）伪元素选择器

html代码:
    <div>
    	吟诗作对!	
    </div>
css写法
    div{
        background-color: pink;
        height: 100px;
        width: 200px;
    }
    div:after{
        content: '?';
        color:white;
    }

（13）伪类选择器

hover和pointer
html代码
        <div class="c1">

        </div>
	
	css写法
	.c1{
            background-color: red;
            height: 300px;
            width: 300px;

        }
        .c1:hover{
            /*background-color: green;*/
            background-image: url("111.png");
            cursor: pointer;
        }

（14）文字装饰

a{
	text-decoration: none; 去除下划线
}

（15）定位position

static  静态定位,也就是标签默认，html文档的默认效果

relative:  相对定位,按照自己原来的位置进行移动

absolute: 绝对定位,按照父级标签或者祖先辈儿标签设置了相对定位的标签位置进行移动,如果没有找到相对定位标签,会找到整个文档的位置进行移动

fixed: 固定定位, 按照浏览器窗口的位置进行移动

示例:
html代码
    <div class="cc">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
    <div class="c3"></div>
css写法:
       body{
            margin: 0;
        }
        .c1{
            background-color: red;
            height: 100px;
            width:100px;
        }

        .c2{
            background-color: green;
            height: 100px;
            width:100px;
            /*position: relative; !* 相对定位 *!*/
            /*left:100px;*/
            /*top:-100px;*/
            /*bottom:*/
            /*right:*/
            position: absolute;
            top: 20px;
            left: 80px;
        }

        .c3{
            background-color: purple;
            height: 100px;
            width:200px;
        }
        .cc{
            margin-top: 200px;
            position: relative;
        }



固定定位示例:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }

            .c1{
                background-color: red;
                height: 1000px;
                width: 800px;
            }
            .c2{
                background-color: green;
                height: 1000px;
                width: 800px;
            }
            .c3{
                background-color: blue;
                height: 1000px;
                width: 800px;
            }

            .s1{
                position: fixed;
                left: 40px;
                bottom: 20px;
                height: 40px;
                width: 60px;
                background-color: aqua;

                line-height: 40px;
                text-align: center;
            }

            .s1 a{
                color:white;
                text-decoration: none;
                font-size: 12px;
            }

        </style>
    </head>
    <body>
    <div id="top">这是顶部</div>

    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <span class="s1">
        <a href="">返回顶部</a>
    </span>
    </body>
    </html>

（16）选择器优先级

html代码:
    <div class="c1">
        这是c1的直属文本
        <div id="d1" class="c2">
            <!--<span class="c3" id="d3" style="color:black;">-->
            <span class="c3 c4">
                这是c1的儿子c2标签的文本
            </span>
        </div>
    </div>

css代码
        div{
            color:red;
        }

        /* css属性有继承的概念  权重0*/
        /* 标签(元素)选择器  权重1*/
        /* 类选择器  权重10*/
        /* id选择器  权重100*/
        /* 内联样式  权重1000*/
        <div style='color:red;'></div>
        
        /* color:green!important; 无敌! */
		/* 如果优先级相同,按照后面的为准 */
		别忘了,class属性的值可以写多个

        /*#d3{*/
            /*color:yellow;*/
        /*}*/

        .c3{
            color:blue;
        }

        /*span{*/
            /*color:green!important;*/
        /*}*/

        .c4{
            color:yellow;
        }