Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css的变量和继承的学习笔记

css的变量和继承的学习笔记

发布时间:2020-05-07   编辑:www.jquerycn.cn
jquery中文网为您提供css的变量和继承的学习笔记等资源,欢迎您收藏本站,我们将为您提供最新的css的变量和继承的学习笔记资源
css的变量和继承我们可能几乎没有用到但我们查看门户网站的css会发现它们常用到有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,这样写起来更加方便了!

您可能感兴趣的文章:
Jquery实战_读书笔记1—选择jQuery
jQuery学习笔记 操作jQuery对象 CSS处理
Jquery 基础学习笔记
asp timeout超时问题的学习笔记
JS面向对象编程之继承示例代码
jQuery学习笔记之jQuery的动画
golang匿名函数和闭包学习笔记
shell编程基础之认识与学习BASH
crontab调用shell无法读取环境变量的解决办法
jQuery学习笔记 操作jQuery对象 文档处理

[关闭]