简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Quels sont les héritages de propriétés CSS ? Résumé des propriétés héritables et non héritables en CSS

不言
Libérer： 2018-07-27 16:30:04
original
15746 Les gens l'ont consulté

Ce qu'on appelle l'héritage signifie que l'élément html peut hériter de certains attributs CSS de l'élément parent, même si l'élément actuel ne définit pas cet attribut. Alors, quelles propriétés CSS peuvent être héritées et quelles propriétés ne peuvent pas être héritées ? Jetons un coup d'œil au contenu de l'héritage d'attributs en CSS.

Jetons d'abord un coup d'œil à la priorité CSS :

!important > Caractères génériques > Héritage > Propriétés par défaut du navigateur.

Attributs CSS non-héritables couramment utilisés

display : spécifie le type de boîte que l'élément doit générer

text-decoration : spécifie la boîte type ajouté au texte Décoration

text-shadow : effet d'ombre du texte

white-space : traitement des espaces blancs

Attributs du modèle de boîte : largeur, hauteur, marge, bordure, padding

Attributs d'arrière-plan : background

Attributs de positionnement : float, clear, position, top, right, bottom, left, min-width, min-height, max-width, max-height, overflow, clip, z-index

Attributs héritables CSS couramment utilisés :

police : police combinée

font-family : famille de polices des éléments spécifiés

font-weight : Définir l'épaisseur de la police

font-size : Définir la taille de la police

font-style : Définir le style de la police

text-indent : retrait du texte

text-align : alignement horizontal du texte

line-height : hauteur de la ligne

color : couleur du texte

visibilité : visibilité de l'élément

Attribut du curseur : curseur

Tous les éléments peuvent hériter

Visibilité de l'élément : visibilité

2. Attribut du curseur :cursor

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

1. Attributs de la famille de polices

2. -align Les attributs de série de texte des

éléments de niveau bloc peuvent hériter des attributs

text-indent, text-align

inherit ( Inherit) valeur

Chaque attribut peut se voir attribuer une valeur de "inherit", c'est-à-dire : pour un élément donné, l'attribut prend la même valeur que la valeur calculée de l'attribut relatif de son élément parent. Les valeurs héritées ne sont généralement utilisées que comme valeurs de secours, qui peuvent être améliorées en spécifiant explicitement « hériter », par exemple :

p { font-size: hériter }

hériter Limitations

Bien que l'héritage réduise les problèmes liés aux définitions répétées, certaines propriétés ne peuvent pas être héritées, telles que la bordure, la marge, le remplissage et l'arrière-plan.

Ce paramètre est logique. Par exemple, si une bordure est définie pour un

, si cet attribut est également hérité, alors tous les éléments de ce

produira sans aucun doute un résultat éblouissant. De même, les propriétés qui affectent la position des éléments, telles que la marge et le remplissage, ne sont pas héritées.

Dans le même temps, le style par défaut du navigateur affecte également les résultats de l'héritage. Par exemple : 

body { font-size: 12px; }
Copier après la connexion

Le texte du titre de niveau 2 ne fait pas 12px. //

Le texte chinois H2 sera un texte de style Titre 2 au lieu d'un texte de taille 12 px.

En effet, le style par défaut du navigateur définit la règle CSS

.

Dans le même temps, certaines anciennes versions de navigateurs peuvent ne pas bien prendre en charge l'héritage. Par exemple, certains navigateurs perdront tous les attributs hérités lorsqu'ils rencontreront

.

Une fois héritées, les propriétés CSS ne peuvent pas être annulées et ne peuvent être que redéfinies.

Articles connexes recommandés :

Attributs d'élément d'héritage CSS_html/css_WEB-ITnose

Attributs en CSS Comment utiliser l'héritage de valeur

Introduction à l'héritage de valeur 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!

Étiquettes associées：
css属性继承
source：php.cn
Article précédent：Qu'est-ce qu'un sélecteur CSS ? Résumé des sélecteurs CSS de base (neuf types) Article suivant：Quelles sont les caractéristiques du CSS ? Analyse de trois caractéristiques du CSS (héritage, priorité et cascade)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Styles CSS non appliqués au site Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...
Depuis 2024-04-06 17:12:23
0
1
336
Les symboles d'élément de liste (<ul> et <ol>) dans le nœud racine ne peuvent pas être affichés et supprimés en CSS, et le problème overflow-x: caché ne peut pas être supprimé. Je travaille actuellement sur une page Web et j'ai des problèmes avec les éléments de ma l...
Depuis 2024-04-04 16:38:22
0
1
3617
Comment utiliser les sélecteurs CSS pour cibler des éléments div contenant des attributs ou des balises spécifiques ? Je travaille sur un système de point de vente qui génère un site Web. La plupart du code e...
Depuis 2024-04-03 22:25:59
0
1
277
Comment positionner un div à côté d'une barre latérale de sorte que lorsque la barre latérale s'ouvre, le div soit poussé vers la gauche Chaque fois que j'ouvre la barre latérale, le div du contenu principal sera positionné sou...
Depuis 2024-04-03 14:47:21
0
1
325
Quel est l'équivalent moderne du jeu de cordes LESS Pour un exemple de jeux de chaînes et de leurs utilisations, voir Utilisation des propriét...
Depuis 2024-04-02 13:29:36
0
1
361
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！