PIZn

      在我们的每一个 Web 页面里边，都存在着一棵Document tree（文档树），每个HTML元素之间的关系，就像是一个家庭一样，有父母，有子女，也有兄弟。在我们使用 CSS 来设计web 页面的时候，就少不了 HTML 家族里边的“遗传基因”的继承关系了。

      CSS Inheritance（继承）在我们编写 CSS 的时候起着重要的作用。深入理解Document tree 里边元素的“遗传”关系，巧用CSS Inheritance，可以让我们少走弯路，快速构建出一个样式表来。

      什么是CSS Inheritance（继承）？
      为了更好地理解css Inheritance（继承），我还是举个简单的例子吧。下面是 HTML 代码：在<p>标签里边包含<em>标签。
      <p>Hello!I am <em>PIZn</em>.</p>
      右图则是这个语句的 Document tree。可见<em>元素为<p>元素的子元素，因而存在着继承关系。
      接下来，为<p>元素添加 css 样式：     

1. <style>
2. p{ color:red;}
3. </style>

     右图是该HTMl语句在浏览器里所展示出来的样式表现。可见，<em>元素继承了<p>元素的color属性值red。
      CSS Inheritance（继承）的作用？
      1，CSS Inheritance是专门为我们（前端开发人员，web工作者等）设计的，为的是更容易进行样式控制。
      2，有助于我们单独控制子孙元素的 CSS 属性。
      3，没有使用CSS Inheritance的CSS 文件会比较大而使得客户端下载时间长。简而言之，就是使用CSS继承可以帮助我们精减 CSS 文件。

      具有CSS Inheritance（继承）的元素有那些？
      并不是所有的标签都可以使用CSS Inheritance来控制，只有某些特殊的元素才有的。    

      以下元素具有CSS Inheritance（继承）：
      azimuth,
      border-collapse, border-spacing,
      caption-side,
      color,
      cursor,
      direction,
      elevation,
      empty-cells,
      font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,
      line-height,
      list-style-image, list-style-position,list-style-type, list-style, orphans, pitch-range,
      pitch, quotes, richness, speak-header, speaknumeral,
      speak-punctuation, speak, speechrate,
      stress, text-align, text-indent, texttransform,
      visibility, voice-family, volume, whitespace,
      widows, word-spacing
      哈哈，如此之多！其实，我们只需要记住常用的就好了。例如text一族（加粗），list一族（下划线），颜色一族（红色）等。

      常见的CSS Inheritance（继承）应用在哪些地方？
      在text一族里边，font-size是常用的也是比较复杂的。
      例如前文<p>标签，当我们设置font-size:80%的时候，<em>标签里边的字体也继承了font-size:80%。

      利用CSS Inheritance书写高效的CSS
      1，我们可以先在body里边设置color、font-size和font-family属性值：

1. body{        
2. color:#800888;           
3. font-family:arial,helvetica,sans-serif;          
4. font-size:100%;
5. }
6. /*这样写的目的，是先为祖先元素设置属性值*/

      2,为其他子元素设置属性值：

1. h1,h2,h3,h4,h5,h6{
2. font-family:georgia,times,serif;
3. }
4. /*这里的font-family就跟body的不同，方便了我们的控制*/

      3,还可以进一步细化：   

1. h1{ font-size:200%;}
2. h2{ font-size:150%;}
3. h3{ font-size:60%;}

      最后总结
      继承的要点在于，对于大部分用统一的样式，对于特殊元素，则单独控制。