Maison > Article > interface Web > qu'est-ce que l'héritage CSS
qu'est-ce que l'héritage CSS
- 青灯夜游original
- 2021-04-02 15:30:046515parcourir
L'héritage est une règle qui permet d'appliquer des styles non seulement à un élément de balise html spécifique, mais également à ses éléments descendants. L'héritage CSS fait référence à la définition du style CSS du parent. Tous les éléments enfants du parent et des niveaux inférieurs ont cet attribut. Le rôle de l'héritage CSS : définir certaines propriétés pour l'élément parent, qui peuvent également être utilisées par les éléments enfants.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Héritage CSS
L'héritage est une règle qui permet d'appliquer des styles non seulement à un élément de balise html spécifique, mais également à ses descendants .
L'héritage CSS peut être défini comme la transmission d'attributs CSS spécifiques vers le bas vers les éléments descendants, ce qui signifie que les balises enveloppées à l'intérieur auront le style des balises externes, c'est-à-dire que les éléments enfants peuvent hériter des attributs de l'élément parent.
Le rôle de l'héritage : Définissez certains attributs de l'élément parent, qui peuvent également être utilisés par les éléments enfants.
Par exemple, dans le code suivant, le div contient 2 balises p et 1 balise span. Lorsque la couleur de police est définie sur rouge pour le div, ses balises enfants hériteront des attributs de l'élément parent et donc. apparaissent en rouge.
<!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>
Bien sûr, dans l'exemple ci-dessus, nos propriétés peuvent être héritées, mais toutes les propriétés ne peuvent pas être héritées. Alors, quelles propriétés peuvent être héritées en CSS ? Résumons-le ci-dessous.
Quelles propriétés peuvent être héritées en CSS ?
1. Parmi les attributs de police qui sont des propriétés héritées en CSS :
font: font. font-family : Spécifie la police de l’élément. font-weight : définissez le poids de la police.
font-size : Définissez la taille de la police. font-style : définit le style de police.
font-variant : Définit la police en petites majuscules pour afficher le texte, cela signifie que toutes les lettres minuscules sont converties en majuscules, mais toutes les lettres en petites majuscules ont une taille de police plus petite que le reste du texte.
font-stretch : étire et transforme la famille de polices actuelle. Non pris en charge par tous les principaux navigateurs.
font-size-adjust : Spécifiez une valeur d'aspect pour un élément afin que la hauteur x de la police préférée soit conservée.
2. Parmi les attributs de texte qui ont des propriétés d'héritage en CSS :
text-indent : retrait de texte. text-align : le texte est aligné horizontalement. hauteur de ligne : hauteur de ligne. espacement des mots : augmenter ou diminuer l'espace entre les mots (c'est-à-dire l'espacement des mots).
lettre-espacement : Augmente ou diminue l'espace entre les caractères (espacement des caractères). text-transform : contrôle la casse du texte. direction : Spécifie la direction d’écriture du texte.
color : couleur du texte
3. Visibilité de l'élément des attributs hérités en CSS :
visibilité : précise si l'élément est visible.
4. Attributs de mise en page du tableau avec propriétés héritées en CSS :
caption-side : Définissez la position du titre du tableau. border-collapse : définissez s'il faut réduire la bordure du tableau en une seule bordure.
border-spacing : Définissez la distance séparant les bordures des cellules. cellules vides : définissez si les cellules vides doivent être affichées dans le tableau.
table-layout : définissez l'algorithme d'affichage des cellules, des lignes et des colonnes.
5. Attributs de mise en page de liste avec propriétés héritées en CSS :
list-style-type : modifiez le type d'indicateur utilisé pour les éléments de liste. list-style-image : utilisez une image pour chaque logo.
list-style-position : Vous pouvez déterminer si le logo apparaît en dehors du contenu de l'élément de liste ou à l'intérieur du contenu.
list-style : style de liste abrégé, utilisé pour définir toutes les propriétés des listes dans une seule instruction.
6. Attributs de contenu générés des attributs hérités en CSS :
quotes : Définissez le type de citation des références imbriquées.
7. Attributs du curseur qui sont des attributs hérités en CSS :
curseur : Spécifie le type (forme) du curseur à afficher
8. Attributs de style de page avec attributs hérités en CSS :
page : Spécifie le type spécifique de page sur laquelle les éléments doivent être affichés. page-break-inside : définissez le comportement de pagination pour éviter la pagination à l'intérieur de l'élément de table.
windows : Définit le nombre minimum de lignes qui doivent rester en haut de la page lorsque la pagination se produit à l'intérieur d'un élément.
orphelins : définit le nombre minimum de lignes qui doivent rester en bas de la page lorsque la pagination se produit à l'intérieur de l'élément.
9. L'attribut de style sonore qui est un attribut hérité en CSS
speak : définit ou récupère si le son est donné. parler-ponctuation : définir ou récupérer la manière dont les signes de ponctuation sont prononcés.
speak-numeral : définissez ou récupérez la façon dont les chiffres sont prononcés. speak-header : définit ou récupère le nombre de fois où l'en-tête du tableau apparaît par rapport à une série de cellules qui le suivent.
vitesse de parole : définissez ou récupérez la vitesse de prononciation. volume : définir ou récupérer le volume.
voice-family : définissez ou récupérez le type de voix actuel. pitch : définir ou récupérer le pitch.
pitch-range : définissez ou récupérez la douceur du son. contrainte : similaire à la plage de hauteur. Définit ou récupère la valeur de crête la plus élevée de la forme d’onde sonore actuelle.
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的规则继承的值也是如此，在匹配重要规则的元素之外，重要性也会随之消失，这点是需要我们特别注意的！
更多编程相关知识，请访问：编程视频！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!