So überschreiben Sie die Eigenschaften einer CSS -Klasse mit einer anderen CSS -Klasse

CSS ist eine grundlegende Programmiersprache, die es seinen Benutzern ermöglicht, verschiedene Stile anzuwenden, einschließlich “Schriftstil","Grenzstil","Rand","PolsterungUnd viele weitere auf Webseiten. CSS -Überschreibung ist ein Prozess der Vorhersage der Priorität eines Elements oder eines CSS -Stylings durch den Browser. Insbesondere bezieht sich eine Überschreibung einer Klasse in einer anderen CSS -Klasse auf die Übersteuerung des Stylings in CSS. Mit anderen Worten, das zuvor gestaltete Element wird wieder von einer anderen Klasse gestaltet.

In diesem Beitrag werden die Methode zur Übersteuerung der Eigenschaften einer CSS -Klasse unter Verwendung einer anderen CSS -Klasse erklärt.

So überschreiben Sie die Eigenschaften einer CSS -Klasse mit einer anderen CSS -Klasse?

Um die Eigenschaft einer CSS -Klasse durch die Verwendung der anderen CSS -Klasse zu überschreiben, probieren Sie die angegebenen Anweisungen aus.

Schritt 1: Erstellen Sie einen DIV -Behälter

Erstellen Sie zuerst eine “Element und zuweisen Sie ihm eine Klasse nach einem bestimmten Namen.

Schritt 2: Überschrift hinzufügen

Fügen Sie als nächstes eine Überschrift ein, indem Sie das verwenden

"Tag zwischen den" Div "-Tags.

Schritt 3: Absatz hinzufügen

Fügen Sie ein Absatz -Tag hinzu "
" zusammen mit "Klasse”Attribut. Die "Klasse" wird mit zwei aufeinanderfolgenden Werten zugeordnet "Schriftstil" Und "mein Inhalt”. Fügen Sie dann den Text zwischen den Absatz -Tags hinzu:

LinuxHint

LinuxHint Die besten Tutorials -Website. Es bietet die besten Inhalte über verschiedene Kategorien, einschließlich HTML/CSS, JavaScript, Git, Docker, Windows und vieler mehr.

Ausgang

Schritt 4: Stilüberschrift

Um die Überschrift zuerst zu stylen, greifen Sie zunächst auf die Überschrift mit dem Tag -Namen zu “H1”Und wenden Sie die folgenden Eigenschaften an:

H1
Schriftstil: kursiv;
Farbe: solide blau;
Text-Align: Mitte;

Hier:

- “SchriftstilDie Eigenschaft wird verwendet, um dem Text einen kursiven Schriftstil anzugeben.
- “FarbeWird verwendet, um die Farbe des Textes anzugeben.
- “Textausrichtung”Wird verwendet, um die Ausrichtung des Textes horizontal festzulegen.

Schritt 5: Stil „Div“ Element

Danach stylen Sie das "Div" -Element, indem Sie auf die Klasse zugreifen ".LinuxHint-In-Intent”Und wenden Sie die“ anRand" Und "GrenzstilEigenschaften dazu. Der „Rand“ wird verwendet, um den Raum um das definierte Element umzusetzen, und der „Grenzstil“ wird verwendet, um den Grenzstil als Ridge zu definieren:

.LinuxHINT-CONTENT
Rand: 50px;
Grenzstil: Ridge;

Schritt 6: Stil Erstklasse von “

" Schild

Erstens zu "auf die" zu "

"Element mit der Klasse".Schriftstil”. Wenden Sie hier die unten erwähnten Eigenschaften an:

.Schriftstil
Hintergrundfarbe: RGB (192, 240, 129) !wichtig;
Schriftfamilie: 'Mansalva', Kursiv !wichtig;
Schriftgröße: 130%;

Die Erklärung des oben gegebenen Snippets lautet wie folgt:

- “HintergrundfarbeEigenschaft gibt die Hintergrundfarbe des Elements an.
- “!wichtigIst eine Regel in CSS, die verwendet wird, um eine Eigenschaft über eine andere zu überschreiben oder zu priorisieren.
- “SchriftfamilieDie Eigenschaft verteilt die Schriftart für ein Element:

Schritt 7: Stil “

Element mit der zweiten Klasse

Zugriff auf die andere zugewiesene Klasse “.mein Inhalt" von "

Element und wenden Sie das anSchriftfamilie" Und "HintergrundfarbeEigenschaften mit unterschiedlichen Werten:

.mein Inhalt
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;
Hintergrundfarbe: Powderblue;

Es ist zu bemerken, dass es keinen Einfluss auf die Ausgangs- und Browser -Priorität der Eigenschaften der ersten Klasse hat:

Sie haben gelernt, wie man die Eigenschaften einer CSS -Klasse mit einem anderen CSS überschreibt.

Abschluss

Um die Eigenschaft einer CSS -Klasse mit einer anderen CSS -Klasse zu überschreiben, die “, die“!wichtig”Regel wird verwendet. Der "!wichtig”Kommt nach dem Eigenschaftswert, der verwendet wird, um einem Wert mehr Bedeutung zu verleihen oder den Wert einer anderen Klasse zu überschreiben. Dieser Beitrag hat die Methode gezeigt, um eine CSS -Klasse in eine andere Klasse zu überschreiben.