CSS继承，优先级以及字体样式

一、样式的继承：

二、优先级：

三、字体样式：

长度单位：

[5:HSL值 HSLA值](#5:HSL值 HSLA值)

一、样式的继承：

定义：为一个元素设置的样式，同时也会应用到它的后代元素上

优势：方便我们开发，将一些通用的样式统一设置到共同的祖先元素上，后代元素就可以继承到样式

注意：并不是所有的样式都会被继承，比如：大小相关的，布局相关等不会被继承

可继承： font-size font-family color line-height;

不可继承：border padding margin width height

二、优先级：

样式冲突通过不同的选择器选中同一个元素，进行一样的样式设定，发生样式冲突时，应用哪一个样式由选择器的**权重（优先级）**决定

面试题：你常用的选择器有哪些？他们的优先级是怎样的？（数字为假设的）

!important 最高优先级,除了内联的!important

内联样式 1000

id选择器 100

类/伪类/属性选择器 10

标签选择器 1

通配选择器 0

继承的样式没有优先级

特殊情况：

注意1:交集选择器，优先级是累加计算

注意2:并集选择器，优先级是各自分开算，以高的为准

注意3:当选择器的权重一样时，谁靠下，谁生效

注意4:优先级再累加，也不会超过它的上一级

注意5:!important 优先级最重

慎用,一般使用在不会修改的样式上

测试样式不生效，是否是优先级问题（一般样式不生效，要么优先级问题，要么没设置上）

三、字体样式：

长度单位：

1、绝对单位：

一旦大小设置成功，不会随着其他因素而改变

像素(px)又叫css像素/程序员像素

在pc端，1个css像素（1个px）=== 1个物理像素===1个发光的小元件

像素正常情况下，我们是无法观测的，我们可以放大，放大到一定程度，可以看到他就是一个1*1小正方形

2、相对单位：

会随着某一个元素的改变，而大小发生变化

百分比 %

会跟随着父元素的大小变化而变化，后期可以做流式布局

会随着当前元素的字体大小变化而变化，1em=1个font-size,

如果当前元素没有设置大小，它会继承其祖先元素的字体大小，如果都没有设置字体大小，

最终会继承根标签（html）的字体大小，默认是16px

rem

r===root 根

会随着根标签的字体大小变化而变化，1rem=1个html的font-size

viewport width === 1个设备视口宽度的100%===100vw

1vw=设备视口宽度的1%

viewport height ===1个设备视口高度的100%===100vh

1vh=设备视口高度的1%

颜色单位：

1:直接使用单词

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

red,black,yellow,white,orange,green,blue,pink等等

这种颜色单位，开发过程中，用的很少，

记忆单词有限、一般纯色为主、有些颜色也不好描述、

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

rgb(red,green,blue)

rgb参数值：0-255之间

用取色器（直接来到截屏模式），将箭头对准你要的色号，按它的提示复制色号，注意给你的颜色的形式，可能是rgb的，也可能是十六进制的

3:RGBA

rgba(red, green, blue, alpha)

alpha:透明度，取值范围：0-1，0表示透明，1表示不透明，0-1之间表示透明度

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

原理和上边RGB原理一样也是用红，绿，蓝，0-255之间的值，勾兑一个颜色，只不过用16进制的方式表示0-255之间的数字

#红色绿色蓝色透明度

0123456789abcdef表示数字

如果十六进制颜色，如#ff0000，数值两两重复，可以省略1位

常用的十六进制颜色：#f00,#00f,#0f0,#f60,#eee,#ccc,#333,#000,#fff

5:HSL值 HSLA值

hsl(h, s%, l%) 色相、饱和度、明度

hsl(h, s%, l%,a) 色相、饱和度、明度，透明度

字体的样式：

1:color

设置字体颜色,也可以设置其他颜色

2:font-size

设置字体大小

3:font-family

可以指定文字的字体类型

4:@font-face

第一步：先定义

第二步：再使用

html 复制代码

<style>
  @font-face {
    font-family: "qn";
    src: url(./字体/XiangJiaoKuanMaoShuaLingGanTi-2.ttf);
  }
  .p1 {
    color: red;
    font-size: 30px;
    font-family: "qn";
  }
</style>

字体的分类：

在网页中将字体分成5大类：

serif ['serif]（衬线字体）

sans-serif（非衬线字体）

monospace （等宽字体）

cursive ['kə:siv]（草书字体）

fantasy ['fæntəsi]（虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类后，浏览器会自动选择指定的字体并应用样式

一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底

html 复制代码

<p style="font-size: 20px; font-family: serif">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: sans-serif">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: monospace">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: cursive">草书字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: fantasy">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>

字体的其它样式：

font-style:

设置文字斜体

可选值：

normal 正常显示，默认值-- (如果使用em斜体，不想要效果只要语义就可normal)

italic 斜体

oblique 斜体

font-weight:

设置文字的加粗

可选值：

normal 正常显示，默认值

bold/bolder 加粗

100-900数值 100表示最细 900表示最粗

css 复制代码

.p2 {
  color: orangered;
  font-size: 30px;
  font-weight: bold;
  font-style: italic;
  font-family: monospace;
}

.p3 {
  color: orangered;
  font: italic bold 30px monospace;
}

font简写（.p3），可以同时设置是否斜体，加粗，大小，字体类型

要求1:必须要设置大小，字体类型

要求2:字体大小必须在倒数第二位，字体类型必须放在倒数第一位