Come sovrascrivere le proprietà di una classe CSS usando un'altra classe CSS

Dante Palumbo

CSS è un linguaggio di programmazione di base che consente ai suoi utenti di applicare vari stili, tra cui "stile carattere","stile del bordo","margine","imbottitura"E molti altri su pagine Web. Il prevalente CSS è un processo per prevedere la priorità di un elemento o uno stile CSS da parte del browser. Più specificamente, la prevalente di una classe su un'altra classe CSS si riferisce alla prevalenza dello styling in CSS. In altre parole, l'elemento precedentemente in stile è di nuovo disegnato da un'altra classe.

Questo post spiegherà il metodo per sovrascrivere le proprietà di una classe CSS usando altre classi CSS.

Come sovrascrivere le proprietà di una classe CSS usando un'altra classe CSS?

Per sostituire la proprietà di una classe CSS utilizzando l'altra classe CSS, prova le istruzioni fornite.

Passaggio 1: crea un contenitore di div

Innanzitutto, crea un ""Elemento e assegnarlo una classe con un nome specifico.

Passaggio 2: aggiungi l'intestazione

Successivamente, inserire un'intestazione utilizzando il "

"Tag tra i tag" div ".

Passaggio 3: Aggiungi paragrafo

Aggiungi un tag di paragrafo "
" insieme con il "classe"Attributo. La "classe" è assegnata con due valori consecutivi, "stile carattere" E "il mio contenuto". Quindi, aggiungi il testo tra i tag di paragrafo:

Linuxhint

Linuxhint Il sito Web dei migliori tutorial. Fornisce il miglior contenuto di diverse categorie, tra cui HTML/CSS, JavaScript, Git, Docker, Windows e molti altri.

Produzione

Passaggio 4: intestazione di stile

Per modellare l'intestazione, prima, accedi al nome Tag di Intestazione "H1"E applica le proprietà di seguito elencate:

H1
Font in stile: corsivo;
Colore: blu solido;
Testo-align: centro;

Qui:

- "stile carattere"La proprietà viene utilizzata per specificare lo stile del carattere in corsivo al testo.
- "colore"Viene utilizzato per specificare il colore del testo.
- "allineamento"Viene utilizzato per impostare l'allineamento del testo in orizzontale.

Passaggio 5: elemento "div" stile

Successivamente, modella l'elemento "Div" accedendo alla classe ".contento Linuxhint"E applicare il"margine" E "stile del bordo"Proprietà ad esso. Il "margine" viene utilizzato per aggiungere lo spazio attorno all'elemento definito e lo "stile di confine" viene utilizzato per definire lo stile di confine come cresta:

.LinuxHint-Content
Margine: 50px;
Border in stile: Ridge;

Passaggio 6: Stile prima classe di "

"Tag

Innanzitutto, accedi al "

"Elemento usando la classe".stile carattere". Qui, applica le proprietà di seguito:

.stile carattere
Background-color: RGB (192, 240, 129) !importante;
Font-Family: "Mansalva", corsivo !importante;
Font-size: 130%;

La spiegazione dello snippet sopra dato è la seguente:

- "colore di sfondo"La proprietà specifica il colore di sfondo dell'elemento.
- "!importante"È una regola in CSS che viene utilizzato per sovrascrivere o dare la priorità a una proprietà rispetto a un'altra.
- "famiglia di font"La proprietà alloca il carattere per un elemento:

Passaggio 7: stile "

"Elemento usando la seconda classe

Accedere all'altra classe assegnata ".il mio contenuto" Di "

"Elemento e applicare il"famiglia di font" E "colore di sfondo"Proprietà con valori diversi:

.il mio contenuto
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;
Background-color: Powderblue;

Si può notare che non vi è alcun effetto sull'output e sul browser dà la priorità alle proprietà di prima classe:

Hai imparato a sovrascrivere le proprietà di una classe CSS usando un altro CSS.

Conclusione

Per sovrascrivere la proprietà di una classe CSS usando un'altra classe CSS, il "!importante"La regola viene utilizzata. IL "!importante"Arriva dopo il valore della proprietà utilizzato per aggiungere più importanza a un valore o sovrascrivere il valore di un'altra classe. Questo post ha dimostrato il metodo per sovrascrivere una classe CSS a un'altra classe.