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，这样写起来更加方便了！
相关文章
- 下面本文章来给大家介绍在php中成员变量的一些对比了，文章举了四个例子在这例子中分别对不同成员变量进行测试与获取操作，下面一起来看看。 有如下4个代码示例，你认...2016-11-25
- 本文主要介绍了C#变量命名规则小结，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-09
- 这篇文章主要介绍了R语言删除指定变量或对象的操作方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
- 在PHP中，大部分变量类型，如字符串，整型，浮点，数组等都是值类型的，而类和对象是引用类型，在使用的时候，需要注意这一点。看到网友在讨论PHP的&符号，要彻底理解它的用法，就有必要讨论一下变量的两种形式。PHP的变量在内存中是这样...2015-10-23
- 下面小编就为大家带来一篇java中String类型变量的赋值问题介绍。小编觉得挺不错的。现在分享给大家，给大家一个参考。...2016-03-28
- 我们在php中上传文件就必须使用#_FILE变量了，这个自动全局变量 $_FILES 从 PHP 4.1.0 版本开始被支持。在这之前，从 4.0.0 版本开始，PHP 支持 $HTTP_POST_FILES 数组。这...2016-11-25
- 虽然C#编译器为每个类型都设置了默认类型，但作为面向对象的设计原则，我们还是需要对变量进行正确的初始化。实际上这也是C#推荐的做法...2020-06-25
- 1、简介Smarty是一个使用PHP写出来的模板PHP模板引擎，是目前业界最著名的PHP模板引擎之一。它分离了逻辑代码和外在的内容，提供了一种易于管理和使用的方法，用来将原本与HTML代码混杂在一起PHP代码逻辑分离。简单的讲，目...2014-05-31
- 这篇文章主要介绍了python 实现循环定义、赋值多个变量的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 这篇文章主要介绍了详解ES6实现类的私有变量的几种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-10
- 这篇文章主要介绍了C++变量,常量,数组和字符串,是C++入门学习中的基础知识,需要的朋友可以参考下,希望能够给你带来帮助...2021-10-21
- 这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-09-02
- 这篇文章主要给大家介绍了关于Nest.js环境变量配置与序列化的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-21
- 这篇文章主要给大家介绍了关于C#设置与获取环境变量的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。...2020-06-25
- 当我们在星际中开地图和几家电脑作战的时候，电脑的几个玩家相当于结盟，一旦我们出兵进攻某一家电脑，其余的电脑会出兵救援。 那么如何让各家电脑知道自己的盟友被攻击了...2016-11-25
- 本篇文章小编为大家介绍，基于条件变量的消息队列 说明介绍。需要的朋友参考一下...2020-04-25
- 这篇文章主要介绍了Perl中的特殊内置变量详细介绍,需要的朋友可以参考下...2020-06-29
- 这篇文章主要介绍了node.js 全局变量的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-15