Home >Web Front-end >CSS Tutorial >what is css inheritance
what is css inheritance
- 青灯夜游Original
- 2021-04-02 15:30:046554browse
Inheritance is a rule that allows styles to be applied not only to a specific html tag element, but also to its descendant elements. CSS inheritance refers to setting the CSS style of the parent. All child elements of the parent and below have this attribute. The role of CSS inheritance: setting some properties for the parent element, which can also be used by child elements.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS inheritance
Inheritance is a rule that allows styles to be applied not only to a specific html tag element, but also to its descendants .
CSS inheritance can be defined as specific css attributes being passed down to descendant elements, which means that the tags wrapped inside will have the style of the external tags, that is, the child elements can inherit the attributes of the parent element.
The role of inheritance: Set some attributes to the parent element, which can also be used by child elements.
For example, in the following code, the div contains 2 p tags and 1 span tag. When the font color is set to red for the div, its child tags will inherit the attributes of the parent element and will therefore appear red.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>苹果</p>
<p>香蕉</p>
<span>葡萄</span>
</div>
</body>
</html>
Of course, our properties in the above example can be inherited, but not all properties can be inherited. So what properties can be inherited in CSS? ? Let’s summarize it below.
What properties can be inherited in css?
1. Among the inherited attributes in css, the font attribute:
font: font. font-family: Specifies the font of the element. font-weight: Set the thickness of the font.
font-size: Set the font size. font-style: Define the font style.
font-variant: Sets the font in small caps to display the text, this means that all lowercase letters are converted to uppercase, but all letters in small caps have a smaller font size compared to the rest of the text smaller.
font-stretch: Stretch and transform the current font-family. Not supported by all major browsers.
font-size-adjust: Specify an aspect value for an element so that the x-height of the preferred font is maintained.
2. Among the text attributes with inherited properties in CSS:
text-indent: text indent. text-align: Text is aligned horizontally. line-height: line height. word-spacing: increasing or decreasing the space between words.
letter-spacing: Increase or decrease the space between characters (character spacing). text-transform: Control text case. direction: Specifies the writing direction of text.
color: Text color
3. Element visibility of inherited attributes in CSS:
visibility: Specifies whether the element is visible.
4. Table layout attributes with inherited properties in CSS:
caption-side: Set the position of the table title. border-collapse: Set whether to collapse the table border into a single border.
border-spacing: Set the distance separating cell borders. empty-cells: Set whether to display empty cells in the table.
table-layout: Set the algorithm for displaying cells, rows and columns.
5. List layout properties of inherited properties in css:
list-style-type: Modify the flag type used for list items. list-style-image: Use an image for each logo.
list-style-position: You can determine whether the logo appears outside the list item content or inside the content.
list-style: Abbreviated list style, used to set all properties for lists in one statement.
6. Generated content attributes of inherited properties in css:
quotes: Set the quote type of nested references.
7. Cursor attributes with inherited properties in CSS:
cursor: Specifies the type (shape) of the cursor to be displayed
8. Page style attributes with inherited properties in CSS:
page: Specifies the specific type of page on which elements should be displayed. page-break-inside: Set the paging behavior to avoid paging inside the table element.
windows: Sets the minimum number of lines that must remain at the top of the page when pagination occurs inside the element.
orphans: Sets the minimum number of lines that must remain at the bottom of the page when pagination occurs inside the element.
9. The sound style attribute with inheritance in css
speak: Set or retrieve whether the sound is given. speak-punctuation: Set or retrieve how punctuation marks are pronounced.
speak-numeral: Set or retrieve how numbers are pronounced. speak-header: Sets or retrieves how many times the table header occurs in relation to a series of cells following it.
speech-rate: Set or retrieve the pronunciation speed. volume: Set or retrieve the volume.
voice-family: Set or retrieve the current voice type. pitch: Set or retrieve pitch.
pitch-range: Set or retrieve the smoothness of the sound. stress: similar to pitch-range. Sets or retrieves the highest peak value of the current sound waveform.
richness：设置或检索当前声音的音色。azimuth：设置或检索当前声音的音场角度。
elevation：设置或检索当前声音的音源仰角。
10、所有元素可以继承的属性：visibility、cursor
11、内联元素可以继承的属性：
（1）字体系列属性
（2）除text-indent、text-align之外的文本系列属性
12、块级元素可以继承的属性：text-indent、text-align
（学习视频分享：css视频教程）
多种样式混合应用
既然有了继承性，那么在样式表中的应用上可能会有些读者搞不清，多个样式表同时应用到一个对象上会发生什么情形呢？先举个简单的例子：
样式定义：
.apple{color:red;}H1{color:yellow;}应用举例代码：
<H1 CLASS=”apple”>这儿的苹果好红啊</H1>
应用举例效果：因为选择符H1和.apple都匹配上面的H1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.apple这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，CSS规则必须这样进行处理。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
以下是一个按特性分类的选择符的列表：
H1 {color:blue;} 特性值为：001
P EM {color:purple;} 特性值为：002
.apple {red;} 特性值为：010
P.bright {color:yellow;} 特性值为：011
P.bright EM.dark {color:brown;} 特性值为：022
#id316 {color:yellow} 特性值为：100从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。
CSS继承的优先级问题
上面我们讨论了CSS的继承性和特殊性，在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已，举例说明。
样式定义：
BODY {background:black;}
LI {color:gray;}
UL.white {color:white}应用举例代码：
<ul> <li>举例列表一</li> <li>举例列表二</li> <li>举例列表三</li> <li>举例列表四</li> </ul>
有些读者可能认为除包含.white类的列表项显示为白色外，其余所有的列表项都应该是灰色的。然而情况并非如此。
为什么会出现这样的情况呢？因为带选择符LI的显式声明的权值比从UL.white规则那里继承过来的权值要大，所以每个列表项都是灰色的。
可能有些地方不是很好理解，大家多思考一下就会明白，平时在应用样式表的时候多留意思考一下。
下面我们再来看一个例子，若给定如下所示的标记，则EM强调文字将会是灰色的，而非黑色，因为EM规则的权值要大于从H1元素继承来的权值：
样式定义：
H1#id316 {color:black;} 特性值为：101
EM {color:gray;} 特性值为：1应用举例代码：
<H1 ID=”id316”>深入探讨<EM>CSS的继承性</EM></H1>
这是因为第二条EM规则的特性值（1）要比被继承的特性值（0）要大，事实上规定H1#id316的原始特性值（101）对其继承值没有影响，仍旧为0。
小技巧：
如果想让H1始终为黑色，而EM文字在其他情况下红色，那么下面的样式表设置就是一个很好的方法：
H1，H1 EM {color:black;} 特性值为：1，2
EM {color:red;} 特性值为：1给定这个规则后，除在H1元素内的任何EM文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条有效的规则（一条是对H1的，另一条是对H1 EM的）也就有两个特性值——每条规则一个。
上面我们讨论了多个样式规则同时应用于同一对象时，哪个规则会被最终应用的一些情况，可能有些细心的读者会说，那STYLE元素呢？对啊，HTML代码中可以直接应用内联样式STYLE的嘛。那么它的特性值如何呢？
回答是这样的：带有STYLE的元素在CSS1下其特性值为100，尽管类似于#ID316这样的ID选择符的特性值也为100，但在实际应用中，STYLE这一权值会更高一些，因为STYLE元素的值看起来要比多数普通规则的权值大。所以我们可以看出内联样式具有高的特性值，具体的例子我们就不举了，大家可以自己试试。
人为定义CSS继承优先级
在制作网页的过程中，我们可能想要设置某个规则比其他的规则更重要，CSS中允许这样设置，它们被称为重要规则（important rule）。这是根据其声明的方式和它们的自然属性来命名的。通过在一条规则的分号前插入！important这样一个短语来标记一条重要规则，比如说：
p.apple {color:#red !important; background:white;}颜色值#red被标记为!important，而背景色white未被标记，如果需要二条规则都是重要的话，那么每条规则都需要标上!important。
正确地放置!important的位置是很重要的，否则整条规则将为无效。!important总是放在规则声明的最后，在分号之前。
标记为!important的规则具有最高的权值，也就是说他没有具体的特性值，但是比其他的权值都要大。需要注意的是，虽然制作者定义的样式比用户定义的样式具有更高权值时，但!important规则恰恰相反：重要的用户定义规则要比制作者定义的样式具有更高权值，即使是标记为!important的重要规则也是如此。
看了这么多文字介绍后，我们来举个例子看一下：
样式定义：
h1 {color:gray !important;}应用举例代码：
<h1 STYLE=”color:black;”>看这儿！</h1>
应用举例效果:
!important规则会覆盖内联STYLE属性的内容，所以结果文字是灰色的而不是黑色的。
还有最后一种需要考虑的情况：继承值总是具有特性值0的特点，即使是从带有!important的规则继承的值也是如此，在匹配重要规则的元素之外，重要性也会随之消失，这点是需要我们特别注意的！
更多编程相关知识，请访问：编程视频！！
The above is the detailed content of what is css inheritance. For more information, please follow other related articles on the PHP Chinese website!