Comment remplacer les propriétés d'une classe CSS en utilisant une autre classe CSS

Comment remplacer les propriétés d'une classe CSS en utilisant une autre classe CSS

CSS est un langage de programmation de base qui permet à ses utilisateurs d'appliquer divers styles, notamment «le style de police","style de bordure","marge","rembourrage»Et bien d'autres sur les pages Web. Le remplacement CSS est un processus de prédiction de la priorité d'un élément ou d'un style CSS par le navigateur. Plus précisément, l'observation d'une classe sur une autre classe CSS fait référence au remplacement du style dans CSS. En d'autres termes, l'élément précédemment stylé est à nouveau stylé par une autre classe.

Ce message expliquera la méthode pour remplacer les propriétés d'une classe CSS en utilisant une autre classe CSS.

Comment remplacer les propriétés d'une classe CSS en utilisant une autre classe CSS?

Pour remplacer la propriété d'une classe CSS en utilisant l'autre classe CSS, essayez les instructions fournies.

Étape 1: Créez un conteneur div

Tout d'abord, créez un «”Element et attribuez-lui une classe par un nom spécifique.

Étape 2: Ajouter un en-tête

Ensuite, insérez une rubrique en utilisant le «

«Tag entre les balises« div ».

Étape 3: Ajouter un paragraphe

Ajouter une balise de paragraphe "

"Avec le"classe" attribut. La «classe» est attribuée avec deux valeurs consécutives, «le style de police" et "mon contenu". Ensuite, ajoutez le texte entre les balises de paragraphe:


Linuxhint


Linuxhint le meilleur site Web de tutoriels. Il fournit le meilleur contenu sur les différentes catégories, notamment HTML / CSS, JavaScript, Git, Docker, Windows et bien d'autres.



Sortir


Étape 4: En-tête de style

Pour styliser l'en-tête, d'abord, accédez à l'en-tête par le nom de la balise "H1»Et appliquez les propriétés ci-dessous:

H1
Style de police: italique;
Couleur: bleu massif;
Texte-aligne: Centre;


Ici:

    • "le style de police»La propriété est utilisée pour spécifier le style de police italique au texte.
    • "couleur”Est ​​utilisé pour spécifier la couleur du texte.
    • "alignement de texte”Est ​​utilisé pour régler l'alignement du texte horizontalement.

Étape 5: Élément de style «div»

Après cela, style l'élément «div» en accédant à la classe «.contenu de Linuxhint»Et appliquez le«marge" et "style de bordure»Propriétés. La «marge» est utilisée pour ajouter l'espace autour de l'élément défini, et le «style de bordure» est utilisé pour définir le style de bordure comme une crête:

.Linuxhint-Content
marge: 50px;
Style de la frontière: crête;



Étape 6: Style Première classe de «

" Étiqueter

Tout d'abord, accédez au «

"Élément utilisant la classe".le style de police". Ici, appliquez les propriétés mentionnées ci-dessous:

.le style de police
Color en arrière-plan: RVB (192, 240, 129) !important;
Font-Family: «Mansalva», cursive !important;
taille de police: 130%;


L'explication de l'extrait ci-dessus est la suivante:

    • "Couleur de l'arrière plan»La propriété spécifie la couleur d'arrière-plan de l'élément.
    • "!important"Est une règle dans CSS qui est utilisée pour remplacer ou hiérarchiser une propriété sur une autre.
    • "famille de polices»La propriété alloue la police à un élément:



Étape 7: Style "

”Élément utilisant la deuxième classe

Accéder à une autre classe attribuée ".mon contenu" de "

”Element et appliquez le«famille de polices" et "Couleur de l'arrière plan»Propriétés avec différentes valeurs:

.mon contenu
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
Color d'arrière-plan: PowderBlue;


On peut remarquer qu'il n'y a aucun effet sur la sortie et le navigateur priorise les propriétés de la première classe:


Vous avez appris à remplacer les propriétés d'une classe CSS en utilisant un autre CSS.

Conclusion

Pour remplacer la propriété d'une classe CSS à l'aide d'une autre classe CSS, le «!important"La règle est utilisée. Le "!important"Vient après la valeur de la propriété utilisée pour ajouter plus d'importance à une valeur ou remplacer la valeur d'une autre classe. Ce message a démontré la méthode pour remplacer une classe CSS à une autre classe.