1. 继承
- 样式的继承，我们为一个元素设置的样式，同时也会应用到它的后代元素上，且只会应用到后代上；
继承是发生在祖先后后代之间的，继承的设计是为了方便我们的开发；利用继承，我们可以将一些通用的样式，统一设置到共同的祖先元素上。这样只需设置一次即可让所有的元素都具有该样式；
注意，并不是所有的样式都会被继承：比如背景相关的，布局相关等的这些样式都不会被继承。
我们可以再Zeal手册中，搜索background-color属性，可以看到一个定义的表格。其中就说明了其不可被继承性
通俗理解：统治了爷爷，儿子孙子都听话；偶尔几个造反的后代；
2. 选择器的权重
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定选择器的权重 | 选择器 | 权重 | | —- | —- | | 内联样式 | 1, 0, 0, 0 | | ID(#)选择器 | 0, 1, 0, 0 | | 类（.name）和伪类(:nth)选择器 | 0, 0, 1, 0 | | 元素(p)和伪元素(::)选择器 | 0, 0, 0, 1 | | 通配(*)选择器 | 0, 0, 0, 0 | | 继承的样式 | 没有优先级 |
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
- 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过ID选择器
- 如果优先级计算后相同，此时则优先使用靠下的样式
- 可以在某一个样式的后边添加
!important，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中一定要慎用！一般情况下不会使用，因为一旦使用了不容易修改； - 当出现修改不了的情况下，考虑一下是否是有优先级的问题； ```lua
选择器的权重
- 继承和通配选择器优先级lua
通配选择器和继承选择器
我是继承的后代
- 选择器权重的计算html
<!doctype html>
#id .input input{
color: yellow;
}
``
<a name="KSDA7"></a>
## 3. 长度单位
<a name="vKn2F"></a>
### [像素]
我们先来看下某度上关于像素（pixel,缩写px）的介绍<br /> 像素是指由图像的**小方格**组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在 。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小。也就是说，显示器屏幕实际上是由一个一个的小点（单位色块，即像素）构成的；<br />**问题1：像素和分辨率有什么关系呢？**<br />分辨率 = 水平方向像素 垂直方向像素(和微元法思想差不多)```css
屏幕分辨率是1920×1080，则该屏幕水平方向有1920个像素，垂直方向有1080个像素
● 不同屏幕的像素大小是不同的，也就是说像素大小不像我们现行的长度单位（如米/m）那样有着固定的国际标准
● 在屏幕的大小相同的情况下，如果屏幕的分辨率低（如640 ×480），则屏幕上显示的像素少，单个像素尺寸比较大，看起来会有种颗粒感；如果屏幕的分辨率高（如1920 ×1080），则屏幕上显示的像素多，单个像素尺寸比较小，看起来会比较清晰。
● 手机后置摄像头 48mp(主摄)+8mp(超广角)+2mp(微距)+5mp(景深)----mp(百万)
```
```css
● 在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。图片的分辨率越高，图片越清晰；图片的分辨率越低，图片越模糊。例如，一张图片分辨率是500 ×200，这就表示这张图片在屏幕上按1:1显示时，水平方向有500个像素点（色块），垂直方向有200个像素点（色块）。
但是，在屏幕上把图片放大时，会发现图片在屏幕上显示的像素也变大，这是因为软件通过算法对图像进行了像素补充，虽然图片本身的像素没有变，但是在显示时已经补充了很多个屏幕像素；同理，把图片缩小时，也是通过算法将显示的图片像素进行减少。
● 例如，一张图片分辨率是300x200，则该图片在屏幕上按1:1缩放时（直接将图片放大），水平方向有300个像素，垂直方向有200个像素点
● 图片分辨率越高，1:1缩放时面积越大（可以具体道很小很小--对应整个被展开的面积就会很大）
● 图片分辨率越低，1:1缩放时面积越小（展开的比较粗略--对应整个被展开的面积就会很小）
同一台设备像素大小是不变的，那把图片放大超过100%时占的像素点就多了，但是图像也会变得模糊
```
```css
1.屏幕分辨率:屏幕上显示的像素个数，分辨率160×128的意思是水平像素数为160个，垂直像素数128个。分辨率越高，像素的数目越多，感应到的图像越精密。而在屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。MP3中常见的屏幕分辨率有320×240、220×176、160×128等。
2.设备分辨率（Device Resolution）：又称输出分辨率，指的是各类输出设备每英寸上可产生的点数，如显示器、喷墨打印机、激光打印机、绘图仪的分辨率。这种分辨率通过DPI来衡量，目前，PC显示器的设备分辨率在60至120DPI之间。而打印设备的分辨率则在360至1440DPI之间。
3.图像分辨率:为数码相机可选择的成像大小及尺寸，单位为dpi。常见的有640 x 480；1024 x 768；1600 x 1200；2048 x 1536。在成像的两组数字中，前者为图片宽度，后者为图片的高度，两者相乘得出的是图片的像素。长宽比一般为4：3。
在大部分数码相机内，可以选择不同的分辨率拍摄图片。一台数码相机的像素越高，其图片的分辨率越大。分辨率和图象的像素有直接的关系，一张分辨率为640 x 480的图片，那它的分辨率就达到了307，200像素，也就是我们常说的30万像素，而一张分辨率为1600 x 1200的图片，它的像素就是200万。这样，我们就知道，分辨率表示的是图片在长和宽上占的点数的单位。
一台数码相机的最高分辨率就是其能够拍摄最大图片的面积。在技术上说，数码相机能产生在每寸图像内，点数最多的图片，通常以dpi为单位，英文为Dot per inch。分辨率越大，图片的面积越大。
4.像素越大，分辨率越高，照片越清晰，可输出照片尺寸也可以越大。
```
**问题2：屏幕实现图片放大或缩小的原理是什么呢？**
- 其实是设备通过算法对图像进行了像素补足；
- 同理，把图片按小于100%缩放时，也是通过算法将图片像素减少
<a name="LHQyL"></a>
### [百分比]
- 也可以将属性值设置为**相对于其父元素属性的百分比**，可以使**子元素跟随父元素的改变而改变**（暂且先理解成父元素，后面会详细说）
```css
<style>
.boxfather{
width: 200px;
height: 200px;
background-color: blue;
}
.boxchild{
width: 50%;
height: 50%;
<!--使用百分号% 的好处就是可以随着父类的改变而自动的改变-->
background-color: aqua;
}
</style>
<div class="boxfather">
<div class="boxchild"></div>
</div>
```
<a name="odtfX"></a>
### [em]
- em是相对于**元素的字体大小**来计算的，1em = ，也就说em值会根据元素本身的字体大小的改变而改变；默认情况下的1em=16px`字体大小
```css
<a name="PXuRX"></a>
### [rem]
- rem是相对于**根元素的字体大小**来计算，`1em = <root>.font-size * 10`，也就说em值会根据根元素的字体大小的改变而改变css
<a name="epyIR"></a>## 4. 颜色单位<a name="r8JtN"></a>### [RGB值]RGB通过光的三原色的不同浓度来调配出不同的颜色- 语法：RGB(red, green, blue)- 范围：每一种颜色的范围在`0 ~ 255（0% ~ 100%）`之间- 本质上就是将一个个的颜色 用数字表示出来<a name="XCq8u"></a>### [RGBA]就是在RGB的基础上**增加了一个a表示不透明度，前三个值与rgb一样；**- 1表示完全不透明- 0表示完全透明- .5半透明<a name="xNGhZ"></a>### [十六进制的RGB值表示法]就是RGB值的十六进制写法，颜色浓度用16进制 `00 ~ ff` 表示，ff最大；- 语法：`#RRGGBB`（RR两位是红色调解区；GG两位是绿色调解区；BB两位是蓝色调解区；）- 范围：每一种颜色的范围在00 ~ ff 之间- 如果颜色两位两位重复可以进行简写，如`#aabbcc => #abc````css<style>.box{width: 60px;height: 60px;background-color: red; /*1.常用*/background-color: rgb(255,0,0); /*2.用rgb自取色*/background-color: rgba(0,255,0,.5); /*取透明度*/background-color: #ff0000; /*3.十六进制rgb自取色法*/background-color: #bfa; /*十六进制rgb自取色简写*/}</style><div class="box"></div>
- 在vscode中，我们可以看到其会对颜色进行预览展示。并且将鼠标移至color处悬浮，会智能的弹出一个rgb调色板，方便我们进行调色
[HSL值与HSLA]
- H：
色相--是个环 ( 0-360 ) - S：
饱和度，颜色的浓度（0% - 100%） L：
亮度，颜色的亮度（0% - 100%）```css
```
- 在前端开发中不常用；
- 常用的一个取色软件：faststone capture
人眼能够识别多少种颜色？
- 正常人有三种视椎细胞，是三色视觉者（红绿蓝），总共能看到大约100万种颜色；男的大约130万 女的大约180万；人眼能至少接收100多万种颜色，因人而异；但最多只能够对1000多种颜色做出识别，因人而异
CSS中的颜色名称
- 在css中可以直接使用颜色名来设置颜色，比如：red、orange、yellow、blue、green等等
- 其中有140 种颜色名称是所有浏览器都支持的，但是有个问题，就是在css中直接使用颜色名非常不方便
- 而且就算能够有办法对那么多种颜色进行命名，我们也不可能一个一个的去记或去查这种对应关系。
另外，那么css中还可以怎么调和出更多的颜色呢？ 在介绍css的颜色单位之前，我们首先来了解下光的三原色，因为css的颜色就是按照光的三原色来调和的
七种色光中只有红、绿、蓝三种色光无法被分解，于是也就谈不到合成了。 而其他四种色光均可由这三种色光以不同比例相合而成。于是红、绿、蓝则被称为“三原色光”或“光的三原色”（注意，这有别于我们熟知的三原色“红黄蓝”）。
这里再科普下光的三原色和颜料的三原色的区别 : 颜料三原色（CMYK）：品红、黄、青(天蓝)。色彩三原色可以混合出所有颜料的颜色，同时相加为黑色，黑白灰属于无色系。 光学三原色（RGB）：红、绿、蓝(靛蓝)。光学三原色混合后，组成显示屏显示颜色，三原色同时相加为白色，白色属于无色系（黑白灰）中的一种。
CSS为什么不按照颜料的三原色，而使用光的三原色来调和呢？ 屏幕是由像素组成的，每个像素就是一个单位色块。而这个单位色块之所以能显示颜色，就是靠发光来实现的；既然光是由三种色光组成的，任何一种颜色均可以由这三种颜色调和出来的，所以用光三原色来表示一种颜色；
若有收获，就点个赞吧
0 人点赞
