css的变量和继承
<h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">前言</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">朋友，百姓网前端架构师css魔法的《css揭秘》，已经出版发行，并赠送了我一本。看了一下这本书，确实有很多css技巧。让你会有蛮大的收获，在这里帮他宣传一下！今天所说的案例呢，也是部分借鉴这本书的。今天和大家聊聊css变量和继承！</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">有人会说，css怎么会有变量和继承？你是说的css处理器吧！</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">不是，我说的是纯css，其实，css也在努力融入各种预处理器的特性和写法，甚至有些属性比预处理器更加强大，例如：</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><a href="http://www.haorooms.com/post/css_unit_calc" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">calc计算</a>，具体可以看我之前的文章<a href="http://www.haorooms.com/post/css_unit_calc" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219); margin-left: 0.25em;">http://www.haorooms.com/post/css_unit_calc</a><br>这种百分比和单位的运算，预处理器是做不到的。</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">闲话少说，我们还是切入正题吧！</p><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">css变量</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"></p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">其实我说的变量，并非css处理器中的自定义变量，而是css某些属性有类似变量的功能！</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">这个属性就是currentColor</p><h3 style="font-size: 20px; counter-reset: subsection 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">currentColor 的应用</h3><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">1、镂空图片镂空和currentColor</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"></p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">代码如下：</p><pre style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; padding: 6px 10px; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">.icon {display: inline-block;
width: 16px; height: 20px;
background-image: url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/sprite_icons.png);
background-color: currentColor; /* 该颜色控制图标的颜色 */
}
.link:hover { color: #333; }/* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">解释：<br>默认图标的背景颜色currentColor用的是link的颜色，link颜色改变时，图标的背景颜色也随着改变！</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">2、水平分割线和文本颜色保持一致，假如你所有的hr 颜色要和文本颜色保持一致，有了currentColor，可以如下写</p><pre style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; padding: 6px 10px; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">hr{height:.5em;background:currentColor}
</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">假如你的文本颜色变了，hr也会自动变。</p><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">css继承</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">继承我们用的是inherit属性</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">这个应用到时蛮多的，例如设置字体，表单的字体我们要和页面其他部分相同，我们不用重复定于，只要继承其他的就可以！</p><pre style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; padding: 6px 10px; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">input,select,button{font:inherit}
</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">超链接颜色与其他颜色相同，可以用：</p><pre style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; padding: 6px 10px; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">a{color:inherit}
</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">提示对话框的小箭头，要和整体对话框一直，包括边框和背景，我们可以用inherit</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">关于对话框，我前面文章也有关于<a href="http://www.haorooms.com/post/css_dhk" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">css书写对话框</a>的 ，但是这种写法对于对话框的边框很难控制，看下下面的这个应用吧！</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"></p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">代码如下：</p><pre style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; padding: 6px 10px; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">.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度变为三角形
</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">背景和边框继承callout，这样写起来更加方便了！</p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">关于<a href="http://www.haorooms.com/post/css_common" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">常用css</a>请看：<a href="http://www.haorooms.com/post/css_common" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219); margin-left: 0.25em;">http://www.haorooms.com/post/css_common</a></p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">原文地址：<a href="http://www.haorooms.com/post/css_inherit_bl" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">http://www.haorooms.com/post/css_inherit_bl</a></p><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">本文原创，转载请注明：<a href="http://www.haorooms.com/" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">haorooms前端博客</a><a href="http://www.haorooms.com/" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219); margin-left: 0.25em;">http://www.haorooms.com/</a></p><p></p>
页:
[1]