CSS Override Style

introduzione

Potresti aver implementato il concetto di precedenza in molti campi della vita, io.e., dare priorità al tuo lavoro, a casa e alle cose personali. All'interno della programmazione HTML, il browser deve prevedere la priorità degli elementi o delle istruzioni da visualizzare di conseguenza. Questo concetto è noto come "Override CSS". Sembrano esserci varie regole che decidono se uno stile sostituisce un altro in base al tipo di selettore utilizzato per progettare un componente. Utilizzando la tecnica di promozione, possiamo dare la priorità allo stesso tipo di elementi con le stesse proprietà nel file HTML. Quindi, se sei nuovo per lo stile di sovraccarico CSS, questo articolo ti aiuterebbe molto. Diamo un'occhiata ad alcuni degli esempi implementati sul codice VS.

Esempio 1
Cominciamo con il primo esempio per illustrare l'uso dell'oversride per lo styling in HTML con l'aiuto di CSS. All'interno di questo esempio, esamineremo la precedenza principale del foglio di stile in linea e esterno e il CSS utilizzato nel tag di stile. Quindi, abbiamo avviato questa illustrazione con il principale tag "HTML". Il tag principale contiene il tag collegamento e stile al suo interno. Inizia la spiegazione di questo programma dal principale tag "corpo". L'area del corpo comprende cinque titoli per cinque diverse dimensioni, i.e., dal più grande al più piccolo.

Dopo tutte le intestazioni, l'etichetta del corpo è stata chiusa e la chiusura HTML lo segue. Diamo un'occhiata al tag "testa" ora. Abbiamo usato il tag "Title" al suo interno per titolo la pagina HTML come "Stranua Style". Dopo questo, abbiamo utilizzato il tag "link" per fare riferimento al foglio di stile esterno chiamato "Test.CSS "dalla stessa cartella usando la proprietà" HREF ". Dopo questo, abbiamo un tag "stile" di tipo "testo/CSS". Questo tag è stato utilizzato per il gusto di styling dell'area del corpo di questo file HTML. All'interno, abbiamo usato le intestazioni H1, H3 e H5 e specificando la proprietà "colore" per colorarli "marrone". Qui, lo stile e la tag della testa sono vicini.

Ora, guarda il file CSS esterno, "Test.CSS ". Abbiamo usato le intestazioni del corpo, H2 e H4 per lo styling. Il colore di sfondo della proprietà viene utilizzato per assegnare un colore al corpo HTML. La proprietà del colore e del margine-sinistra è stata utilizzata per visualizzare le intestazioni 1 e 4 in viola e impostare margini sinistra di 10 pixel. Il tag di stile nell'HTML contiene colori diversi per tutte le intestazioni, mentre questo file esterno contiene colori diversi per la direzione 2 e 4.

Salviamo il codice e debug questo utilizzando il pulsante del menu "Esegui" dalla barra delle applicazioni del codice Visual Studio. L'output mostra la pagina HTML con il titolo di "Override Style". Le intestazioni 1, 3 e 5 girano marrone, mentre le intestazioni 4 e 5 diventano viola. Questo perché lo stile di tag di stile ha ottenuto la prima precedenza ed è stato annullato dall'HTML anziché da un foglio di stile esterno.

Aggiorniamo il codice ancora una volta. Abbiamo aggiornato il colore per l'intestazione 1, 3 e 5 di questo file HTML all'interno del tag di stile nel tag Head. Il resto sarebbe invariato in questo momento.

All'interno del foglio di stile esterno, abbiamo usato tutte e cinque le intestazioni per il cambiamento di colore e margine a viola e 30 pixel, rispettivamente. Salva questo file CSS e eseguisca il codice.

Questa volta, solo le intestazioni 1, 3 e 5 hanno ottenuto il colore "verde del prato" a causa dell'uso e della precedenza dello stile all'interno del file anziché di un file CSS esterno.

Esempio 2
Abbiamo iniziato questo esempio con il tag HTML seguito dal tag testa e titolo. Il tag corporeo di questo file HTML contiene la singola intestazione 1 da visualizzare sulla pagina Web HTML. Il tag principale del corpo e HTML è stato chiuso qui dopo aver usato gli elementi del corpo. Il tag di stile all'interno dell'etichetta della testa contiene lo stile per l'intestazione 1, i.e., Il colore specificato come "viola". Lo stile e la tag della testa sono vicini qui. Eseguiamo questo codice HTML con il menu "Esegui" seguendo l'opzione "Avvia debug".

L'esecuzione di questo file ha visualizzato una semplice intestazione della dimensione 1 in viola nella nostra nuova scheda browser Chrome come visualizzato di seguito:

Eseguiamo alcuni stili prevalenti in questo file HTML. Quindi, abbiamo specificato la classe “A” per l'interruzione 1 all'interno dell'apertura del tag H1. Inoltre, all'interno del tag di stile, abbiamo usato questa classe "A" per colorare il marrone intestazione, i.e., Utilizzando la proprietà del colore. Salviamo ed eseguiamo questo codice.

Ora, l'output mostra che il colore dell'intestazione è stato aggiornato a Brown. Ciò significa che l'elemento di classe sovrascrive i semplici elementi di stile.

Ora, abbiamo utilizzato un'altra classe all'interno dello stesso tag H1 del corpo HTML di questo file. Il nome della classe è stato specificato come "B" dopo la classe "A". D'altra parte, abbiamo usato la classe "B" per specificare il colore, "Greenne", per dirigere 1.

Dopo aver salvato questo script di aggiornamento HTML, l'abbiamo eseguito e ottenuto il seguente output. L'output mostra che il colore dell'intestazione 1 è stato aggiornato a "prato verde". È la prova che l'elemento di classe può sovrascrivere un altro elemento di classe.

Aggiorniamo di nuovo il codice e utilizziamo l'elemento "ID" all'interno dell'intestazione H1 del codice HTML. Questo "id" può essere usato dopo e prima degli elementi di classe, come abbiamo fatto di seguito. Dopo questo, all'interno del tag di stile, abbiamo specificato il colore "blu" per la direzione 1 usando l'ID "C".

Dopo aver eseguito questo codice aggiornato, abbiamo ottenuto la pagina HTML aggiornata. Il colore di Intestazione 1 è stato aggiornato al blu dal verde del prato. Ciò dimostra che l'elemento "ID" può sovrascrivere lo stile dell'elemento "classe".

Ora useremo lo stile in linea per questo codice HTML e utilizzeremo la proprietà "Color" per trasformare 1 in un colore "hotpink" senza aggiungerlo al tag "stile" esterno. Questo tag in linea in linea è stato utilizzato prima dell'elemento "ID" di intestazione 1.

Dopo aver eseguito questo file HTML aggiornato, abbiamo ottenuto il colore "hotpink" per l'intestazione che ha superato l'elemento "ID".

Usando il "!Attributo importante "insieme a qualsiasi proprietà darebbe a quella proprietà la prima precedenza rispetto ad altre proprietà. Abbiamo usato il “!Attributo "importante" con la proprietà del colore dell'intestazione 1 e ha salvato.

La precedenza è stata data alla proprietà del colore "viola" specificata per "H1".

Conclusione

Questo articolo spiega la precedenza di elementi per dimostrare lo stile di override CSS nel codice HTML. Il paragrafo introduttivo spiega ciò che è prevalente e la precedenza e l'uso di stile che si estende in dettaglio per diversi tipi di selezione utilizzando diverse tecniche di styling. Per questo, abbiamo cercato di implementare diversi esempi contenenti lo stile in linea, schema e foglio di stile esterno. Abbiamo provato diversi tipi di selezione di elementi per principalmente gli stessi elementi per eseguire uno stile di sovraccarico.