Cette fois, je vais vous montrer comment utiliser l'héritage de valeur d'attribut en CSS et quelles sont les précautions à prendre pour utiliser l'héritage de valeur d'attribut en CSS. Ce qui suit est un cas pratique, jetons un coup d'œil.
Héritage : les éléments HTML peuvent hériter de certains attributs CSS de leurs éléments parents, même si l'élément actuel ne définit pas cet attribut.
Attributs 1.css qui peuvent et ne peuvent pas être hérités
Non héritables : affichage, marge, bordure, remplissage, arrière-plan, hauteur, hauteur min, max- hauteur, largeur, largeur minimale, largeur maximale, débordement, position, gauche, droite, haut, bas, z-index, float, clear, table-layout, alignement vertical, saut de page- après, page-pain-avant et unicode-bidi. Tous les éléments héritent : visibilité et curseur. Les éléments en ligne peuvent hériter : espacement des lettres, espacement des mots, espace blanc, hauteur de ligne, couleur, police, famille de polices, taille de police, style de police, variante de police, poids de police, texte-décoration, texte-transform, direction. Les éléments du bornier peuvent hériter : text-indent et text-align. Les éléments de liste peuvent hériter : list-style, list-style-type, list-style-position, list-style-image. Les éléments du tableau peuvent hériter de : border-collapse.
2. Héritage des valeurs
L'héritage est également basé sur l'arborescence du document. Certains attributs des éléments de l'arborescence du document peuvent être hérités par leur. éléments enfants. Chaque propriété CSS définit si elle peut être héritée. Pour définir certains attributs de style par défaut du document, vous pouvez définir cet attribut à la racine de l'arborescence du document. Si cet attribut peut être hérité, ses éléments descendants hériteront de cet attribut, tels que la couleur, la taille de la police et d'autres attributs.
3. Valeur "hériter"
Chaque attribut peut spécifier la valeur "hériter", c'est-à-dire : pour un élément donné, cet attribut et la valeur calculée de l'attribut relatif de l'élément parent prend la même valeur. 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: inherit; }
Bien que l'héritage réduise les problèmes liés aux définitions répétées, certaines les 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
résultat. 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 :
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 12px. body { font-size: 12px; }
En effet, le style par défaut du navigateur définit la règle CSS
.
Dans le même temps, certains navigateurs plus anciens peuvent ne pas bien prendre en charge l'héritage. Par exemple, certains navigateurs perdront tous les attributs hérités lorsqu'ils rencontreront
5. annulée ?
Une fois héritée, la propriété CSS ne peut pas être annulée et ne peut être que redéfinie.
6. Cas
Position de l'élément parent : relatif Élément enfant : position : absolue La largeur de l'élément parent est fixe et l'élément enfant héritera de la largeur de l'élément parent (pour la navigation secondaire, c'est très important. Lorsque la largeur de la barre de navigation masquée n'est pas fixe, ou que la largeur est plus grande que l'élément parent, vous ne pouvez généralement réinitialiser la largeur de l'élément enfant qu'à ce moment)
Si vous vous égarez, revenez en arrière ; si vous y allez précipitamment, allez-y doucement. Arrêtez-vous et réfléchissez-y de temps en temps, jetez un œil, réfléchissez-y, puis continuez à marcher.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
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!
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
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
