HTML5+CSS3基础（day9）

最新推荐文章于 2024-10-02 07:15:00 发布

澈如冬雪^

最新推荐文章于 2024-10-02 07:15:00 发布

阅读量75

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/m0_52372037/article/details/128571490

版权

一、CSS的背景（续）

8.背景位置-混合单位

在这里插入图片描述

示例

<title>背景位置-混合单位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(../img/2.png);
            background-repeat: no-repeat;
            /* 一定是x 为20px  y是center   */
            /* background-position: 20px center; */
            /* 水平是居中对齐  垂直是20px */
            background-position: center 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

<title>超大背景图（混合单位）</title>
    <style>
        body {
            background-image: url(../img/3.png);
            background-repeat: no-repeat;
            /* background-position: center top; */
            background-position: center 40px;
        }
    </style>
</head>

<body>

</body>

9.背景固定

在这里插入图片描述

示例

<title>超大背景图片-背景固定</title>
    <style>
        body {
            /* background-image: url(../img/3.png);
            background-repeat: no-repeat;
            background-position: center top; */
            /* 把背景图片固定住 */
            /* background-attachment: fixed; */
            /* 背景属性复合写法 */
            background: black url(../img/3.png) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
    <p>爱回忆的人，脚步总会比别人慢一些</p>
</body>

10.背景属性复合写法

在这里插入图片描述

11.背景颜色半透明

在这里插入图片描述

示例

<title>背景透明写法</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* background-color: black; */
            /* background-color: rgba(0, 0, 0, 0.3); */
            background: rgba(0, 0, 0, .3)
        }
    </style>
</head>

<body>
    <div></div>
</body>

12.背景总结

在这里插入图片描述

13.综合案例-五彩导航

在这里插入图片描述

示例

<title>综合案例-五彩导航</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            /* line-height: 58px; */
            /* 行高改成48 因为小尖角占了一定高度，使文字看起来靠下 */
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(../img/bg1.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(../img/bg7.png);
        }

        .nav .bg2 {
            background: url(../img/bg2.png) no-repeat;
        }

        .nav .bg2:hover {
            background-image: url(../img/bg6.png)
        }

        .nav .bg3 {
            background: url(../img/bg3.png) no-repeat;
        }

        .nav .bg3:hover {
            background-image: url(../img/bg5.png)
        }

        .nav .bg4 {
            background: url(../img/bg4.png) no-repeat;
        }

        .nav .bg4:hover {
            background-image: url(../img/bg3.png)
        }

        .nav .bg5 {
            background: url(../img/bg5.png) no-repeat;
        }

        .nav .bg5:hover {
            background-image: url(../img/bg2.png)
        }
    </style>
</head>

<body>
    <div class="nav">
        <!-- a{五彩导航}*5 -->
        <!-- 按住shift alt键 拖动鼠标左键 就可以选中所有 空链接 -->
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>
</body>

二、CSS的三大特性

在这里插入图片描述

1.CSS三大特性之层叠性

在这里插入图片描述

示例

<title>CSS三大特性之层叠性</title>
    <style>
        div {
            /* color样式冲突 被就近的覆盖掉 font-size样式不冲突 保留 */
            color: red;
            font-size: 12px;

        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <div>长江后浪推前浪，前浪死在沙滩上</div>
</body>

2.CSS三大特性之继承性

（1）

示例

<title>CSS三大特性之继承性</title>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <!-- p标签会继承div标签的样式 -->
        <p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
    </div>
</body>

（2）行高的继承（特殊的情况）

在这里插入图片描述

示例

<title>行高的继承</title>
    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }

        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍 所以当前div 的行高就是21像素 */
            font-size: 14px;
        }

        p {
            /* 1.5*16=24 当前的行高 */
            font-size: 16px;
        }

        /* li没有手动指定文字大小 则会继承父亲的文字大小 body 12px 所以li的文字大小为12px 当前li 的行高就是 12*1.5=18 */
    </style>
</head>

<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>