龙都娱乐»HTML/CSS»CSS3 继承的技巧

CSS3 继承的技巧

来源:oschina 发布时间:2013-10-29 阅读次数:
  稍不留意便会忽略掉级联样式表的特点。大多数龙都娱乐都知道inherit关键字,但有几个新的CSS3继承特性你可能不知道…

 property: inherit;

  inherit关键字代表“使用指定给父元素的所有值”。如果父元素中没有明确的值定义,浏览器搜寻DOM树直到找到相应的属性。最终无法找到的话,它会使用浏览器的默认值,例如: #myparent { margin: 10px; border: 1px solid #000; } /* use the same border as the parent */ #myparent p { border: inherit; }   在实践中是很少有必要使用inherit的。许多有用的属性自动继承,例如字体,字体大小,颜色,等等。   inheritis可以放心地使用。尽管IE6和IE7不支持,但你的设计不会因为这个而被破坏。

 property: initial;

  哦,一个新的CSS3关键词!initial设置一个属性为它的初始值——浏览器的默认定义值,例如: body { font-size: 0.5em; } /* reset paragraphs to 1em */ p { font-size: initial; }   它有用么?可能吧,毕竟你不能确保所有浏览器有相同的默认值。   支持合理——Chrome,Firefox,Safari和Opera 15 +。IE下它不生效,而且我正在努力思考什么情况下这将是一个灾难性问题。

 property: unset;

  这是稍微不寻常的一个。unset使用时,它表现地就像有可继承值存在时继承了一样。如果它找不到可继承的值——比如,它是像box-shadow等不可继承的属性——它表现地好像继承了浏览器的默认值。   话又说回来,我想不出太多使用unset的场景,目前对支持它的很少。

 all: [ inherit | initial | unset ];

  最后,all是一个属性而不是一个值。你可以指定inherit、initial或者unset来影响所有的属性,例如重置所有CSS属性为浏览器默认: #mywidget { all: initial; }   如果你添加了第三方控件且要避免页面样式冲突的话,这可能是一个可选的全局CSS域。   不幸的是,目前为止你不能依靠跨浏览器的严格的一致性,然而,它依然是一个有用的特性。   原文地址:http://www.sitepoint.com/css3-inheritance-tips-tricks/
QQ群:WEB龙都娱乐官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
网友评论(共1条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共1条评论
登录会员中心
龙都娱乐