CSS 背景属性组（仅供参考）

字体属性是什么？

CSS Fonts 是 CSS 的一个模块
它定义了与字体相关的属性以及如何加载字体资源。
它允许您定义字体的样式，例如:
- 它的系列、
- 大小和粗细、行高
- 以及当多个字符可用于单个字符时要使用的字形变体。

font :复合属性
font-family
font-size
font-style
font-variant
font-weight
line-height

字体属性

平台	中文衬线字体	中文非衬线字体	英文衬线字体	英文非衬线字体
通用字体	serif	sans-serif	serif	sans-serif
window	宋体	微软雅黑	Times	arial
Mac	宋体	苹方		San-Francsico
IOS		苹方	英文衬线字体	英文非衬线字体
Andriod		思源黑体	英文衬线字体	英文非衬线字体
其他

说明：字体分为两种：

通用字体系列：它指一系列具有共同风格的字体系列，列如衬线和非衬线
特殊字体：它指某一个字体，列如：微软雅黑，苹方，思源黑体

font – family

定义：用于设置字体的外观。
语法：

 body{
            font-family: Georgia, -apple-system,  Nimbus Roman No9 L ,  PingFang SC ,  Hiragino Sans GB ,  Noto Serif SC ,  Microsoft Yahei ,  WenQuanYi Micro Hei ,  ST Heiti , sans-serif;
        }

解析：

 body{
            font-family:中文字体, 苹果中文字体, 中文字体， sans-serif;

        }

语法规则：

可以设置多个字体名称或字体系列名称作为属性值
多个字体名称之间使用逗号隔开
如果字体名称含有特殊字符需要加引号列如：
- Microsoft Yahei 空格是特殊字符
- sans-serif 横线也是特殊字符
- 微软雅黑中文也是特殊字符
- 特殊字体在前，通用字体在后
- 英文字体在前，中午字体在后

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
非衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有一样的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

font-size

定义：页面字体的大小
语法：

body{
font-size:相对值|绝对值；
}

使用相对单位设置 font-size

关键词
%
em
rem
vw/vh

使用绝对单位设置font-size

1. 请写出与尺⼨有关的css属性?

尺寸css属性：一共有11个

height 高
min-height 最小高度
max-height最大高度
line-height行高
width宽
min-width最小宽度
max-width最大宽度
margin外边距
padding内边距
border边框
font-size字体大小

尺⼨属性值的单位有哪些？

分为两类：
1.绝对单位（一共5个）px，cm,mm,pt,inch
2.相对单位（一共5个）%,em,rem,vh,vw
绝对单位：

px（pixel）像素，是数字世界里常用的长度单位；
cm:厘米
mm:毫米
pt:磅
inch（in）：英寸

相对定位：参照父级元素进行计算；

%：百分比（参照父级元素进行计算）
em：参照当前元素的font-size计算
rem：参照html的font-size计算
vh：表明视口（viewport）高度的百分之一;v:表明：vieport；h：表明：height
vw：表明视口（vieport）宽度的百分之一；v：表明vieport；w：表明：width

背景色覆盖到哪个区域停止？

答：边框

背景颜色值的写法有几种？

1.16进制
2.英文单词
3.rgb（red，blue，alpha）
alpha：不透明度
rega（0-255，0-255，0-255，0-1）
4.hsl（0-360，0%-100%，0%-100%）
hsla（色相，饱和度，明度，不透明度）

与背景有关的属性

背景属性一共有8个(外加两个一起为10个)：

1.设置背景颜色,
2.设置图片源,
3.设置背景图片,
4.设置背景图片起始位置(设置背景图片位置),
5.设置背景图片重复位置,
6.设置图片截切,
7.设置背景图片固定性,
8.设置背景尺寸大小,
9.多背景，
10.设置背景渐变色。

1.设置背景颜色：

属性定义：用于定义背景色
语法：

body{
background-color：url（  ）
}

2.设置图片源：

语法：

1.background-origin：border-box ；
缩放到边框大小，修改坐标。
2.background-origin：padding-box ；
缩放到内边距大小，修改坐标。
3.background-origin： content-box;
缩放到内容大小，修改坐标。

3.设置背景图片

属性定义：设置背景图片
语法：background-image：url（）

4.设置背景图片起始位置(设置背景图片位置)

语法：backround-position
可以设置三种值：px像素，%百分比，left ，rigth，bottom，top，center（关键字）

5.设置背景图片重复位置

语法：

background-repeat：repeat 默认重复
background-repeat：repeat-x 水平重复
background-repeat：repeat-y 垂直重复
background-repeat：no-repeat 不重复

6.设置图片截切

语法：

background-clip: border-box;
默认采用border-box，在边框区域渲染。
background-clip: content-box;
指定为content-box;，在内容区渲染。
background-clip: padding-box;
指定为：padding-box;在内容区渲染。

7.设置背景图片固定性

语法：
–background-attachment: scroll;//默认值
-背景图跟主视口一起移动，不跟元素视口一起移动。

            background-attachment: scroll;
            /*默认值：背景图跟随主视口一起动,不跟随元素一起动*/
            background-attachment: fixed;
            /*无论主视口还是元素视口，背景图固定（不跟随主视口一起动）*/
            background-attachment: local;
            /*本地背景图跟随主视口和元素视口都会一起动*/

设置背景尺寸大小

.box1 {
            background-size: auto;
            /*根据图片的原始宽高及比例计算图片尺寸*/
        }

        .box2 {
            width: 600px;
            background-size: cover;
            /*图片必须覆盖整个元素，图片的局部可能无法显示*/
        }

        .box3 {
            background-size: contain;
            /*元素必须包含整个图片，元素的局部可能会出现空白*/
        }

        .box4 {
            background-size: 240px 240px;
        }

        .box5 {
            background-size: 240px auto;
        }

        .box6{
            background-size: 50%;
        }

多背景

.box {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 20px dotted black;
            background-image: url(./bg.jpg), url(./dog.jpg);
            background-position: center;
            background-repeat: no-repeat;
        }

设置背景渐变色

-线性渐变

        .linearl1 {
            background-image: linear-gradient(180deg, red, yellow, green);
        }

        .linearl2 {
            background-image: linear-gradient(45deg, red 25%, yellow 25%, yellow 75%, red 75%, red);
        }

        .linearl3 {
            background-image: linear-gradient(100deg, red, green, blue);
        }

        .linearl4 {
            background-image: linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%),
                linear-gradient(-45deg, red 25%, transparent 25%, transparent 75%, red 75%);
            background-size: 30px 30px;
        }

-径向渐变

         .radial1 {
            background-image: radial-gradient(circle, yellow, red);
        }

        .radial2 {
            background-image: repeating-radial-gradient(circle at 50% 50%, red, red 10px, yellow 10px, yellow 20px, pink 20px, pink 30px);
        }

-角度渐变

        .conic1{
            background-image: conic-gradient(red,blue);
        }
        .conic2{
            background-image: conic-gradient(from 45deg,red,blue);
        }
        .conic3{
            background-image: conic-gradient(at 30px 80px,red,blue);
        }.conic4{
            background-image: conic-gradient(at 50% 50%,red,blue);
        }

ps:下期见~