哪些CSS属性是继承的?


73

我注意到有些属性是在CSS中继承的,而有些则不是。例如,text-size属性是继承的,但是padding和margin不被子块继承。那么如何确定哪些属性是继承的,哪些不是?


3
您也可以将自己的继承设置为任何属性,即width:Inherit;
犹豫不决的

Answers:


86

这是所有可继承属性的列表。我正在使用W3C的信息,所以我认为它应该是正确的。但是了解网络浏览器(特别是IE)后,其中一些可能并非所有浏览器都可以继承:

  1. azimuth
  2. border-collapse
  3. border-spacing
  4. caption-side
  5. color
  6. cursor
  7. direction
  8. elevation
  9. empty-cells
  10. font-family
  11. font-size
  12. font-style
  13. font-variant
  14. font-weight
  15. font
  16. letter-spacing
  17. line-height
  18. list-style-image
  19. list-style-position
  20. list-style-type
  21. list-style
  22. orphans
  23. pitch-range
  24. pitch
  25. quotes
  26. richness
  27. speak-header
  28. speak-numeral
  29. speak-punctuation
  30. speak
  31. speech-rate
  32. stress
  33. text-align
  34. text-indent
  35. text-transform
  36. visibility
  37. voice-family
  38. volume
  39. white-space
  40. widows
  41. word-spacing

7
是否有适用于此列表的经验法则?这些属性有什么共同点吗?
2011年

13
这是我第一次遇到“方位角”
JohnMerlino 2014年

4
@Kaivosukeltaja我觉得有一条经验法则-无限期地执行任何操作都不会导致页面被抓取。无限期地填充将导致最小元素剩余的空间很小。保证金相同。
0fnt 2015年

4
请注意,该表中的“继承”列以及每个propdef均指默认情况下该属性是否被继承而无需作者指定该inherit值。该inherit值可用于强制任何属性继承,包括“已继承”列为“否”的属性。
BoltClock

1
@TxRegex:欢迎您根据自己的喜好编辑我的答案。我并没有真正了解所有更改。
Blender

23

Blender和Shaz的列表都列举了所有继承的CSS 2.1属性,包括用于诸如的声音媒体的属性azimuth。以下是不包含面向听觉属性的列表,现在包括CSS3属性。

  1. border-collapse
  2. border-spacing
  3. caption-side
  4. color
  5. cursor
  6. direction
  7. empty-cells
  8. font-family
  9. font-size
  10. font-style
  11. font-variant
  12. font-weight
  13. font-size-adjust
  14. font-stretch
  15. font
  16. letter-spacing
  17. line-height
  18. list-style-image
  19. list-style-position
  20. list-style-type
  21. list-style
  22. orphans
  23. quotes
  24. tab-size
  25. text-align
  26. text-align-last
  27. text-decoration-color
  28. text-indent
  29. text-justify
  30. text-shadow
  31. text-transform
  32. visibility
  33. white-space
  34. widows
  35. word-break
  36. word-spacing
  37. word-wrap

我最好将其更新为现代CSS,而不是CSS 2.1规范。
保罗·爱尔兰

致Vincent Tang:看我的回答,它可能来自w3.org/TR/CSS21/propidx.html。不必介意某个匿名人士已经立即对其投票(没有任何解释或评论)。此链接是我可以找到的最佳参考。如果有人有更好的产品,我很乐意看到。
Panu Logic

16
  • 方位角
  • 边界崩溃
  • 边界间距
  • 字幕端
  • 颜色
  • 光标
  • 方向
  • 海拔
  • 空单元格
  • 字体家族字体大小
  • 字体样式
  • 字体变体
  • 字体粗细
  • 字形
  • 字母间距
  • 行高
  • 列表样式图像
  • 列表样式位置
  • 列表样式类型
  • 列表样式
  • 孤儿
  • 音高范围
  • 沥青报价
  • 丰富
  • 演讲标题
  • 说话数字
  • 语音标点
  • 说话
  • 语速
  • 强调
  • 文字对齐
  • 文字缩进
  • 文字转换
  • 能见度
  • 语音家庭
  • 空格
  • 寡妇
  • 字距

资源


4
您是从我的答案中复制过来的吗?
Blender

6
@Blender:不,我从http://www.slideshare.net..css-inheritance找到了一张幻灯片。在您发布之前,它已被列为来源。:)
Shaz

但是您最初有图像。那好吧。
Blender

1
@Blender:是的,我将其转换为文本。我没有复制/粘贴您的。别担心。
Shaz

@Blender注意,这个答案text-index应该是text-indent
e2-e4

-1

我发现的最佳参考页面是回答这个问题和类似问题的方法(例如,哪些CSS属性未继承):

https://www.w3.org/TR/CSS21/propidx.html

它具有“继承”(或不)的列。

页面上显示“此规范的几个部分已更新”。但是我在任何地方都找不到最新的版本,在一个简洁的表中列出了所有CSS属性。但是我认为这张桌子很棒,正好是我想要的。还回答每个CSS属性的可能值是什么以及初始(=默认)值的问题。

如果要查看所有继承的或非继承的属性分组在一起,则可以从网页复制文本并将其插入Excel等。然后根据“继承的”列对其进行排序。我尝试过的作品。


接受的答案具有指向完全相同的资源的链接。
约瑟夫·韦伯

1
我现在看到了链接,但它并没有真正告诉您,这是您亲自查找权威答案的地方。它只是说“我正在使用W3C的信息”。与其“合作”,不如说是“我从此官方资源中复制了我的清单”。向读者指出,这是他们可以从中找出与自己完全相同的信息以及可能是最新信息的来源,这很有用。仅仅因为一个答案被“接受”并不意味着它无法得到改善。
Panu Logic

如果可以改善答案,请在评论上留下您要改善或自己编辑的内容。
约瑟夫·韦伯

1
我认为当您认为自己的答案更好时,最好给出一个单独的替代答案,如果您指出自己的答案有些“错误”,则可能会冒犯原始作者。而且,Stack Overflow的负面因素已经太多了。
Panu Logic
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.