样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先元素和后代元素之间
继承的设计是为了方便开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有元素都具有该样式
并不是所有的样式都会被继承
比如：背景相关的，布局相关的这些样式都不会被继承注：span的背景颜色并不是被继承的，只是span的背景默认是透明的，所以p标签的背景颜色透了过去
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>样式的继承</title> <style> body{ font-size: 30px; } p{ color: red; background-color: orange; } div{ color: yellowgreen; } </style> </head> <body> <p> 我是一个p元素<br> <span>我是p元素中的span</span> </p> <span>我是p元素外的span</span> <div> 我是div <span> 我是div中的span <em>我span中的em</em> </span> </div> </body> </html>当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突
发生样式冲突的时候，应用哪个样式由选择器的权重（优先级）决定
第一：内联样式
第二：id选择器
第三：类和伪类选择器
第四：元素选择器
第五：通配选择器
第六：继承的样式没有优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器的权重</title> <style> #box1{ background-color: orange; } div{ background-color: yellow; } .red{ background-color: red; } </style> </head> <body> <div id="box1" class="red" style="background-color: skyblue;">我是一个div</div> </body> </html>注意： 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示
分组选择器是单独计算的
选择器的累加不会超过其最大的数量级
例如：类选择器再高也不会超过id选择器如果优先级计算后相同，此时优先使用靠下的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器的权重</title> <style> /* #box1{ background-color: orange; } div#box1{ background-color: yellow; } */ .red{ background-color: red; } .d1{ background-color: purple; } div,p,span{ background-color: yellowgreen; } </style> </head> <body> <div id="box1" class="red d1 d2">我是一个div</div> </body> </html>注通配选择器的优先级高于继承优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器的权重</title> <style> *{ font-size: 50px; } div{ font-size: 20px; } </style> </head> <body> <div id="box1" class="red d1 d2">我是一个div <span>我是div中的span</span></div> </body> </html>注：可以在某一个样式的后面添加 !important 则此时该样式会获得到最高的优先级，甚至超过内联样式
在开发中这个玩意一定要慎用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器的权重</title> <style> .d1{ background-color: purple !important; } .red{ background-color: red; } </style> </head> <body> <div id="box1" class="red d1 d2" style="background-color: chocolate;">我是一个div</div> </body> </html>像素： 屏幕（显示器）实际上由一个一个小点点构成 不同屏幕的像素大小是不同的，像素越小的屏幕显示效果越清晰 所以同样的200px在不同设备下显示的效果不同
百分比： 也可以将属性值设置为相对于其父元素属性的百分比 好处：可以使子元素跟随父元素的改变而改变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单位</title> <style> .box1{ width: 200px; height: 200px; background-color: chocolate; } .box2{ width: 50%; height: 50%; background-color: aqua; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>em是相对于元素的字体大小来计算的
1em = 1font-size(一般浏览器默认1font-size为16px) em会根据字体大小的改变而改变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单位</title> <style> .box1{ width: 200px; height: 200px; background-color: chocolate; } .box2{ width: 50%; height: 50%; background-color: aqua; } .box3{ font-size: 20px; width: 10em; height: 10em; background-color: greenyellow; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <div class="box3"></div> </body> </html>rem是相对于根元素（html）的字体大小来计算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单位</title> <style> html{ font-size: 30px; } .box1{ width: 200px; height: 200px; background-color: chocolate; } .box2{ width: 50%; height: 50%; background-color: aqua; } .box3{ font-size: 20px; width: 10rem; height: 10rem; background-color: greenyellow; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <div class="box3"></div> </body> </html>颜色单位：
在CSS中可以直接使用颜色名来设置各种元素
例如：red、orange、yellow、blue但是在CSS中直接使用颜色名是非常不方便的
RGB是通过三种不同颜色的不同浓度来调配出不同的颜色
R：red G：green B：blue 每一种颜色的范围在0—255之间（0%—100%之间）语法：RGB（红色，绿色，蓝色）
就是在RGB的基础上增加了一个a表示不透明度 需要四个值，前三个和RGB值一样，第四个表示不透明度 1表示完全不透明，0表示完全透明
例 .5表示半透明语法：#红色绿色蓝色 颜色浓度通过00-FF
如果颜色两位两位重复可以进行简写
例：#aabbcc——>#abc #aabbcd就不可以简写了H 色相（范围0—360） S 饱和度：颜色的浓度（0%—100%） L 亮度：颜色的亮度（0%—100%）
