《个人学习笔记十三》
继承
- 样式的继承，我们为一个元素设置的样式同时也会应用到后代元素上。
- 继承是发生在祖先后代之间的。
- 继承的设计是为了方便我们的开发。
- 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上。这样只需要设置一次即可，可让所有的元素都具有该样式。
- 注意：并不是所有的样式都会被继承 如 背景、布局相关的，等这些样式都不会被继承。
选择器的权重
样式的冲突
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。
选择器的权重
| 选择器 | 优先级 |
|---|---|
| 内联样式 | 1,0,0,0 |
| id选择器 | 0,1,0,0 |
| 类和伪类选择器 | 0,0,1,0 |
| 元素选择器 | 0,0,0,1 |
| 通配选择器 | 0,0,0,0 |
| 继承的样式 | 没有优先级 |
- 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是但不计算的），选择器的累加不会超过其最大的数量级，类选择器在高也不会比id选择器高。
- 如果在某一个样式的后面添加 !important ，则此时该样式会获得最高的优先级，甚至超过内联样式。（注意：开发中，慎用，不方便修改）
像素和百分比
长度单位：
- 像素
显示器其实是由一个一个的小点点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的设备上显示的效果不一样。
- 百分比
也可以将属性值设置为相对于其父元素属性的百分比。
设置百分比可以使子元素追随父元素的改变而改变。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> .box1 { height: 200px; width: 200px; background-color: blue; } .box2 { height: 50%; width: 50%; background-color: darkseagreen; } </style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
显示结果：
em和rem
这两个也是长度单位。
- em
em是相对于元素的字体大小来计算的。
1em=1font-size
em会根据字体的大小的改变而改变。
- rem
rem是相对于根元素的字体大小来计算。
例子1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> .box1 { font-size: 2px; height: 200em; width: 200em; background-color: blue; } .box2 { font-size: 1px; height: 200em; width: 200em; background-color: firebrick; } </style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
显示结果：
例子2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> html { font-size: 1px; } .box1 { height: 200rem; width: 200rem; background-color: blue; } .box2 { height: 100rem; width: 100rem; background-color: firebrick; } </style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
显示结果：
RGB值
颜色单位：
- 在CSS中可以直接使用颜色名来设置各种颜色。
- 比如：red、orange、yellow、blue、green、pink、等
- 但是在CSS中直接使用颜色名是非常的不方便。
RGB值：
- RGB是通过三种颜色的不同浓度来调配出不同的颜色 R red，G green，B blue
- 每一种颜色的范围在 0-255（0%-100%）之间。
- 语法：RGB（红，绿，蓝）
RGBA：
- 就是在RGA值得基础上增加了一个a表示不透明度。
- 需要四个值，前三个和rgb一样，第四个表示不透明度。
- 1表示完全不透明 0表示完全透明 0.5表示半透明。
十六进制的RGB值
- 语法:#红色绿色蓝色
- 颜色浓度范围 00-ff
- 如果颜色两位重复可以进行简写
#aabbcc 简写 #abc
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> .box1 { height: 100px; width: 100px; background-color: red; } .box2 { height: 100px; width: 100px; background-color: rgb(0, 255, 0); } .box3 { height: 50px; width: 100px; background-color: rgba(0, 255, 0, .5); } .box4 { height: 100px; width: 100px; background-color: #0000ff; } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
结果显示：
HSL值 HSLA值
- H 色相（0-360）
- S 饱和度，颜色的浓度 0%-100%
- L 亮度，颜色的亮度 0%-100%
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> .box1 { height: 100px; width: 100px; background-color: hsl(88, 40%, 50%); } </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
解释如下：
