CSS元素显示,背景,层叠性，继承性，优先级

最新推荐文章于 2024-09-22 22:48:16 发布

. hh

最新推荐文章于 2024-09-22 22:48:16 发布

阅读量662

点赞数

分类专栏：前端学习笔记文章标签： css 前端

本文链接：https://blog.csdn.net/qq_65359222/article/details/129708226

版权

前端学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、CSS元素显示模式
二、CSS背景
三、层叠性，继承性，优先级

一、CSS元素显示模式

1.块级元素、行内元素、行内块元素

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<body>
    块级元素
    <br>
    特别的p标签里面不能放盒子
    <div>独占一行 高度宽度外边距内距都可以控制 宽度默认是容器（父级宽度）的100% 是容器或者盒子里面可以放行内或者块级元素</div>

    行内元素
    <br>
    <span>
        相邻行内元素在一行上，一行可以显示多个。
        高、宽直接设置无效。
        默认宽度是他本身内容的宽度。
        行内元素只能容纳文本或者其他行内元素。
    </span>
    <a href="#">链接里面不能放链接 可以放块级元素</a>

    行内块元素
    <br>
    <img> 、<input>、 <td></td>
    既有行内元素特点又有行内块元素特点
</body>

2.元素显示模式转换

    <style>
        a {
            width: 100px;
            height: 50px;
            background-color: pink;

            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: blueviolet;

            display: inline;

        }

        span {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;

            display: inline-block;
        }
    </style>

<body>
    <a href="#">我是行内元素</a>
    <a href="#">我是行内元素</a>

    <div>我是块级元素</div>

    <span>行内元素转换成行内块元素</span>
</body>

3.案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        a {
            display: block;
            font-size: 14px;
            color: rgb(252, 253, 255);
            background-color: rgb(99, 101, 103);
            width: 150px;
            height: 40px;
            text-decoration: none;
            /* text-indent: 2em; */
            /* 实现文字垂直居中 使行高line-height=盒子高height */
            line-height: 40px;
            
        }

        a:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

二、CSS背景

在这里插入图片描述

1.背景颜色

    <style>
        div {
            /* 背景颜色： */
            background-color: transparent;
            /*透明的 还可以改成其他颜色*/

            /* 背景图片 */
            width: 500px;
            height: 500px;

            /* 不要落下 url() */
            background-image: url(-4b98037cb6087568.jpg);
            /* 背景图片不平铺 默认图片都是平铺*/
            background-repeat: no-repeat;
            /* repeat-x：沿x平铺 repeat-y：沿y平铺*/
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压制背景颜色 */
            /* 背景图片位置 */
            /* background-position: 方位名词:center,right,center right,.....跟前后顺序没关系 */
            background-position: center;

            /* 混合单位 精确方位 有顺序关系x y*/
            background-position: 20px 50px;
            /* 如果是20px: x=20px,y=center*/


        }

        body {
            /* background-image: url(bg.webp);
            background-repeat: no-repeat;
            background-position: center top; */
            /* 把背景图片固定:fixed 背景图像随对象内容而滚动：scroll  */
            /* background-attachment: fixed; */

            /* 简写 background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 */
            /* 顺序可以乱 */
            background: black url(bg.webp) no-repeat fixed center top;

            color: #fff;
            font-size: 20px;
        }
    </style>

<body>
    <div>盒子</div>
    <p>哈喽，我是.hh</p>
    <p>哈喽，我是.hh</p>
    <p>哈喽，我是.hh</p>
    <p>哈喽，我是.hh</p>
    <p>哈喽，我是.hh</p>
</body>

效果图：滑动鼠标滑轮只有文字和图片会动，背景固定。
在这里插入图片描述

2.rgb与rgba

rgb可以实现自选颜色，有三个参数。

color: rgb(231, 224, 224);

rgba也是自选颜色，一般用于背景，不同的是多了一个参数，最后一个参数含义是透明度，取值在0~1之间。

background: rgba(0, 0, 0, 0.3);

3.综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .nav a {
            display: inline-block;
            text-decoration: none;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 58px;
            color: #fff;
        }

        /*一个a的例子，鼠标一经过换背景 一定要使用url*/
        .nav .bg1 {
            background: url(bg.webp) no-repeat center;
        }

        .nav a:hover {
            background-image: url(-4b98037cb6087568.jpg);
        }
    </style>

</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>
</body>

</html>

正如所描述得那样，鼠标经过时背景发生改变，并且背景比图片更容易设定位置。
在这里插入图片描述

三、层叠性，继承性，优先级

1.层叠性

层叠性是对于属性而言的，同一个属性比如

color: red;
…
color: blue

覆盖原来的属性，那么最终呈现的效果是blue。

2.继承性

所谓继承性就是子承父业，当然儿子也可以继承祖业，父亲有的属性，儿子也有，不过是部分，这部分除了文字的属性可以继承之外行高也可继承。

<style>
    div {
        /* 字体大小/行高(带单位) 字体 */
        /* font : 12px/14px 'Microsoft YaHei'; */
        /* 行高不带单位是指 当前元素的大小的几倍 */
        font: 12px/1.5 'Microsoft YaHei';
    }

    p {
        /* 16*1.5=24 当前p标签的字体大小是24px而不是16px 继承父亲的，如果父亲没有属性那就是父亲的父亲 */
        font-size: 16px;
    }
</style>

<div>
    <p>啦啦啦</p>
</div>

3.优先级

通俗的讲就是谁先实现自己的属性，从而会覆盖掉一些属性，这些属性都与权重相关。
在这里插入图片描述
需要注意的是下面这个是无穷大，不管是哪个属性，只要有这个那么就一定是优先的不被更改的。

color: green!important;(优先执行)
如果在继承中我们写上

<div>
    <p>啦啦啦</p>
</div>

div {
	color: red;
}
p {
	color: blue;
}

根据继承性p会先继承red色，但是由于继承权重是0，所以当p有了自己的属性之后就会显现出blue色，所以最终p为blue。

继承的权重为0：不管父元素权重有多高，子元素都优先执行自己的
比如a：浏览器中给的默认样式是 a{ color:blue;}
所以给body修改样式a标签不变

复合选择器会有权重叠加的问题

权重会叠加，永远不会进位比如 0,0,0,1+0,0,0,9=0,0,0,10
ul li权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2
ul li {
color: green; 最终效果是green
}
li {
color: red;
}
.nav li 权重 0,0,0,1 + 0,0,1,0 =0,0,1,1
.nav li {
color: pink; 现在li是pink
}