css的变量和继承的学习笔记
朋友，百姓网前端架构师css魔法的《css揭秘》，已经出版发行，并赠送了我一本。看了一下这本书，确实有很多css技巧。让你会有蛮大的收获，在这里帮他宣传一下！今天所说的案例呢，也是部分借鉴这本书的。今天和大家聊聊css变量和继承！
有人会说，css怎么会有变量和继承？你是说的css处理器吧！
不是，我说的是纯css，其实，css也在努力融入各种预处理器的特性和写法，甚至有些属性比预处理器更加强大，例如：
闲话少说，我们还是切入正题吧！
css变量
其实我说的变量，并非css处理器中的自定义变量，而是css某些属性有类似变量的功能！
这个属性就是currentColor
currentColor 的应用
1、镂空图片镂空和currentColor
代码如下：
.icon {
display: inline-block;
width: 16px; height: 20px;
background-image: url(h/216/0y89gzo2/sprite_icons.png);
background-color: currentColor; /* 该颜色控制图标的颜色 */
}
.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
解释： 默认图标的背景颜色currentColor用的是link的颜色，link颜色改变时，图标的背景颜色也随着改变！
2、水平分割线和文本颜色保持一致，假如你所有的hr 颜色要和文本颜色保持一致，有了currentColor，可以如下写
hr{height:.5em;background:currentColor}
假如你的文本颜色变了，hr也会自动变。
css继承
继承我们用的是inherit属性
这个应用到时蛮多的，例如设置字体，表单的字体我们要和页面其他部分相同，我们不用重复定于，只要继承其他的就可以！
input,select,button{font:inherit}
超链接颜色与其他颜色相同，可以用：
a{color:inherit}
提示对话框的小箭头，要和整体对话框一直，包括边框和背景，我们可以用inherit
关于对话框，我前面文章也有关于css书写对话框的 ，但是这种写法对于对话框的边框很难控制，看下下面的这个应用吧！
代码如下：
.callout{position:relative;width:300px;height:200px;background-color:#ccc;border:1px solid red;}
.callout::before{content:"";position:absolute;top:-.4em;left:1em;padding:.35em;background:inherit;
border:inherit;border-right:0;border-bottom:0;transform:rotate(45deg);}//先写一个正方形，然后旋转45度变为三角形
例子
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
背景和边框继承callout，这样写起来更加方便了！
您可能感兴趣的文章：
css的变量和继承的学习笔记
详细学习CSS中的网页布局的属性
Javascript 设计模式读书笔记(三)——继承
C#学习笔记之C#中的类
JavaScript MVC 学习笔记（三）类的使用（中）
《javascript语言精粹》学习笔记 – 继承
[原创]IssueVision 学习笔记(二)-----为控件添加自定义属性和事件-Web_Serv
JavaScript MVC 学习笔记（六）模型之ORM
JavaScript MVC 学习笔记（四）类的使用(下)
Jquery实战_读书笔记1—选择jQuery