WEB前端demo4

发布时间:2024年01月02日

复合选择器

1.后代选择器

形式:父代+空格+子代

div span{

    color: red;

}

2.子代选择器
只选择其子代一个
父代>子代>子代>…

div>span>p{
    color: red;
}

3.并集选择器

选中多种标签设置相同格式,
选择器1,选择器2,选择器3,…

  div,p,span{

    color: red;

}

4.交集选择器

符合多个条件,生效。用.隔开

p.box{

    color: red;

}

5.伪类选择器

选中某个元素状态设置样式

最常见的是鼠标悬停时标签的样式

格式,标签:hover

a:hover{
    color: red;
    text-decoration: underline;
}

.box:hover{
    color: green;
}

6.超链接伪类

超链接自带蓝色和下划线样式。我们可以改变超链接的样式。

a:link{
    /* 访问前 的样式*/
    color: forestgreen;
}
a:visited{
    /* 访问后 */
    color: red;
}
a:hover{
    /* 鼠标悬停 */
    color: aqua;
}
a:active{
    /* 点击时 */
    font-weight: 30px;
}

css的特性

1.继承

子类默认继承父类的文字属性,子类如果有自己样式,也不会继承父类

<style>

/* <!-- 子集默认继承父级的文字控制属性 --> */
    body{
        font-size: 30px;
    }
</style>

<body>

/*以下三个样式继承父类body的样式*/

    <div>div</div>

    <p>p</p >

    <span>span</span>

    <!-- 有自己样式,不会继承父类 -->

        <!-- a默认蓝色,不会继承父类的颜色,继承父类的字号 -->

    <a href=" ">a</a >

    <h1>h1</h1>

</body>

2.层叠性

<style>

    div{

        color: red;

        font-size: 30px;

    }

    div{

        color: green;

        font-weight: 700;

    }

</style>

<body>

    <!-- 相同属性会覆盖,后面的覆盖前面的 -->

    <!-- 不同属性会叠加,不同的css都会生效 -->

<!-- 所以这个标签是绿色 -->

    <div>div</div>

</body>

3.优先级

       当一个标签用了多个选择器,选中标签范围越大,优先级越低。

    /* 通配符<标签<类<id<行内标签<!important */

    *{

        color: aqua !important;

    }

    div{

        color: red;

    }

    .box{

        color: green;

    }

    #text{

        color: yellow;

    }

</style>

<body>

    <div class="box" id="text" style="color: violet;"> div</div>

</body>

4.优先级-叠加计算

<style>

    /* 优先级从高到低 */

    /* 行内样式,id选择器个数,类选择器个数,标签选择器个数 ,从左到右依次比较*/

    /* !important优先级最高 */

    /* 继承优先级最低 */



    /* 0,0,2,1 */

    .c1 .c2 div{

        color: blue;

    }

    /* 0,1,0,1 */

    div #box3{

        color: green;

    }

    /* 0,1,1,0    优先级最高 */

    #box1 .c3{

        color: orange;

    }

</style>

<body>

<div id="box1" class="c1">

    <div id="box2" class="c2">

        <div id="box3" class="c3">

                颜色

        </div>

    </div>

</div>    

</body>

所以颜色为橘色

5.优先级-1

继承优先级最低

<style>

    div p{

        color: blue;

    }

        /* 继承。优先级最低 */

    .father{

        color: red;

    }

</style>

<body>

    <div class="father">

        <p class="son">

            文字

        </p >

    </div>

</body>

文字标签继承father效果,不生效,用专用的后代选择器效果div p。文字颜色为蓝色

6.优先级-2 综合

<style>

    /* 0,2,0,0 */

    #father #son{

        color: blue;

    }

    /* 0,1,1,1 */

    #father p .c2

    {

        color: black;

    }

    /* 0,0,2,2 */

    div.c1 p.c2{

        color: red;

    }

/* 继承    */

 #father{

        color: green !important;

    }

/* 继承 */

    div#father.c1{

        color: yellow;

    }

</style>

<body>

    <div id="father" class="c1">

        <p id="son" class="c2">

                文本

        </p >

    </div>

</body>

文字样式为蓝色。

Emment标签

使用一些快捷键可以大幅度提高工作效率

  <!-- div.  类标签-->

    <div class=""></div>

    <!-- div#  id选择器-->

    <div id=""></div>

    <!-- div+p  同级标签-->

    <div></div>

    <p></p >

    <!-- div>p  父子级标签-->

    <div>

        <p></p >

    </div>

    <!-- div*3  多个相同的标签-->

    <div></div>

    <div></div>

    <div></div>

    <!-- div{niaho}  有内容的标签-->

    <div>nihao</div>

背景属性(图)

1.默认平铺

div p{

    width: 400px;

    height: 400px;

    color: red;

    font-size: 30px;

    /* 背景图默认平铺的效果 */

    background-image: url(./demo2/2.jpg);

}

2.平铺方式(bgr)

 div{

        width: 400px;

        height: 400px;

        color: red;

        background-color: pink;

        background-image: url(./demo2/2.jpg);

        /* 背景图平铺方式 */

        /* 四个任选其一 */

        /* 不写就是默认 */

        /* 默认效果,平铺 */

        background-repeat: repeat;

        /* 不平铺 */

        background-repeat: no-repeat;

        /* 水平平铺 */

        background-repeat: repeat-x;

        /* 垂直平铺 */

        background-repeat: repeat-y;

    }
默认平铺repeat
不平铺no-repeat
水平平铺repeat-x
垂直平铺repeat-y

3.背景图位置(bgp)

 div{

        width: 400px;

        height: 400px;

        background-image: url(./demo2/3.jpg);

        color: red;

        background-color: pink;

        background-repeat: no-repeat;

        /* 背景图位置 */

        /* 第一个参数代表水平位置,正数向右,负数向左 */

        /* 第一个参数代表垂直位置,正数向下,负数向上 */

       

        /* background-position: center ; 水平,垂直都居中*/

        /* background-position: center 50px; */

        /* background-position: 50px 50px; */

        /* 关键字可以只写一个,另一个方向默认居中 */

        background-position: bottom;

    }

4.缩放背景图(bgs)

    div{

        width: 400px;

        height: 300px;

        background-color: pink;

        background-image: url(./demo3/1.jpg);

        background-repeat: no-repeat;

        /* 缩放背景图 */

        /* contain 如果图的宽高跟盒子宽高一样,可能会导致留白 */

        /* background-size: contain; */

        /* 完全覆盖盒子  cover*/

        /* background-size: cover; */

        /* 如果100%,表示图片宽度和图片宽度一样,图片高度按图片比例等比缩放 */

        background-size: 100%;
    }
缩放背景图contain
完全覆盖背景图cover
等比背景图数字+%

5.背景图固定(bga)

不常用

 body{

        background-image: url(./demo3/1.jpg );

        background-repeat: no-repeat;

        background-position: center top;

        /* 背景图固定 */

        background-attachment: fixed;

    }

6.混合属性

一个背景图可用多个属性

   div{
        width: 1400px;
        height: 1400px;

        /* 无先后顺序 */
        /* 属性值:背景色,背景图,背景平铺方式,背景图位置/背景图缩放 */
        background: pink url(./demo3/1.jpg) no-repeat center top/cover;
    }

注意:彼此通过空格相连,

背景图位置与背景图缩放由于有共同的格式,故需要用/划开

显示模式

一共有三种显示模式

块元素,行内元素,行内块元素

分别div span img 为代表

div{

    width: 100px;

    height: 100px;

    background-color: burlywood;

}

span{

    width: 100px;

    height: 100px;

}

img{

    width: 100px;

    height: 100px;

}

</style>

<body>

    <!-- 块元素 -->

    <!-- 独占一行 -->

    <!-- 宽度默认是父级的100% -->

    <!-- 添加宽高属性生效 -->

    <div>div</div>

    <div>div</div>

    <!-- 行内元素 -->

    <!-- 一行有多个,由内容撑开他的尺寸 -->

    <!-- 添加宽高不生效 -->

    <span>ll</span>

    <span>jjjjjjjjjj</span>

    <!-- 行内块元素 -->

    <!-- 一行共存多个, -->

    <!-- 宽高默认内容展开 -->

    < img src="./demo3/1.jpg" alt="">

    < img src="./demo3/1.jpg" alt="">

</baby>

转换显示模式

用display


div{

    width: 100px;

    height: 100px;

    background-color: burlywood;

    display: inline-block;

}

span{

    width: 100px;

    height: 100px;

    display: block;

}

img{

    width: 100px;

    height: 100px;



    display: block;



}

    </style>

</head>

<body>

    <!-- block 块级 -->

    <!-- inline-block 行内级 -->

    <!-- inline 行内 -->

 
     <!-- 块元素 -->

    <div>div</div>

    <div>div</div>


    <!-- 行内元素 -->

    <span>ll</span>

    <span>jjjjjjjjjj</span>


    <!-- 行内块元素 -->

    < img src="./demo3/1.jpg" alt="">

    < img src="./demo3/1.jpg" alt="">

</body>
block
行内inline
行内级inline-block

背景代码

背景位置background-position
平铺方式background-repeat
缩放背景图background-size
背景图固定background-attachment
文章来源:https://blog.csdn.net/m0_65348671/article/details/135327248
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。