CSS Sostituisci il testo

“Potresti aver incontrato alcune animazioni sui siti Web, in cui il mandato su un po 'di testo lo sostituisce con un altro. Questa animazione non ha avuto luogo da sola, ma sarebbe un effetto di uno stile usato sul retro del codice. All'interno di HTML, possiamo eseguire questa operazione utilizzando alcune proprietà di styling nel tag in stile CSS. Inoltre, possiamo sostituire il testo di alcuni collegamenti con un altro con il colore sostituito anche. All'interno di questa guida tutorial oggi, guarderemo alcuni esempi HTML per eseguire la sostituzione del testo."

Esempio 01

Iniziamo con l'uso dell'offset "After" per sostituire un testo con un nuovo testo. Per creare una pagina web HTML, utilizzeremo tutti i suoi tag standard. Il primo e il tag principale è il tag HTML e tutti gli altri contenuti dei tag sono arrivati ​​al suo interno. Quindi, dobbiamo assicurarci che l'apertura e la chiusura di questo tag non perda il nostro codice. Abbiamo iniziato questo tag, seguito dal tag "head" che è stato un must per eseguire uno stile di intestazione e altre cose. Abbiamo aggiunto il tag di stile ad esso. Puoi anche provare il tag "Titolo" al suo interno prima del tag di stile per dare alla tua pagina HTML un nome semplice.

All'interno dell'area del corpo della nostra pagina HTML, tutti gli altri elementi verrebbero aggiunti tra l'apertura e la chiusura del tag "corpo", i.e., E . Abbiamo usato il

Tag per aggiungere un paragrafo al nostro corpo della pagina HTML. Questo

Il tag è stato classificato con una classe "sostituire" da utilizzare per lo styling. IL

Il tag viene utilizzato per chiudere questo tag dopo aver aggiunto alcuni dati di testo ad esso. Il tag di stile è stato utilizzato all'interno del tag "head" e la classe ".Sostituisci "è stato usato per aggiungere uno stile al paragrafo di questa pagina. La proprietà di visibilità è impostata su "nascosta" mentre la sua posizione è stata impostata su relativa in base all'inizio di una pagina. L'offset "After" è stato utilizzato alla riga successiva per la particolare classe per cambiare la sua visibilità in "visibile" e posizionare in "assoluto". Ciò significa che dopo il testo originale, il nuovo testo sarà visibile e la sua posizione sarà assoluta.

Il margine superiore e sinistro è stato impostato su 0, mentre la proprietà del contenuto viene utilizzata per aggiungere qualche altro testo al posto del testo originale. A causa della sostituzione, il testo originale sarà nascosto secondo il "visibilità" impostato su "nascosto". Ora possiamo eseguire il nostro codice come è completo.

Ora, abbiamo ottenuto il risultato di Below mostrato nella scheda del browser. Puoi vedere che il testo originale è stato "Sarò sostituito", mentre il testo mostrato è "Sono un nuovo testo ...". Indica che l'uso della proprietà di visibilità a "nascosto" e "visibile" insieme alla proprietà "contenuto" può farti sostituire un testo con un altro.

Esempio # 02

Diamo un'occhiata a un altro esempio di HTML per utilizzare l'offset "dopo" senza la proprietà "visibilità" e vedere se sostituisce il testo o no. Quindi, abbiamo utilizzato gli stessi tag HTML di apertura e chiusura per creare un file HTML standard per l'esecuzione sul browser. All'interno del tag "corpo" di questo codice HTML, abbiamo usato il

Tag per creare un paragrafo nella nostra pagina HTML e ha assegnato una classe "Sostituisci" per la classificazione a livello di styling. Questo paragrafo contiene anche un tag di span insieme al testo in esso per contrassegnare il testo in esso. I tag di intervallo e paragrafo sono chiusi uno dopo l'altro.

Dopo questo, abbiamo chiuso anche l'etichetta del corpo. Il tag di stile utilizza la classe "Sostituisci" per il tag Span per utilizzare la proprietà "Display" come nessuno. Ciò significa che nessun markup verrà applicato al testo all'interno. L'offset "After" è stato utilizzato con la classe "Sostituisci" per aggiungere il "contenuto" della proprietà con un nuovo testo per sostituire il vecchio testo all'interno del tag paragrafo del nostro corpo HTML. Questo codice è ora pronto per l'esecuzione.

Dopo l'esecuzione di questo codice nel browser Chrome tramite il menu del codice Visual Studio "Esegui", abbiamo ottenuto il testo sostituito anziché quello originale nella pagina HTML.

Esempio # 03

All'interno di questo esempio, capirai il metodo per sostituire il testo su Hovering. La parte del corpo di questo codice contiene un semplice tag di intestazione "H1" per aggiungere una dimensione più grande standard di intestazione nella pagina Web HTML al momento dell'esecuzione. Dopo aver chiuso il tag di intestazione come ", Abbiamo aggiunto un tag "div" per creare un nuovo contenitore all'interno della pagina HTML. Questo contenitore conterrebbe un tag di ancoraggio per aggiungere un collegamento ad un certo testo, i.e., L'URL di Google è stato utilizzato per il collegamento. Il tag di intestazione è stato utilizzato per creare un'intestazione della dimensione 2, seguita dal tag di span con testo per il markup. Il tag di intestazione, il tag di ancoraggio e il tag "Div" sono stati completati qui. Quindi, abbiamo chiuso tutti questi 4 tag usando i loro tag di chiusura i.e. ,

, , .

Dopo questo, non abbiamo ancora bisogno di nulla da usare per questa pagina HTML. Quindi, abbiamo chiuso anche il corpo, io.e., usando il tag. Il segno del tag di ancoraggio seguito dall'offset "hover" è stato utilizzato al tag "span" del bambino per impostare il display su nessuno. L'offset "visitato" viene utilizzato per dire che il colore di un collegamento sarebbe verde nelle visite di pagina. L'offset "prima" viene utilizzato su mouse per sostituire il contenuto originale con il nuovo contenuto dopo il mouse, io.e., "Fai clic qui per visitare Google". In bilico sul testo originale, il colore di un nuovo testo verrà modificato in Crimson. Se si preme il tasto a sinistra in bilico sul testo originale senza rilasciare il tasto, l'offset attivo cambierà il colore di un nuovo testo in blu. Lo stile e le etichette della testa sono ora chiuse.

Dopo aver eseguito questo codice tramite Codice VS in Chrome, abbiamo ottenuto un titolo e un link a Google. Il collegamento sottolineato è mostrato in colore verde.

Quando si passa il puntatore del mouse sul testo "Tocca su di me", il suo testo è stato sostituito con uno nuovo e il colore del nuovo testo viene aggiornato anche io.e., cremisi. Quando si tocca il collegamento senza rilasciare il pulsante, cambierà sicuramente il suo colore in blu.

Conclusione

Abbiamo finito con le illustrazioni e la spiegazione del concetto di sostituzione del testo CSS all'interno dello scripting HTML. Abbiamo implementato un totale di 3 esempi in HTML per sostituire un testo con un altro. Per questo, abbiamo discusso dell'uso dell'offset "After" insieme alla proprietà di proprietà, alla proprietà e alla proprietà del contenuto di visibilità. Successivamente, abbiamo anche implementato il metodo per sostituire un testo di un collegamento con un altro testo insieme al suo cambio di colore tramite i tag Hover seguiti dall'offset "prima" e alla proprietà del contenuto.