CSS中的inherit使用方式

这篇文章主要介绍“CSS中的inherit使用方式”,在日常操作中,相信很多人在CSS中的inherit使用方式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS中的inherit使用方式”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联公司服务项目包括肥东网站建设、肥东网站制作、肥东网页制作以及肥东网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,肥东网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到肥东省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

稍不留意便会忽略掉级联样式表的特点。大多数开发者都知道inherit关键字,但有几个新的CSS3继承特性你可能不知道…
 property: inherit;

inherit关键字代表“使用指定给父元素的所有值”。如果父元素中没有明确的值定义,浏览器搜寻DOM树直到找到相应的属性。最终无法找到的话,它会使用浏览器的默认值,例如:
 

CSS Code复制内容到剪贴板

  1. #myparent   

  2. {   

  3.     margin: 10px;   

  4.     border: 1px solid #000;   

  5. }   

  6.     

  7. /* use the same border as the parent */  

  8. #myparent p   

  9. {   

  10.     border: inherit;   

  11. }  

在实践中是很少有必要使用inherit的。许多有用的属性自动继承,例如字体,字体大小,颜色,等等。

inheritis可以放心地使用。尽管IE6和IE7不支持,但你的设计不会因为这个而被破坏。
 property: initial;

哦,一个新的CSS3关键词!initial设置一个属性为它的初始值——浏览器的默认定义值,例如:
 

CSS Code复制内容到剪贴板

  1. body   

  2. {   

  3.     font-size: 0.5em;   

  4. }   

  5.     

  6. /* reset paragraphs to 1em */  

  7. p   

  8. {   

  9.     font-size: initial;   

  10. }  

它有用么?可能吧,毕竟你不能确保所有浏览器有相同的默认值。

支持合理——Chrome,Firefox,Safari和Opera 15 +。IE下它不生效,而且我正在努力思考什么情况下这将是一个灾难性问题。
 property: unset;

这是稍微不寻常的一个。unset使用时,它表现地就像有可继承值存在时继承了一样。如果它找不到可继承的值——比如,它是像box-shadow等不可继承的属性——它表现地好像继承了浏览器的默认值。

话又说回来,我想不出太多使用unset的场景,目前对支持它的很少。
 all: [ inherit | initial | unset ];

最后,all是一个属性而不是一个值。你可以指定inherit、initial或者unset来影响所有的属性,例如重置所有CSS属性为浏览器默认:
 

CSS Code复制内容到剪贴板

  1. #mywidget   

  2. {   

  3.     all: initial;   

  4. }  

如果你添加了第三方控件且要避免页面样式冲突的话,这可能是一个可选的全局CSS域。

不幸的是,目前为止你不能依靠跨浏览器的严格的一致性,然而,它依然是一个有用的特性。

到此,关于“CSS中的inherit使用方式”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网页标题:CSS中的inherit使用方式
链接URL:http://myzitong.com/article/iiigje.html