Maison > interface Web > tutoriel CSS > Le CSS a-t-il une relation d'héritage ?

Le CSS a-t-il une relation d'héritage ?

青灯夜游
Libérer: 2022-12-30 11:12:13
original
3369 Les gens l'ont consulté

css a une relation d'héritage. L'héritage CSS est une règle qui permet d'appliquer des styles non seulement à un élément de balise HTML spécifique, mais également à ses descendants : si le style CSS du supérieur (parent) est défini, les enfants du supérieur (parent) ; et en dessous Tous les niveaux (subordonnés) ont ce style.

Le CSS a-t-il une relation d'héritage ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

le CSS a une relation d'héritage. Le rôle de l'héritage CSS : définir certains attributs pour l'élément parent, qui peuvent également être utilisés par les éléments enfants.

L'héritage CSS signifie que les balises enveloppées à l'intérieur auront les propriétés de style des balises externes. L'application la plus typique de la fonction d'héritage est généralement utilisée dans le style par défaut de l'ensemble de la page Web, et les parties qui doivent être désignées comme d'autres styles peuvent être définies dans des éléments individuels. Cette fonctionnalité peut fournir aux concepteurs Web un espace de jeu plus idéal. Mais en même temps, l'héritage comporte également de nombreuses règles, qui peuvent prêter à confusion lorsqu'elles sont appliquées.

L'une des principales caractéristiques du CSS est l'héritage, qui repose sur la relation ancêtre-descendant. L'héritage est un mécanisme qui permet d'appliquer des styles non seulement à un élément spécifique, mais également à ses descendants. Par exemple, une valeur de couleur définie par BODY sera également appliquée au texte du paragraphe. Voici un exemple :

Définition du style :

body{color:red;}
Copier après la connexion

Exemple de code d'application :

<p>CSS的<strong>层叠和继承</strong>深入探讨</p>
Copier après la connexion

Le résultat de l'application de ce code est : "Discussion approfondie de la cascade CSS et héritage" Les mots sont en rouge et "Cascading and Inheritance" est en gras car l'élément fort est appliqué. Ceci est conforme à l'intention de l'auteur et c'est pourquoi l'héritage fait partie du CSS.

Remarque :

1. Tous les attributs ne peuvent pas être hérités. Seuls les attributs commençant par color/font-/text-/line peuvent être hérités

2. Non seulement les fils peuvent hériter, mais les descendants peuvent hériter

Scénarios d'application :

Généralement utilisé pour définir des informations communes sur les pages Web, telles que la couleur du texte, police, taille du texte et autres contenus de la page Web

css a hérité des attributs

Propriétés de la série de texte

text-indent : retrait du texte

text-align : alignement horizontal du texte

line-height : hauteur de la ligne

word- spacing : augmenter ou diminuer l'espace entre les mots (c'est-à-dire l'espacement des mots)

espacement des lettres : augmenter ou diminuer l'espace entre les caractères (espacement des caractères)

text-transform : contrôler la casse du texte

direction : Spécifie le sens d'écriture du texte

couleur : Couleur du texte

2 Attributs de la famille de police

police : Police combinée

font-family : Spécifiez la famille de polices 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éfinissez le style de la police

font-variant : Définissez la police des lettres en petites majuscules pour afficher le texte, cela signifie que toutes les lettres minuscules seront converties en majuscules, mais toutes les lettres utilisant une police en petites majuscules sera différent du reste du texte. Sa taille de police est plus petite que celle de .

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.

3. Attributs de mise en page du tableau

caption-side : Définissez la position du titre du tableau.

border-collapse : définissez si les bordures du tableau sont fusionnées en une seule bordure ou affichées séparément comme dans le HTML standard.

border-spacing : Définissez la distance entre les bordures des cellules adjacentes (utilisé uniquement en mode "Border Separation").

cellules vides : Définissez s'il faut afficher les cellules vides dans le tableau (uniquement pour le mode "bordure détachée").

table-layout : définit l'algorithme de disposition du tableau pour le tableau.

4. Attributs de mise en page de la liste :

list-style-type : définissez le type de balise d'élément de liste.

list-style-image : utilisez une image pour remplacer le balisage d'un élément de liste.

list-style-position : indique comment le balisage de l'élément de liste est dessiné par rapport au contenu de l'objet.

list-style : attribut raccourci qui définit tous les attributs de liste dans une seule déclaration.

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

6. Générer des attributs de contenu : citations

7. : curseur

8. Attributs de style de page :

page, saut de page à l'intérieur, fenêtres, orphelins

9. 🎜>

parler, parler-ponctuation, parler-numéral, parler-en-tête, débit de parole, volume, famille de voix, hauteur, plage de hauteur, accentuation, richesse, azimut, élévation

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation

 ! !

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:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal