CSS字体样式

原理和上边RGB原理一样,只不过表示的方式不一样
rgb（200，100，80）
0-9abcdef 16个数字
语法：#红色的浓度绿色浓度蓝色的浓度
#7f2eaa
00 表示最小 0
ff 表示最大 255
红色、绿色、蓝色用两位十六进制表示，如果两位十六进制是一样的，可以省略一位
#ff0000 可简写#f00
#f0f0f0 不可简写
常用的16进制颜色：#f00,#0f0,#00f,#ccc灰色，#f60 橘色，#000 ,#fff

5、HSL值 HSLA值

HSLA值（色度，饱和度，亮度，透明度）

<style>
    p{
      color:red;
    }
    div{
      color:rgb(0,0,0);
    }
    span{
      color: #000000;
    }
    .p1{
      color:hsl(196, 73%, 62%);
    }
</style>

三、字体的样式

1、color

设置字体颜色,也可以设置其他颜色,例如边框的颜色等

2、font-size

设置字体的大小,注意不同的单位px，em，rem

3、font-family

可以指定文字的字体

4、@font-face

自定义字体

<style>
      /* 自定义字体 */
      @font-face {
        /* 你给字体起的名字 */
        font-family: "mr";
        /* 字体的引入路径 */
        src: url(./字体/MeowScript-Regular.ttf);
      }
      p {
        color: #f00;
        font-size: 5rem;
        font-family: "mr";
      }
    </style>

四、字体的分类

在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体，用来兜底。

五、字体的其他样式

1、设置一个文字大小

font-size: 30px;

2、设置一个字体

font-family: Arial, Helvetica, sans-serif;

3、设置文字斜体

font-style:oblique;

可选值：

normal 文字正常显示
italic 文字斜体比较常用
oblique 文字斜体

4、设置文字的加粗

font-weight:bold;

可选值:
normal 文字正常显示默认值
bold/bolder 文字加粗
100-900之间的数值 100是最细，900最粗

5、设置一个小型大写字母

font-variant:small-caps;

可选值：
normal 文字正常显示默认值
small-caps 字母小型大写字母

6、font

font 可以同时设置以上所有的字体相关的样式，颜色不可以
注意：
1、必须有字体大小和字体
2、字体必须在倒数第一位，字体大小必须在倒数第二位

font: italic bold 40px  sans-serif;

一、长度单位

1、像素 px

2、百分比 %

3、em

4、rem

5、vw

6、vh

二、颜色单位

1、在CSS可以直接使用颜色的单词来表示不同的颜色

2、使用RGB值来表示不同的颜色

3、RGBA

4、使用十六进制的rgb值来表示颜色