守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 182|回复: 0

[技术资料] css的变量和继承

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-3 11:40:36 | 显示全部楼层 |阅读模式

    前言

    朋友,百姓网前端架构师css魔法的《css揭秘》,已经出版发行,并赠送了我一本。看了一下这本书,确实有很多css技巧。让你会有蛮大的收获,在这里帮他宣传一下!今天所说的案例呢,也是部分借鉴这本书的。今天和大家聊聊css变量和继承!

    有人会说,css怎么会有变量和继承?你是说的css处理器吧!

    不是,我说的是纯css,其实,css也在努力融入各种预处理器的特性和写法,甚至有些属性比预处理器更加强大,例如:

    calc计算,具体可以看我之前的文章http://www.haorooms.com/post/css_unit_calc
    这种百分比和单位的运算,预处理器是做不到的。

    闲话少说,我们还是切入正题吧!

    css变量

    其实我说的变量,并非css处理器中的自定义变量,而是css某些属性有类似变量的功能!

    这个属性就是currentColor

    currentColor 的应用

    1、镂空图片镂空和currentColor

    代码如下:

    .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; }/* 虽然改变的是文字颜色,但是图标颜色也一起变化了 */
    

    解释:
    默认图标的背景颜色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度变为三角形
    

    背景和边框继承callout,这样写起来更加方便了!

    关于常用css请看:http://www.haorooms.com/post/css_common

    原文地址:http://www.haorooms.com/post/css_inherit_bl

    本文原创,转载请注明:haorooms前端博客http://www.haorooms.com/

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 00:45 , Processed in 0.042278 second(s), 31 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表