html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

举例详解CSS中的继承_Div+Css教程

[ ] 已经帮助:人解决问题

   CSS的继承是由所使用的样式属性定义的。换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的。wMrHTML5中文学习网 - HTML5先行者学习网

  什么是CSS继承wMrHTML5中文学习网 - HTML5先行者学习网

  每一个元素都是文档树的一部分,除了最顶级的HTML元素,每个元素都有其对应的父级元素,每一个父级元素的CSS属性值都可以被应用到它的子元素中去。wMrHTML5中文学习网 - HTML5先行者学习网

  举个栗子,H1标签包含着一个EM标签:wMrHTML5中文学习网 - HTML5先行者学习网

2015716190527993.jpg (493×132)

  EM就是H1标签的子元素,任何H1中继承的CSS属性值会自动在EM标签中生效,比如:wMrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板wMrHTML5中文学习网 - HTML5先行者学习网

  h1{font-size: 120%;}wMrHTML5中文学习网 - HTML5先行者学习网

  由于font-size是默认继承的CSS属性,"很大的"字体也会和H1一样,被放大到120%。wMrHTML5中文学习网 - HTML5先行者学习网

  如何使用CSS继承wMrHTML5中文学习网 - HTML5先行者学习网

  最简单的方法就是知道CSS所有属性中那些是默认被继承的,如果这个属性被继承,就会知道它会在元素所有子元素中生效。wMrHTML5中文学习网 - HTML5先行者学习网

  我们经常在非常顶级的元素上定义基础样式,比如BODY标签,如果在body中设置字体,因为继承,文档中所有元素都会应用这个字体:wMrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板wMrHTML5中文学习网 - HTML5先行者学习网

  h1{font-size: 120%;}wMrHTML5中文学习网 - HTML5先行者学习网

  使用「inherit」值wMrHTML5中文学习网 - HTML5先行者学习网

  每个CSS属性的值都包括inherit,属性被定义这个值后,即使这个属性不是默认继承,也会应用父级元素这个CSS属性的值,比如:wMrHTML5中文学习网 - HTML5先行者学习网

  CSS Code复制内容到剪贴板wMrHTML5中文学习网 - HTML5先行者学习网

  body { margin: 1em; }wMrHTML5中文学习网 - HTML5先行者学习网

  p { margin: inherit; }wMrHTML5中文学习网 - HTML5先行者学习网

  继承使用计算值(Computed Values)wMrHTML5中文学习网 - HTML5先行者学习网

  计算值指的是这个值相对于网页中其他值来定义,这个对于继承属性尤其重要。如果在body中定义font-size:1em,文档中所有元素字体大小并不都是1em,这是因为像H1-H6这类元素的font-size的值是相对大小。H1默认是网页中字体最大的元素,当设置body元素字体大小时,H1-H6会根据这个「平均」大小的字体计算实际的字体大小。wMrHTML5中文学习网 - HTML5先行者学习网

  再举一个例子:wMrHTML5中文学习网 - HTML5先行者学习网

2015716190548517.jpg (655×148)

  按照之前所述,font-size是默认被继承的CSS属性,然而span字体的大小并不是p的80%,而是和p一样大,正是因为继承使用的是计算值,如果p的父级元素的字体大小为30px,p的字体大小计算值为24px,span继承的则是24px,而不是80%。wMrHTML5中文学习网 - HTML5先行者学习网

  更多关于计算值可以阅读CSS Computed Value。wMrHTML5中文学习网 - HTML5先行者学习网

  background被「继承」wMrHTML5中文学习网 - HTML5先行者学习网

  查看backgruound属性,会看到它的继承性是no,也就是默认不被继承的。但是浏览器依旧默认「继承」了这个属性,比如写这么一段:wMrHTML5中文学习网 - HTML5先行者学习网

2015716190618439.jpg (619×149)

  “很大的”依旧有了黄色的背景,这是因为background属性的初始值(initial value)是transparent(透明),所以看到的黄色背景其实是h1标签的背景。

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助