大家好，css三大特性相信很多的网友都不是很明白，包括css颜色代码对照表也是一样，不过没有关系，接下来就来为大家分享关于css三大特性和css颜色代码对照表的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
一、css的继承性是什么
1、 CSS中的继承性就是指被包含在内部的标签将拥有外部标签的样式，即子元素可以继承父元素的属性。
2、CSS有三大特性，分别是继承性，层叠性，优先级，接下来将在文章中为大家详细介绍CSS中的继承性，希望对大家有所帮助。
3、继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性，例如下面的代码，div中包含2个p标签，1个span标签，当给div设置字体颜色为红色时，他的子标签会继承父元素的属性，因而会显示红色。在CSS中以text-、font-、line-开头的属性都是可以继承的。
二、CSS-03-三大特性+盒子模型
CSS有非常重要的三个特性：层叠性、继承性、优先级。
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。
当同一个元素指定多个选择器，就会有优先级的产生。
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
页面布局要学习三大核心：盒子模型,浮动和定位.
学习好盒子模型能非常好的帮助我们布局页面.
网页布局的核心本质：<u>就是利用 CSS摆盒子</u>。
所谓盒子模型：就是把 HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的 HTML元素，它包括：<u>边框</u>、<u>外边距</u>、<u>内边距</u>、和<u>实际内容</u>
border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色
CSS边框属性允许你指定一个元素边框的样式和颜色。
边框样式 border-style可以设置如下值：
课堂要求：请给一个 200*200的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性）
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
padding属性用于设置内边距，即边框与内容之间的距离。
padding属性（简写属性）可以有一到四个值。
以上 4种情况，我们实际开发都会遇到。
当我们给盒子指定 padding值之后，发生了 2件事情：
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
<u>如果保证盒子跟效果图大小保持一致</u>，则让 width/height减去多出来的内边距大小即可。
padding内边距可以撑开盒子,我们可以做非常巧妙的运用.
因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适。
padding内边距可以撑开盒子,有时候,也会让我们去修改宽度。
现实开发时候，小米侧边栏，文字距离左侧的距离不能用text-indent调整，这样不精确，实际开发的做法是：给padding值，这样更加精确
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小.
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
margin简写方式代表的意义跟 padding完全一致。
外边距可以让块级盒子水平居中，但是必须满足两个条件：
①盒子必须指定了宽度（width）。
②盒子左右的外边距都设置为 auto。auto----自动
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可。
使用 margin定义块元素的垂直外边距时，可能会出现外边距的合并。
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom与 margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
③可以为父元素添加 overflow:hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面再总结。
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(因为设置了也不起作用)。但是转换为块级和行内块元素就可以了。
因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS里面完成。
因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS里面完成。
标签都是有语义的,合理的地方用合理的标签。比如产品标题就用 h,大量文字段落就用p
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也方便。
大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。
最后同学们一定多运用辅助工具,比如屏幕画笔,ps等等
去掉 li前面的项目符号（小圆点）
（重点记住前两个，文字阴影做了解）
在 CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
CSS3中新增了盒子阴影，我们可以使用 box-shadow属性为盒子添加阴影。
在 CSS3中，我们可以使用 text-shadow属性将阴影应用于文本。
三、CSS入门8-三大特性之层叠特性与优先级
所谓的层叠性与优先级，其实说白了可以理解为，不同的规则起冲突的情况下，听谁的呢？有的时候这种冲突很容易解决，有的时候我们自己都难以决断，比如好声音三位导师都选你，该跟谁走呢。索性css给出了这些规则的优先级，不需要我们去苦恼。
元素的样式该如何去展现呢，首先看一下某个元素某个属性可能作用样式的情况：
下面我们来详细分析一下这三种情况。
我们先来看有唯一指定样式的情况，因为，这种情况最简单，就一个选择，也别挑了，说啥就是啥。我们还是来大致看看。
结论：若只有唯一指定样式，以该样式为准。
多个样式规则冲突，其实有很多种情况。还记得我们学过样式引入方式有四种，涉及三种样式，分别是内联，内部和外部（参考 CSS入门4-引入CSS）。首先我们来看只引入其中一种类型的情况下，出现冲突该如何解决。
仅有内联的情况下，要出现冲突，只可能是在style中多次对同一个属性赋值。
看上图，审查一下元素，可以看到该元素样式中，前面的red被覆盖了，color最后的取值是blue。最右边文字的颜色确实也是蓝色。
结论：只有内联样式，后面的属性赋值优先级大于前面的属性赋值。
内部样式，已经可以选择多种选择器来指定样式。所以，这里情况比内联会复杂很多。首先来复习一下选择器的种类，可以参考 CSS入门5-选择器。这么多的选择器类型和组合关系，可能都会产生冲突，这个时候怎么办呢，想想都复杂，我们继续拆分问题。将选择器分为四类:
可以看到div中两个类对颜色的定义冲突时，不管class定义的顺序如何，以style中类的顺序为准，后面的覆盖前面的样式。如果是同一选择器，也是后者覆盖前者，这种情况可以涵盖在同类选择器的情况下。
结论：同类型选择器（类型一样，即同为元素选择器，类选择器，id选择器或者属性选择器），按style中的先后顺序，后者优先级更高。
我们选择正反两种顺序，来看不同选择器之间的比较。首先，四种选择器在一起时，id选择器获胜。然后排除id选择器，剩余三种选择器比较时，类和属性谁在下边谁赢，也就是后者覆盖前者。最后，元素分别与类和属性比较，发现元素都输了。
结论：id>(类和属性)>元素，类和属性同级，遵循同级元素后者覆盖前者的规则。
注：查看某个元素样式的时候，调试窗口是按照优先级规则从小到大往上排的，越往上的规则优先级越高，对同个属性的样式规定将会覆盖下面低优先级的样式规定。
注：要想在调试器看到动态伪类效果，需要在styles中勾选该效果。
看上面示例，我们在style内先按id，类，属性，元素，静态伪类(只应用于超链接)，动态伪类(可应用于任何元素)，目标伪类:target(IE8-不支持，匹配锚点对应的目标元素)，UI元素伪类(IE8-不支持)，结构伪类(IE8-不支持)的顺序指定规则。结果发现其表现如下：
a：id>结构伪类>动态伪类>静态伪类>属性>类>元素>浏览器默认属性>继承属性
input：id>结构伪类> UI元素伪类>目标伪类>动态伪类>类>元素>浏览器默认属性>继承属性
我们合并一下这两个结论，有如下结论：
3.2.1.2.2.1-1 id>结构伪类> UI元素伪类>目标伪类>动态伪类>静态伪类>属性>类>元素>浏览器默认属性>继承属性
（当然，需要注意的是，并不是每个元素都有这些属性的）
然后，我们将style内各规则倒序一下:
a：id>类>属性>静态伪类>动态伪类>结构伪类>元素>浏览器默认属性>继承属性
input：id>类>动态伪类>目标伪类> UI元素伪类>结构伪类>元素>浏览器默认属性>继承属性
我们合并一下这两个结论，有如下结论：
3.2.1.2.2.1-2 id>类>属性>静态伪类>动态伪类>目标伪类> UI元素伪类>结构伪类>元素>浏览器默认属性>继承属性
综合3.2.1.2.2.1-1和3.2.1.2.2.1-2来看，我们再次验证了类和属性同级，并且发现它们和伪类也是同级的。有如下结论：
结论：id>(类，属性，伪类)>元素，类，属性和伪类同级，遵循同级元素后者覆盖前者的规则。
伪元素，说是元素，但又不是真实的元素，是一个虚拟的元素。如何详细理解这段话呢，我们来看一下下面这个例子。
先按后代，子代，通用兄弟，相邻兄弟在style中排序，发现后面的优先级高。然后顺序反过来：
由以上几点结论可以得出，亲戚关系发生冲突时，先看id选择器数量，谁多谁大，一样多就看类（及其同级）选择器，谁多谁大，若还是一样多，则看元素选择器，谁多谁大。如果仍然一样多，谁在后面谁优先。
可以看出，通配选择器样式优先级仅比浏览器默认样式和继承样式优先级高一些。
总结3.2.1.2仅有内部样式的情况，有如下结论：
ps:对于社群关系，在比较优先级时，将其理解为在该位置拆按顺序成一个个单独的个体即可。
这种情况的表现形式与内部样式一样。
这种情况遵循后者覆盖前者的原则，后面的link优先于前面的link，而不管其加载的顺序如何。
css知多少（3）——样式来源与层叠规则
深入理解CSS中的层叠上下文和层叠顺序
css三大特性和css颜色代码对照表的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！
