Style de remplacement CSS

Introduction

Vous avez peut-être mis en œuvre le concept de priorité dans de nombreux domaines de la vie, je.e., prioriser votre travail, votre maison et vos choses personnelles. Dans la programmation HTML, le navigateur doit prédire la priorité des éléments ou des instructions pour afficher en conséquence. Ce concept est connu sous le nom de «recharge CSS». Il semble y avoir diverses règles qui décident si un style remplace un autre en fonction du type de sélecteur utilisé pour concevoir un composant. En utilisant la technique primordiale, nous pouvons prioriser le même type d'éléments avec les mêmes propriétés dans le fichier HTML. Donc, si vous êtes nouveau dans le style CSS Override, cet article vous aiderait grandement. Regardons certains des exemples implémentés sur VS Code.

Exemple 1
Commençons par le premier exemple pour illustrer l'utilisation du remplacement pour le style en HTML à l'aide de CSS. Dans cet exemple, nous examinerons la priorité primordiale de la feuille de style en ligne et de style externe et le CSS utilisé dans la balise de style. Nous avons donc lancé cette illustration avec la balise «HTML» principale. La balise de tête contient le lien et la balise de style. Démarrez l'explication de ce programme à partir de la balise principale «Body». La zone du corps comprend cinq titres pour cinq tailles différentes, je.e., le plus grand à.

Après tous les titres, l'étiquette corporelle a été fermée et la fermeture HTML le suit. Jetons un coup d'œil à la balise «tête» maintenant. Nous avons utilisé la balise «Title» pour titre la page HTML comme «style de remplacement». Après cela, nous avons utilisé la balise «lien» pour référencer la feuille de style externe nommée «Test.CSS »du même dossier en utilisant la propriété« HREF ». Après cela, nous avons une balise de «style» de type «texte / css». Cette balise a été utilisée pour le style de la zone corporelle de ce fichier HTML. À l'intérieur, nous utilisons des titres H1, H3 et H5 et spécifiant la propriété «Couleur» pour les colorer «marron». Ici, le style et la tête sont proches.

Maintenant, regardez le fichier CSS externe: «Test.CSS ». Nous avons utilisé les titres de l'élément corporel, H2 et H4 pour le style. La couleur d'arrière-plan de la propriété est utilisée pour attribuer une couleur au corps HTML. La propriété de couleur et de marge-gauche a été utilisée pour afficher les en-têtes 1 et 4 en violet et régler les marges gauche de 10 pixels. La balise de style dans le HTML contient différentes couleurs pour tous les en-têtes, tandis que ce fichier externe contient différentes couleurs pour le cap 2 et 4.

Enregistrons le code et déboguez-le à l'aide du bouton de menu «Exécuter» dans la barre des tâches du code Visual Studio. La sortie affiche la page HTML avec le titre «Style Override». Les titres 1, 3 et 5 deviennent marron, tandis que les titres 4 et 5 deviennent violets. En effet.

Mettons à jour le code une fois de plus. Nous avons mis à jour la couleur de la tête 1, 3 et 5 de ce fichier HTML dans la balise de style dans la balise de tête. Le reste serait inchangé en ce moment.

Dans la feuille de style externe, nous utilisons les cinq titres pour le changement de couleur et de marge en violet et 30 pixels, respectivement. Enregistrez ce fichier CSS et relâchez le code.

Cette fois, seuls les en-têtes 1, 3 et 5 ont obtenu la couleur «verte de la pelouse» en raison de l'utilisation et de la priorité du style intra-fichier au lieu d'un fichier CSS externe.

Exemple 2
Nous avons commencé cet exemple avec la balise HTML suivie de la tête et de la balise de titre. La balise corporelle de ce fichier HTML contient le titre unique 1 à afficher sur la page Web HTML. La balise principale du corps et du HTML a été fermée ici après avoir utilisé des éléments du corps. La balise de style dans la balise de tête contient le style pour le cap 1, i.e., la couleur spécifiée comme «violet». Le style et la tête sont proches ici. Exécutons ce code HTML avec le menu "Exécuter" suivant l'option "Déboguer".

L'exécution de ce fichier a affiché une rubrique simple de la taille 1 en violet dans notre nouvel onglet Chrome Browser comme affiché ci-dessous:

Performons quelques styles primordiaux dans ce fichier HTML. Nous avons donc spécifié la classe «A» pour la tête 1 dans l'ouverture de la balise H1. De plus, dans la balise de style, nous avons utilisé cette classe «A» pour colorer le brun de ruban, je.e., en utilisant la propriété couleur. Enregistrons et exécutons ce code.

Maintenant, la sortie montre que la couleur de l'en-tête a été mise à jour en brun. Cela signifie que l'élément de classe remplace les éléments de style simples.

Maintenant, nous utilisons une autre classe dans la même balise H1 du corps HTML de ce fichier. Le nom de classe a été spécifié comme «B» après la classe «A». D'un autre côté, nous utilisons la classe «B» pour spécifier la couleur, «Gree Green», pour la tête 1.

Après avoir enregistré ce script de mise à jour HTML, nous l'avons exécuté et obtenu la sortie suivante. La sortie montre que la couleur de l'attache 1 a été mise à jour vers «Gree Green». C'est la preuve que l'élément de classe peut remplacer un autre élément de classe.

Mettons à jour le code à nouveau et utilisons l'élément «ID» dans le cap H1 du code HTML. Cet «identifiant» peut être utilisé après et avant les éléments de classe, comme nous l'avons fait ci-dessous. Après cela, dans la balise de style, nous avons spécifié la couleur «bleu» pour la tête 1 en utilisant l'ID «C».

Après avoir exécuté ce code mis à jour, nous avons obtenu la page HTML mise à jour. La couleur de la tête 1 a été mise à jour en bleu de Lawn Green. Cela montre que l'élément «ID» peut remplacer le style d'élément «classe».

Maintenant, nous utiliserons le style en ligne pour ce code HTML et utiliserons la propriété "Couleur" pour transformer 1 en une couleur "hotpink" sans l'ajouter à la balise "style" externe. Cette balise de style en ligne a été utilisée avant l'élément «ID» de la tête 1.

Après avoir exécuté ce fichier HTML mis à jour, nous avons obtenu la couleur «hotpink» pour l'en-tête qui a remplacé l'élément «ID».

En utilisant le "!L'attribut important »avec toute propriété donnerait à cette propriété d'abord la priorité par rapport à d'autres propriétés. Nous avons utilisé le «!Attribut important »avec la propriété couleur du titre 1 et l'a enregistrée.

La priorité a été donnée à la propriété de couleur «violet» spécifiée pour le «H1».

Conclusion

Cet article explique la priorité des éléments pour démontrer le style de remplacement CSS dans le code HTML. Le paragraphe d'introduction explique ce qui est en détail. Pour cela, nous avons essayé de mettre en œuvre différents exemples contenant le style de feuille de style en ligne, contour et externe. Nous avons essayé différents types d'éléments sélecteurs pour principalement les mêmes éléments pour effectuer un style de remplacement.