前端之CSS篇(二)——CSS复合选择器及元素的显示模式和背景属性

最新推荐文章于 2024-05-31 17:42:47 发布

今晚务必早点睡

最新推荐文章于 2024-05-31 17:42:47 发布

阅读量770

点赞数 2

分类专栏：前端文章标签：前端 css vscode

本文链接：https://blog.csdn.net/m0_57021623/article/details/127143166

版权

前端专栏收录该内容

34 篇文章 10 订阅

订阅专栏

1.Emmet语法

Emmet语法是前身是Zen coding,它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。

1.1快速生成HTML结构语法

(1)生成标签直接输入标签名按tab键即可比如

div(再按table键)
生成
<div></div>

(2)如果想要生成多个相同标签加上*就可以了比如

div*3
生成
 <div></div>
 <div></div>
 <div></div>

(3) 如果有父子级关系的标签，可以用 > 比如

ul>li
生成
<ui>
    <li></li>
</ui>

ol>li#test$*5
生成
<ol>
    <li id="test1"></li>
    <li id="test2"></li>
    <li id="test3"></li>
    <li id="test4"></li>
    <li id="test5"></li>
</ol>

(4)如果有兄弟关系的标签，用 + 就可以比如

div+p
生成
<div></div>
<p></p>

(5)如果生成带有类名或者id名字的比如

.demo
生成
<div class="demo"></div>

#one
生成
<div id="one"></div>

(6)如果生成的div类名是有顺序的，可以用自增符号$

.demo
生成
<div class="demo"></div>

.demo*4
生成
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>

.demo$*4
生成
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>

p.one
生成
<p class="one"></p>


span.green
生成
<span class="green"></span>

span#green
生成
<span id="green"></span>

p.one$*4
生成
<p class="one1"></p>
<p class="one2"></p>
<p class="one3"></p>
<p class="one4"></p>

(7)如果想要在生成的标签内部写内容可以用{}表示

div{今天没有下雨}
生成
<div>今天没有下雨</div>

div{今天不上班}*5
生成
<div>今天不上班</div>
<div>今天不上班</div>
<div>今天不上班</div>
<div>今天不上班</div>
<div>今天不上班</div>

div{$}*5
生成
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

1.2.快速生成CSS样式语法

<style>
    .test {
    输入文本
    }
</style>


在输入文本中
输入：tac     生成   text-align: center;
输入：w       生成   width:  ;
输入：h       生成   height: ;
输入：w100    生成   width: 100px;
输入：h200    生成   height: 200px;
输入：ti2em   生成   text-indent: 2em;
输入: lh32px  生成   line-height: 32px;
输入：tdnone  生成   text-decoration: none;


<style>
        .test {
            text-align: center;
            width: ;
            height: ;
            width: 200px;
            height: 200px;
            text-indent: 2em;
            line-height: 32px;
            text-decoration: none;

        }
</style>

1.3 快速开发

方法一：

在VSCode中，格式化文档的快捷键

shift +alt + F

也可以设置我们保存页面的时候自动格式化代码

方法二：

1.【文件】》》》》【首选项】》》》【设置】；

2.搜索setting

3.在settings.json下的【用户】中添加以下语句：

{
    "editor.formatOnType": true,
    "editor.formatOnSave": true
}

只需要设置一次，以后都可以自动保存格式化代码。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-79TrR6rQ-1664695093577)(Typora_image/051.png)]

2.CSS的复合选择器

2.1什么是复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。

(1) 复合选择器可以更准确的、更高效的选择目标元素标签

(2) 复合选择器是有由两个或多个基础选择器，通过不同的方式组合而成的。

(3)常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

2.1.1后代选择器(重要)

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。

语法：

元素1 元素2 {样式声明}

上述语法表示选择元素1里面的所有元素2(后代元素)

例如：

ul li { 样式声明 }    /* 选择ul里面的所有的li标签元素 */

(1) 元素1 和元素2 中间用空格隔开

(2) 元素1 是父级，元素2 是子级，最终选择的是元素2

(3) 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

(4) 元素1和元素2 可以是任意基础选择器

测试代码如下：

<!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>复合选择器之后代选择器</title>
    <style>
        /* <!-- 需求：将ol里面的li全部变为red --> */
        ol li {
            color: green;
        }

        /* 需求：将ol里面的li里面的p标签变为orange */
        ol li p {
            color: orange;
        }

        /* 需求：把第二组ul里面的li里面的p标签变为yellow */
        .yellow li p {
            color: yellow;
        }
    </style>

</head>

<body>
    <!-- 有序列表 -->
    <ol>
        <li>速度</li>
        <li>速度</li>
        <li>速度</li>
        <li>
            <p>孙子辈的标签</p>
        </li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>速度</li>
        <li>速度</li>
        <li>速度</li>
        <li>
            <P>无序列表里面的p标签不会变化</P>
        </li>
    </ul>
    <ul class="yellow">
        <li>速度</li>
        <li>速度</li>
        <li>速度</li>
        <li>
            <p>我第二组无序列表里面的p标签</p>
            <p>我第二组无序列表里面的p标签</p>
            <p>我第二组无序列表里面的p标签</p>
            <p>我第二组无序列表里面的p标签</p>
        </li>
    </ul>
</body>

</html>

执行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGn3hb1L-1664695093579)(Typora_image/052.png)]

2.1.2子选择器(重要)

子元素选择器(子选择)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法

元素1 > 元素2{样式声明}

上述语法表示选择器11里面的所有直接后代(子元素)元素2.

例如：

div > p { 样式声明 }    /* 选择div里面所有最近一级p标签元素*/

(1)元素1 和元素2 中间用大于号隔开

(2) 元素1是父级，元素2是子级，最终选择的是元素2

(3)元素2必须是亲儿子，其孙子、重孙之类的都不归他管。你也可以叫他亲儿子选择器。

测试代码：

<!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>子元素选择器</title>
    <style>
        .red>a {
            color: rgb(221, 30, 30);
        }
    </style>
</head>

<body>
    <div class="red">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>

    </div>
</body>

</html>

运行效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YEVIRIdh-1664695093580)(Typora_image/053.png)]

上面例子中的第二个a也可以用后代选择器改变样式

代码如下：

<!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>子元素选择器</title>
    <style>
        .red>a {
            color: rgb(221, 30, 30);
        }

        .red p a {
            color: rgb(45, 209, 53);
        }
    </style>
</head>

<body>
    <div class="red">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>

    </div>
</body>

</html>

执行效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H2Bylbmo-1664695093581)(Typora_image/054.png)]

测试练习

1.请将下面的链接文字修改为红色

<div class='nav'>
    <ul>
        <li><a href="#">百度</a></li>
        <li><a href="#">百度</a></li>
    </ul>
</div>

修改样式如下：

<style>
        .nav ul li a {
            color: red;
        }
</style>

2.请将下面的诸葛亮改为橘色

<body>
    <div class="hot">
        <a href="#">诸葛亮</a>
        <ul>
            <li><a href="#">孔明</a></li>
            <li><a href="#">卧龙</a></li>
        </ul>
    </div>
</body>

修改样式为：

<style>
    .hot>a {
            color: orange;
        }
</style>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ADx5nbRB-1664695093583)(Typora_image/055.png)]

2.1.3并集选择器(重要)

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1，元素2 { 样式声明 }

上述语法表示选择元素1 和元素2

例如

ul,div { 样式声明 }    /* 选择ul 和 div标签元素*/

(1)元素1 和元素2 中间用逗号隔开

(2) 逗号可以理解为和的意思

(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>
        /* 需求1：请把熊大和熊二改为粉色 */
        /* div {
            color: pink;
        }

        p {
            color: pink;
        } */
        /* div,
        p {
            color: pink;
        } */

        /* 需求2：请把熊大、熊二改为红色 还有小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OW6hr2em-1664695093584)(Typora_image/056.png)]

约定的语法规范，并集选择器喜欢竖着写，最后一个选择器不需要加逗号(需求二的样式)

2.1.4伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号(:)表示，比如：hover、first-child。

因为伪类选择器很多，比如有链接伪类、结构伪类等。

2.1.5链接伪类选择器

a.link         选择所有未被访问的链接
a.visited      选择所有已被访问的链接
a:hover        选择鼠标指针位于其上的链接
a:active       选择活动链接(鼠标按下未弹起的链接)

代码如下：

<!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>链接伪类选择器</title>
    <style>
        /* 未访问的链接 a:link  */
        a:link {
            color: rgb(228, 231, 15);
            text-decoration: none;
        }

        /* 选择点击过的(访问过的)链接 a:visited */
        a:visited {
            color: rgb(26, 224, 238);
        }

        /* 选择鼠标经过的那个链接   a:hover */
        a:hover {
            color: rgb(238, 23, 166);
        }
        /* 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 a:active */
        a:active {
            color: rgba(18, 238, 18, 0.74);
        }
    </style>
</head>

<body>
    <a href="#">CSS链接伪样式选择器</a>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S4RuOLI8-1664695093585)(Typora_image/057.png)]

(1) 链接伪类选择器注意点

1.为了确保生效，按照LVHA的顺序声明 (:link—>:visited–>:hover—>:active)

2.记忆法：love hate 或者lv 包包 hao.

3.因为a链接在浏览器中具有默认的样式，所以我们实际工作中都需要给链接单独指定样式。

<!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>复合选择器之链接伪类选择器</title>
    <style>
        body {
            color: purple;
        }
    </style>
</head>

<body>
    <a href="#">这是一个链接</a>
</body>

</html>

整体给body设定一个样式是不生效的，需要具体指定

<!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>复合选择器之链接伪类选择器</title>
    <style>
        /* body {
            color: purple;
        } */

        a {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">这是一个链接</a>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xqRyoeWT-1664695093587)(Typora_image/058.png)]

(2)链接伪类选择器实际开发中的写法

实际用法：

<!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>复合选择器之链接伪类选择器</title>
    <style>
        a {
            color: yellow;
            text-decoration: none;
        }

        a:hover {
            color: pink;
        }
    </style>
</head>

<body>
    <a href="#">页面显示黄色，鼠标经过粉红色</a>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRkmC5wu-1664695093588)(Typora_image/059.png)]

2.1.6 :focus 伪类选择器

:forcus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

input:focus {
    backgroud-color: yellow;
}

实例代码：

<!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>focus伪类选择器</title>
    <style>
        /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: yellow;
            color: rgb(12, 221, 236);
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">

</body>

</html>

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hH4Da8iG-1664695093589)(Typora_image/060.png)]

2.2 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover 实际开发的写法
:forcus选择器	选择获取光标的表单	跟表单相关	较少	input:focus 记住这个写法

3.CSS的元素显示模式

了解元素的显示模式可以更好的让我们布局页面。

3.1 什么是元素的显示模式

在这里插入图片描述

3.2块元素

在这里插入图片描述

执行下面代码：

<body>
    <div>块级标签的使用方法</div>
    <p>
    <div>大家好，我是p标签里的div</div>
    </p>
</body>

在检查里面可以看到：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WxF8Lv0S-1664695093590)(Typora_image/061.png)]

特别注意，在p标签，h标签里不能放类似div这种块级元素

3.3 行内元素

在这里插入图片描述

执行代码：

<body>
    <a>你好1</a><strong>你好2</strong><b>你好3</b><em>你好4</em><i>你好5</i><del>你好6</del><s>你好7</s><ins>你好8</ins><u>你好9</u><span>你好10</span>
</body>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-deHlbxhk-1664695093591)(Typora_image/062.png)]

注意：
在这里插入图片描述

3.4 行内块元素

在这里插入图片描述

测试代码：

<body>
    <input type="text">
    <input type="text">
    <input type="text">
    <img src="qiwentu.png" width="40px" height="40px" alt="这是一张图片">
    <img src="wendutu.png" width="40px" height="40px" alt="这是一张图片">

</body>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CFs8yRLY-1664695093607)(Typora_image/063.png)]

3.5 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签(p标签不可以放div)
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其它行内元素(a标签可以放块元素)
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

3.6 元素的显示模式的分离

在这里插入图片描述

3.7 元素显示模式的转换

扎实代码如下：

<!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>元素显示模式转换</title>
    <style>
        a {
            width: 800px;
            height: 80px;
            background-color: aquamarine;
            text-decoration: none;
            /* 上面设置高度，宽度不起作用，此时需要把行内元素a转换为块级元素 */
            display: block;
        }

        div {
            width: 800px;
            height: 300px;
            background-color: blue;
            /* 上面的高度，宽度起作用了，此时可以把块级元素转换成行内元素 */
            display: inline;
        }

        span {
            width: 500px;
            height: 300px;
            background-color: purple;
            /* 上面的高度，宽度都没起作用，此时可以把行内元素转换成行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">a标签是一个行内元素，不可以直接设置宽度和高度，背景可以设置，转化成块级元素就可以</a>
    <div>我是块级元素 ，接下面要变成行内元素/div>
        <span>我是一个行内元素，直接设置不了宽高，接下面要变成行内块元素</span>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ssa2JDss-1664695093608)(Typora_image/064.png)]

3.8 一个小工具的使用 snipaste

Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕

常用的快捷键：

(1) F1可以截图，同时测试大小，设置箭头，书写文字等。

(2) F3在桌面置顶显示

(3)点击图片，alt可以取色 (按下shift可以切换取色模式)

(4) 按下esc取消图片显示

下载地址：https://www.snipaste.com/

4.案例：简洁版小米侧边栏

需求效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JdGleH9H-1664695093609)(Typora_image/065.png)]

核心思路：

1.把链接a转换成块级元素，这样链接就可以单独占一行，并且有宽度和高度

2.鼠标经过a给链接设置背景颜色

需求代码如下：

<!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>简单小米侧边栏</title>
    <stYle>
        /* 把a转换为块级元素 */
        a {
            color: aliceblue;
            font-size: 14px;
            background-color: lightslategrey;
            display: block;
            width: 300px;
            height: 40px;
            /* 去掉超链接的下划线 */
            text-decoration: none;
            /* 首行缩进两个字 */
            text-indent: 2em;
        }

        /* 鼠标经过a给链接设置背景颜色 */
        a:hover {
            /* 这边用color只是改变字体颜色，不改变背景颜色，应该用background-color */
            /* color: orange; */
            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>
    <a href="#"></a>
</body>

</html>

4.1垂直居中的小技巧

CSS没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现

解决方案：

让文字的行高等于盒子的高度，就可以让文字在当前盒子里垂直居中

执行代码：

<!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>单行文字垂直居中</title>
    <style>
        div {
            width: 400px;
            height: 100px;
            background-color: orange;           
            /* 让行高等于盒子的高度，就可以居中 */
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div>我要居中</div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PNBRWAdk-1664695093610)(Typora_image/066.png)]

4.1.1单行文字居中原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ajWVq6VG-1664695093614)(Typora_image/067.png)]

简单理解：行高的上空隙和下空隙把文字挤到中间了，是如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下。

<!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>单行文字垂直居中</title>
    <style>
        .juzhong {
            width: 400px;
            height: 100px;
            background-color: orange;
            /* 让行高等于盒子的高度，就可以居中 */
            line-height: 100px;
        }

        .xiaoyu {
            width: 400px;
            height: 100px;
            background-color: aquamarine;
            /* 让行高小于盒子的高度，就偏上 */
            line-height: 50px;
        }

        .dayu {
            width: 400px;
            height: 100px;
            background-color: rgb(209, 197, 27);
            /* 让行高大于盒子的高度，就偏下 */
            line-height: 150px;
        }
    </style>
</head>

<body>
    <div class="juzhong">我要居中</div>
    <div class="xiaoyu">行高小于盒子高度</div>
    <div class="dayu">行高大于盒子高度</div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3TXRPrIM-1664695093615)(Typora_image/068.png)]

5.CSS背景

通过CSS背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等

5.1背景颜色

background-color属性定义了元素的背景颜色。

background-color:颜色值；

一般情况下，元素背景颜色默认值是transparent(透明)，我们也可以手动指定背景颜色为透明色。

示例

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* background-color: transparent;  默认的背景颜色 */
            background-color: aquamarine;
        }
 </style>
</head>
<body>
    <div>
    </div>
</body>

5.2背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制控制位置(精灵图也是一种运行场景)

background-image: none | url (url)

参数值	作用
none	无背景图(默认)
url	使用绝对或相对地址指定背景图片

示例

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
           background-image: url(qiwentu.png);
            /* background-image: url(../HTML/1.jpg); */
        }
 </style>
</head>
<body>
    <div>
    </div>
</body>

5.3背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

repeat	背景图片在纵向和横向平铺
no-repeat	背景图片不平铺
repeat-x	背景图片在横向上平铺
repeat-y	背景图片在纵向上平铺

执行代码

<!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>背景图片</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* 盒子大小大于图片大小时，会平铺,如果有背景颜色的话会压住背景颜色 */
            background-image: url(../access/vscodelogo.png);
            background-color: darkgrey;
            /* 默认情况下，背景图片是平铺的，可以设定不平铺 */
            /* background-repeat: no-repeat; */
            /* 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 沿着y轴平铺 */
            /* background-repeat: repeat-y; */
            /* 注意：页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色。 */
        }
    </style>
</head>

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

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hHn2jpQK-1664695093617)(Typora_image/069.png)]

5.4 背景图片位置

利用background-position属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思：X坐标和Y坐标。可以使用方位名词或者精确单位。

参数值	说明
length	百分数 \|由浮点数字和单位标识符组合的长度值
position	top \|center \|bottom \|left \| center \|right 方位名词

1.参数是方位名词

(1) 如果指定的是两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left 效果一致

(2) 如果只是指定了一个方位名词，另一个值省略，则第二个值默认居中。

<!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>背景图片-方位名词</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(../access/vscodelogo.png);
            background-color: antiquewhite;
            background-repeat: no-repeat;
            /* 水平居中 */
            /* background-position: center top; */
            /* 水平靠右侧对齐 */
            /* background-position: right center; */
            /* 如果写方位名词，顺序无关 ,right center 和 center right 效果等价 */
            background-position: center right;
            /* 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐 */
            /* 下行代码显示，水平位置一定是靠左侧对齐，第二个参数省略  y轴是垂直居中显示的 */
            /* background-position: left; */
            /* 下行代码显示，水平位置一定是靠顶部对齐，第二个参数省略  y轴是垂直居中显示的 */
            background-position: top;
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wF1dQfYI-1664695093619)(Typora_image/070.png)]

5.4.1案例：背景位置方位名词应用

(1)如何获取网页图片,如下图所示保存，然后鼠标右键另存为即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yuJdChr3-1664695093620)(Typora_image/071.png)]

执行代码：

<!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>背景位置方位名词应用</title>
    <style>
        h3 {
            width: 550px;
            height: 145px;
            /* background-color: purple; */
            font-size: 35px;
            font-weight: normal;
            /* 让盒子里的文字垂直居中 */
            line-height: 145px;
            background-image: url(../access/logo.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <!-- 如果用插入图片，调位置难以确定 -->
    <!-- <h3><img src="../access/logo.png">背景位置方位名词应用</h3> -->
    <!-- 一般像小的图标，用背景图片进行处理 -->
    <h3>背景位置方位名词应用</h3>

</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OQD6XaRO-1664695093622)(Typora_image/072.png)]

5.4.2 超大背景图片如何居中显示

使用场景：图片宽度大于屏幕宽度

执行代码

<!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>超大图片背景</title>
    <style>
        body {
            background-image: url(../access/bjt.jpg);
            /* 图片太大，整个页面展示不全 */
            /* 先设置不重复 */
            background-repeat: no-repeat;
            /* 再设置图片位置，水平居中 */
            background-position: center top;
        }
    </style>
</head>

<body>

</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vePvDnvB-1664695093624)(Typora_image/073.png)]

2.参数是精确单位

(1) 如果参数值是精确坐标，那么第一个肯定是X坐标，第二个一定是Y坐标。

(2) 如果只指定一个数值，那该数值一定是X坐标，另一个默认垂直居中。

需求：让图标距离左侧20px,距离上侧10px。

执行代码：

<!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>背景位置方位名词-精确单位</title>
    <style>
        div {
            width: 400px;
            height: 100px;
            background-color: #add3e9;
            background-image: url(../access/wzlogo.png);
            background-repeat: no-repeat;
            /* 下行代码中 20px  10px   x轴一定是20  y轴一定是10 */
            background-position: 20px 10px;
            /* 指定一个数值一定是x轴的    y轴就是默认的垂直居中 */
            background-position: 50px;
        }
    </style>
</head>

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

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ryhN0GzI-1664695093625)(Typora_image/074.png)]

3.参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

执行代码：

<!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>背景位置-精确单位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: rgb(223, 144, 223);
            background-image: url(../access/wzlogo.png);
            background-repeat: no-repeat;
            /* x轴居中，y轴向下80px */
            /* background-position: center 80px; */
            /* x轴向左80，y轴居中 */
            background-position: 80px center;

        }
    </style>
</head>

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

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Almm27h7-1664695093627)(Typora_image/075.png)]

5.5 背景图像固定(背景附着)

background-attachment 属性设置背景图片是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果

backgtound-attachment : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动的
fixed	背景图像固定

<style>
        body {
            background-image: url(../access/girl.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图像固定住 */
            background-attachment: fixed;
            color: #fdf;
        }
 </style>

5.6背景的复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中,从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

 <style>
        body {
            /* background-image: url(../access/girl.jpg); */
            /* background-repeat: no-repeat; */
            /* background-position: center top; */
            /* 把背景图像固定住 */
            /* background-attachment: fixed;  */
            /* background: 背景颜色      背景图片地址   背景平铺    背景图像滚动  背景图片位置 */
            background: palegoldenrod url(../access/girl.jpg) no-repeat fixed center top;
            color: #fdf;
        }
    </style>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vFMzLGxj-1664695093628)(Typora_image/076.png)]

5.7背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

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

(1)最后一个参数是alpha透明度，取值范围在0~1之间。

(2)我们习惯把0.3的0去掉，写为backgroup:rgba(0,0,0,.3)。

(3)注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

(4)CSS新增样式，是IE +9版本浏览器才支持的

(5)但是现在实际开发，我们不太关注兼容性写法了，可以放心使用。

执行代码：

<!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>背景色透明写法</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* background-color: black; */
            /* 改写成半透明效果 */
            /* background: rgba(0, 0, 0, 0.1) */
            /* background: rgba(0, 0, 0, 0.7) */
            /* 省略写法 */
            background: rgba(0, 0, 0, .3)
        }
    </style>
</head>

<body>
    <div>里面的内容不会受影响</div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxRWQTxm-1664695093630)(Typora_image/077.png)]

5.8 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否铺平	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是X 和 Y坐标
background-attachment	背景附着	scroll(背景滚动)/fixed (背景固定)
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置；
背景色半透明	背景颜色半透明	background:rgba(0,0,0,.3);后面必须是4个值

背景图片：实际开发常见于logo或者装饰性的小图片或者超大的背景图片，优点是非常便于控制位置。(精灵图也是一种运用场景)

5.9案例：五彩导航

效果展示：(鼠标经过会变颜色)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qZJUOGoz-1664695093632)(Typora_image/079.png)]

案例价值：

(1) 链接属于行内链接，但是此时需要宽度，高度，因此需要模式转换

(2)里面文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码。

(3) 链接里面需要设置背景图片，因此需要用到背景的相关属性设置

(4)鼠标经过变化背景图片，因此需要用到链接伪类选择器。

代码如下：

<!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>综合案例-五彩导航</title>
    <style>
        .nav a {
            /* 转为行内块元素，既可以设置宽度和高度，又可以在同一行上面 */
            display: inline-block;
            width: 120px;
            height: 39px;
            background-color: rgb(127, 206, 238);
            /* 文字居中 */
            text-align: center;
            /* 垂直居中，为了更加好看，微调 */
            line-height: 29px;
            /* 去掉超链接下划线 */
            text-decoration: none;

        }

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

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

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

        .nav .bg2:hover {
            background-image: url(../access/demo3.png);
        }

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

        .nav .bg3:hover {
            background-image: url(../access/demo4.png);
        }

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

        .nav .bg4:hover {
            background-image: url(../access/demo5.png);
        }

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

        .nav .bg5:hover {
            background-image: url(../access/demo1.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <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>

</html>