CSS三大特性

目录 一、层叠性 二、继承性 三、优先级、 CSS有三大特性：层叠性、继承性、优先级 一、层叠性 1、层叠性：相同的选择器若设置相同的样式，那么此时一个样式就会层叠（覆盖）另一个冲突的样式。 2、层叠性主要解决样式冲突问题。 层叠性原则： 样式若冲突，遵循就近原则，即那个样式离结构更近就执行哪个样式。 样式若不冲突，则不发生层叠，也就是正常执行。 下面来看两个例子： 1）我们给字体加上颜色，但同时加两种色彩，看是否体现层叠性： 可以看到黑色离我们的结构更近，那么来看看效果

​ 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。important 无穷大.​ 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。子元素可以继承父元素的样式：（text-，font-，line-这些元素开头的可以继承，以及color属性）它控制相邻单元格的边框。

今日励志语：一定要把自己的目标落在实处，写下人生的清单 今日知识点：css三大特性： 1，层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 2，继承性 CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。子元素可以继承父元素的样式：（text-，font-，line-这些元素开头的可以继

CSS的三大特性：层叠性，继承性，优先级： （1）层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突样式： 原则：样式冲突-遵循的原则是就近原则，哪个样式理结构近，就执行哪个样式； 样式不冲突-不会层叠。 （2）继承性：子标签会继承父标签的某些样式，如文本颜色，字号。 行高继承性：body { font:12px/1.5 Microsoft yahei;} 行高可以有单位也可以无单位。这个1.5代表的是当前元素文字大小的1.5倍。所以当前行高为21px. 如果子元素没有设置行高，则会继承父元

我们先抛出一个问题，CSS 为什么叫层叠样式表？这个名字到底有什么含义呢？要理解它，就需要我们对 CSS 的特性有一些了解。CSS 的一切呈现结果，都是围绕三大特性展开。如何更深入的理解，这就需要我们了解 CSS 三大特性。由表象升华到原理，从而写出更优秀的代码。文中会举出很多小例子，快来动手试试吧！一、CSS 优先级CSS 的组成单元是样式规则，也就是我们常说的 CSS Rule ，正如我们下面...

文本：color，text-weight，text-align，line-height。第三等级：代表类，伪类和属性选择器，如.content，权值为0，0，1，0。盒子模型：border，padding，margin，background。第四等级：代表标签选择器和伪元素选择器，如div p，权值为0，0，0，1。第一等级：代表内联样式，如style=“”，权值为 1，0，0，0。第二等级：代表id选择器，如#content，权值为0，1，0，0。文本装饰：盒子，布局，定位全部不继承。

CSS的核心特性包括继承、层叠和优先级。继承使子元素自动获取父元素的文本相关样式；层叠通过来源和顺序决定冲突样式的应用；优先级则通过(a,b,c,d)权重模型量化选择器的重要性。三者协同工作：先继承父元素样式，再应用直接规则，最后通过优先级和层叠解决冲突。理解这三大特性是掌握CSS样式的关键基础。

在前端学习中，CSS三大特性是必学且很重要的知识点，其中三大特性分别是：层叠性、继承性和优先级。三大特性亦是一种‘规则’，精通并‘遵守’是帮助你彻底解决CSS代码失效问题的关键！

CSS 三大特性 层叠 继承 优先级 是我们学习 CSS 必须掌握的三个特性。CSS 层叠性 所谓层叠性是指多种 CSS 样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上， 那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出 现一个标签指定了相同样式不同值的情况，这就是样式冲突。 一般情况下，如...

前端学习总结-1 CSS-三大特性

DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > CSS 三大特性示例 </ title > < style > /* 外部样式：继承属性 */ body {} /* 类选择器：优先级较高 */ .highlight {