Que signifie l’héritage CSS ? Quelles propriétés du CSS peuvent être héritées ?

Dans le processus d'apprentissage du CSS, nous rencontrerons certains attributs qui peuvent être hérités. Alors, que signifie l'héritage en CSS ? Quelles propriétés peuvent être héritées ? Cet article vous présentera le contenu de l'héritage en CSS.

Avant de définir l'héritage CSS, jetons un coup d'œil au HTML DOM (arbre des documents). Le HTML DOM (arbre des documents) est composé d'éléments HTML. L'arborescence des documents est similaire à l'arbre généalogique. ancêtres, descendants, pères, enfants et frères. En fait, c'est facile à comprendre, donc je n'entrerai pas dans les détails ici. Si vous voulez en savoir plus, vous pouvez jeter un œil à ce Manuel de référence HTML DOM chinois.

Que signifie l'héritage CSS ?

Après avoir examiné l'arborescence des documents, l'héritage dans notre CSS peut être défini comme des attributs CSS spécifiques transmis aux éléments descendants. C'est en fait facile à comprendre, 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.

Utilisons un exemple pour expliquer spécifiquement ce qu'est l'héritage du CSS.

<p>
CSS<em>继承性</em>代码
</p>

Il est à noter que em est inclus dans la p.

Lorsque nous spécifions le style CSS de p, voyons ce qui leur arrive ?

<style>
p { color:red; }
</style>

Les polices de la balise p et de la balise em deviennent rouges en même temps dans le navigateur. Nous n'avons pas spécifié le style de em, mais em hérite des attributs de style de son élément parent p.

Après avoir vu cela, je pense que vous devriez être très clair sur ce que signifie l'héritage en CSS. En fait, l'héritage CSS est souvent utilisé lorsque nous écrivons du code, même sans le savoir.

Bien sûr, nos propriétés dans l'exemple ci-dessus 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 l’épaisseur 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 hérités 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.

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 attributs hérités en CSS :

list-style-type : modifiez le type d'indicateur utilisé pour les éléments de la 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.

richesse : Définir ou récupérer le timbre du son actuel. azimut : définissez ou récupérez l'angle du champ sonore du son actuel.

élévation : définissez ou récupérez l'angle d'élévation de la source du son actuel.

10. Attributs pouvant être hérités par tous les éléments : visibilité, curseur

11. Attributs pouvant être hérités par les éléments en ligne :

(1) Attributs de la famille de polices

(2) Attributs de la série de texte, à l'exception de text-indent et text-align

12. Attributs dont les éléments de niveau bloc peuvent hériter.  : text-indent, text-align

Ce qui précède est un résumé de l'héritage CSS. Bien sûr, si vous souhaitez en savoir plus sur l'héritage CSS, vous pouvez obtenir des connaissances pertinentes. allez sur le site Web php chinois et jetez un œil à la colonne Tutoriel vidéo CSS ou à la colonne Tutoriel vidéo CSS3, qui contient diverses vidéos liées au CSS.

Recommandations associées :

Analyse approfondie de l'héritage CSS

Introduction à l'héritage des valeurs d'attribut en CSS

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!