py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：22.字体、背景属性

本文链接：https://blog.csdn.net/m0_73365527/article/details/126897565

代码：为内容为“你好，欢迎学习前端！”的文本设定分别设定为5、10、12、30px大小的字体

根据数字定义字符的粗细（400等同于默认，700等同于粗体。可设定的大小为100-900）

设定字体样式

代码：为内容为“你好，欢迎学习前端！”的文本设定样式（默认、为默认字体设置斜体。i标签，为i标签设定默认样式）

效果：

设定字体类型

代码：为内容为“你好，欢迎学习前端！”的文本设定（默认、微软雅黑、英文名词的宋体、中文名称的宋体）

代码：将大小为300*300的div块的背景颜色设置为红色

效果：

设定背景图像

代码：将名为1.jpg的图片引用为以上div块的背景（url后的括号内填写的为路径）

效果：（如果块内所需内容大于图片大小则采取如下的重复展示效果（有水平与垂直））

设定背景图像的平铺样式

代码：在大小为600*600的块内引用名为1.jpg的背景图，为表明去除重复效果后，该块依旧存在的效果，故设置背景色为蓝色。

效果：

设定背景图像的大小

代码：在大小为600*600的块内引用名为1.jpg的背景图。

效果：

设定背景图像的起始位置（默认左上角（0% 0%））

代码：在大小为600*600的块内引用名为1.jpg的背景图。（起始位置表示的是在块中的位置）

效果：

属性总览

字体属性

设定字体颜色

单词的应用

代码：为内容为“你好，欢迎学习前端！”的文本设定为红色字体

<!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>
        p{
            color:red;
        }
    </style>
</head>
<body>
    <p>你好，欢迎学习前端！</p>
</body>
</html>

效果：

十六进制码的应用
- 二进制与rgb颜色码的参考网站：RGB颜色值与十六进制颜色码转换工具 (sioe.cn)
  - 代码：为内容为“你好，欢迎学习前端！”的文本设定为红色字体
    - ```
        <style>
            p{
                color:#FF0000;
            }
        </style>
    </head>
    <body>
        <p>你好，欢迎学习前端！</p>
```
- 效果：

rgb的应用

代码：为内容为“你好，欢迎学习前端！”的文本设定为红色字体

    <style>
        p{
            color:rgb(255,0,0);
        }
    </style>
</head>
<body>
    <p>你好，欢迎学习前端！</p>

效果：

rgba的应用

在rgba中a代表的是文本字体的透明度：0表示完全透明。0.5表示半透明。1表示完全不透明。

代码：为内容为“你好，欢迎学习前端！”的文本设定为红色字体

代码1：设定全透明的样式

    <style>
        p{
            color:rgba(255,0,0,0);
        }
    </style>
</head>
<body>
    <p>你好，欢迎学习前端！</p>

代码2：设定半透明的样式

    <style>
        p{
            color:rgba(255,0,0,0.5);
        }
    </style>
</head>
<body>
    <p>你好，欢迎学习前端！</p>

代码3：设定完全不透明的样式

    <style>
        p{
            color:rgba(255,0,0,1);
        }
    </style>
</head>
<body>
    <p>你好，欢迎学习前端！</p>

效果：
- 效果1：（因全透明，故效果以选中的方式展示）
- 效果2：
- 效果3：

设定字体大小

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。（chrom浏览器接受的最小字体为12px）

代码：为内容为“你好，欢迎学习前端！”的文本设定分别设定为5、10、12、30px大小的字体

    <style>
        .p1{
            font-size: 5px;
        }
        .p2{
            font-size: 10px;
        }
        .p3{
            font-size: 12px;
        }
        .p4{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p class="p1">你好，欢迎学习前端！</p>
    <p class="p2">你好，欢迎学习前端！</p>
    <p class="p3">你好，欢迎学习前端！</p>
    <p class="p4">你好，欢迎学习前端！</p>

效果：

设定字体粗细

定义粗体字符

代码：为内容为“你好，欢迎学习前端！”的文本设定粗体

    <style>
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="p1">你好，欢迎学习前端！</p>

效果：

定义更粗的字符
- 代码：为内容为“你好，欢迎学习前端！”的文本设定更粗体
  - ```
      <style>
          .p1{
              font-weight: bolder;
          }
      </style>
  </head>
  <body>
      <p class="p1">你好，欢迎学习前端！</p>
```
- 效果：（Chrome条件下粗体与更粗体的样式效果显示一致）

定义更细的字符

代码：为内容为“你好，欢迎学习前端！”的文本设定更细体（没有light的设定）

    <style>
        .p1{
            font-weight: lighter;
        }
    </style>
</head>
<body>
    <p class="p1">你好，欢迎学习前端！</p>

效果：

根据数字定义字符的粗细（400等同于默认，700等同于粗体。可设定的大小为100-900）

代码：为内容为“你好，欢迎学习前端！”的文本设定粗细

代码1：设定默认（p1为默认，p2为数字400设定的）

    <style>
        .p2{
            font-weight: 400;
        }
    </style>
</head>
<body>
    <p class="p1">你好，欢迎学习前端！</p>
    <p class="p2">你好，欢迎学习前端！</p>

代码2：设置粗体（p1为bold设定的，p2为数字700设定的）

    <style>
        .p1{
            font-weight: bold;
        }
        .p2{
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p class="p1">你好，欢迎学习前端！</p>
    <p class="p2">你好，欢迎学习前端！</p>

效果：
- 效果1：
- 效果2：

设定字体样式

可分为默认值（normal）与定义斜体字（italic）

代码：为内容为“你好，欢迎学习前端！”的文本设定样式（默认、为默认字体设置斜体。i标签，为i标签设定默认样式）

    <style>
        .p2 {
            font-style: italic;
        }

        .p4 {
            font-style: normal;
        }
    </style>
</head>

<body>
    <p class="p1">你好，欢迎学习前端！</p>
    <p class="p2">你好，欢迎学习前端！</p>
    <i class="p3">你好，欢迎学习前端！</i>
    <p><i class="p4">你好，欢迎学习前端！</i></p>

效果：

设定字体类型

每个值用逗号分开，如果字体名称包含空格，它必须加上引号。默认的字体类型为微软雅黑。（选择类型的方式可以为中文名称或英文名称）

代码：为内容为“你好，欢迎学习前端！”的文本设定（默认、微软雅黑、英文名词的宋体、中文名称的宋体）

    <style>
        .p2 {
            font-family: "微软雅黑";
        }
        .p3 {
            font-family: "Simsun";
        }
        .p4 {
            font-family: 宋体;
        }
        </style>
</head>
<body>
    <p class="p1">你好，欢迎学习前端！</p>
    <p class="p2">你好，欢迎学习前端！</p>
    <p class="p3">你好，欢迎学习前端！</p>
    <p class="p4">你好，欢迎学习前端！</p>

效果：

属性总览

背景属性

设定背景颜色

代码：将大小为300*300的div块的背景颜色设置为红色

    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        </style>
</head>
<body>
<div class="box">

</div>

效果：

设定背景图像

代码：将名为1.jpg的图片引用为以上div块的背景（url后的括号内填写的为路径）

<!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>
        .box {
            width: 300px;
            height: 300px;
            background-image: url("1.jpg");
        }
        </style>
</head>
<body>
<div class="box">

</div>
</body>

</html>

效果：（如果块内所需内容大于图片大小则采取如下的重复展示效果（有水平与垂直））

设定背景图像的平铺样式

为使得图像能够去除因尺寸不合而出现的重复效果（又称平铺效果），平铺样式的应用必不可少

代码：在大小为600*600的块内引用名为1.jpg的背景图，为表明去除重复效果后，该块依旧存在的效果，故设置背景色为蓝色。

代码1：默认

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-repeat: repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码2：只设置水平方向平铺（即垂直的重复效果消失）

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-repeat: repeat-x;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码3：只设置垂直方向平铺

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-repeat: repeat-y;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码4：不平铺

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

效果：
- 效果1：
- 效果2：
- 效果3：
- 效果4：

设定背景图像的大小

在已有的块大小内，再次设定有效规定图像的大小将会使得块的整体美观度得到显著提高

代码：在大小为600*600的块内引用名为1.jpg的背景图。

代码1：利用length设置（设置背景图片的宽度和高度大小。第一个值表示宽度，第二个表示高度，如果只设定一个，另一个为auto）

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-size: 300px 300px;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码2：利用percentage设置（计算相对位置区域的百分比。第一个值表示宽度，第二个表示高度，如果只设定一个，另一个为auto）

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-size: 30% 30%;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码3：利用cover设置（保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小（常用方式：不考虑大小的前提下实现，保障照片效果最大化））

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-size: cover;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码4：利用contain设置（保持图片纵横比并将图像缩放成适合背景定位区域的最大大小（保障照片大小的前提下实现，照片的效果））

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-size: cover;
        }
        </style>
</head>
<body>
<div class="box">
    
</div>

效果：
- 效果1：
- 效果2：
- 效果3：
- 效果4：

设定背景图像的起始位置（默认左上角（0% 0%））

代码：在大小为600*600的块内引用名为1.jpg的背景图。（起始位置表示的是在块中的位置）

代码1：起始位置——左上角

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: left top;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码2：起始位置——左中角

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: left center;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码3：起始位置——左下角

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: left bottom;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码4：起始位置——右上角

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: right top;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码5：起始位置——右中角

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: right center;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码6：起始位置——右下角

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: right bottom;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码7：起始位置——中上角

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: center top;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码8：起始位置——中中角

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: center center;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码9：起始位置——中下角

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: center bottom;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>

代码10：起始位置——根据百分比（一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0%）以40% 50%为例

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: blue;
            background-image: url("1.jpg");
            background-position: 40% 50%;
            background-size: 300 300;
            background-repeat: no-repeat;
        }
        </style>
</head>
<body>
<div class="box">

</div>