Colore di selezione CSS
Sintassi
:: selezione// Dichiarazione CSS
Esempio n. 1: modifica del colore del testo sulla selezione
Dobbiamo scrivere del codice HTML per modificare il colore del colore o dello sfondo del testo quando viene selezionato il testo. Qui, per eseguire questi esempi, stiamo usando il codice Visual Studio. Di conseguenza, apriamo il nuovo file in questo software e prendiamo la lingua "HTML", risultante in un file HTML. Quindi iniziamo a codificare in questo file. Nel nostro file HTML, stiamo creando un "Div" chiamato "D1", e quindi abbiamo un titolo e un paragrafo in questo "Div", come mostrato di seguito. Ora, il nostro obiettivo è quello di modificare il colore del testo selezionato usando il selettore "selezione", quindi per questo, ci sposteremo sul codice CSS in cui utilizziamo questo selettore "selezione" e controlliamo il funzionamento nell'output.
Stiamo utilizzando il selettore della "selezione" qui, così come alcune modifiche nel colore del testo. Seguiremo la sintassi di questo selettore di "selezione", e qui puoi vedere che usiamo due colpi prima del selettore di selezione e posizionano "H1" all'inizio, poiché vogliamo applicare il colore dato sull'intestazione quando il Il testo dell'intestazione è selezionato dall'utente. Qui, stiamo usando "H1" e poi posizioniamo due due punti ":" e dopo questo, stiamo usando "selezione".
Ora, all'interno di questo, utilizziamo la proprietà di CSS, che è la proprietà "colore", e questa proprietà cambierà il colore del testo quando viene selezionata. Quindi, stiamo cambiando il testo selezionato "colore" in "blu" per la direzione 1. Dopo questa intestazione, abbiamo anche un paragrafo, quindi vogliamo anche cambiare il "colore" del testo del paragrafo sulla selezione. Stiamo mettendo "P" qui, e di nuovo utilizziamo il selettore "selezione" per cambiare il testo del colore in un colore "rosso" quando è selezionato.
Controlliamo come funziona e il colore del testo cambia sulla selezione nelle uscite seguenti. Nel primo output, puoi vedere che il colore di testo selezionato dell'intestazione appare blu mentre lo impostiamo nel selettore di selezione sopra nel codice CSS.
Ora arriva il secondo output e qui puoi vedere il colore del testo di paragrafo selezionato che appare "rosso" qui. Il testo nero viene convertito in rosso quando selezioniamo il testo di questo paragrafo.
Esempio n. 2: modifica del colore di sfondo del testo sulla selezione
Usiamo lo stesso codice HTML in questo esempio, ma qui nel CSS, cambieremo il colore dello sfondo del testo quando è selezionato. In questo esempio useremo anche il selettore "selezione".
Usiamo "H1" e poi posizioniamo "::" e il selettore "selezione". Come, qui, dobbiamo cambiare il colore di sfondo del testo alla selezione, quindi stiamo usando la proprietà "color sfondo" qui. Quando utilizziamo questa proprietà all'interno del selettore di selezione, cambierà il colore di sfondo del testo in base al colore che abbiamo selezionato qui. Nel codice, puoi vedere che usiamo "giallo" come colore di sfondo del testo selezionato per l'intestazione. Quindi cambieremo il colore dello sfondo del testo del paragrafo. Quindi, utilizziamo di nuovo il selettore "selezione" con "p" e dichiariamo la proprietà "color sfondo" e sceglia il colore "grigio" per lo sfondo di testo di questo paragrafo.
Il colore di sfondo del testo di intestazione è visto qui nell'output di seguito. Quando selezioniamo l'intestazione, il colore di sfondo cambia da bianco al giallo. Questo cambiamento è solo a causa del selettore "selezione" che abbiamo usato.
La modifica del colore di sfondo del testo selezionato nel paragrafo è mostrata di seguito e si può notare che il suo colore di sfondo cambia a un colore "grigio" quando viene selezionato questo testo.
Esempio n. 3
Qui, abbiamo fatto un'intestazione, un paragrafo e un div in questo esempio e applicheremo lo stesso colore di sfondo e il colore del testo quando selezioniamo qualsiasi testo da tutti questi.
In questo esempio, non abbiamo dato alcun nome di selettore prima del doppio colon "::" del selettore "selezione" perché vogliamo dare lo stesso colore di testo e il colore di sfondo a tutti questi testi quando è selezionato, che si tratti di un Intestazione o un paragrafo. Abbiamo semplicemente messo il selettore "::" e "selezione" e quindi usiamo due proprietà qui.
L'output mostra che entrambi i colori cambiano sulla selezione del testo. Il colore di sfondo appare giallo e il colore del testo appare rosso quando selezioniamo il testo. Inoltre, lo stesso nel caso della direzione.
Esempio # 4
Nel codice seguente, stiamo creando più paragrafi utilizzando nomi diversi e quindi applicando diversi colori dello sfondo o il testo a ciascun paragrafo quando selezioniamo qualsiasi testo del paragrafo. Tutti questi stili saranno fatti in CSS.
IL ".p1 "viene utilizzato qui, che definisce il nome del paragrafo, quindi utilizziamo il selettore" selezione "con questo. Stiamo cambiando il colore del carattere di "P1" in "blu", quindi diventa blu quando è selezionato. Quindi, abbiamo "p2" e cambiamo il suo "colore di sfondo" in "giallo" quando viene selezionato il testo. Ora arriva "P3" usiamo di nuovo il selettore "selezione" e cambiamo il suo "background" in "rosso."
Dopo questo, "P4" è menzionato con il selettore "Selezione" e stiamo cambiando il "colore di sfondo" e il "colore" del carattere a "viola" e "bianco", rispettivamente. Stiamo cambiando il "text-shadow" di "p5" in "1px 1px rosso". Creerà un'ombra di colore "rosso" quando selezioniamo il testo di "P5". Quindi usiamo "P6" con questo selettore "selezione" e utilizziamo lo "sfondo", che cambia lo sfondo e imposta il nero apparirà "nero" quando il suo testo viene selezionato. Organizziamo anche tutti questi paragrafi senza selezione, quindi usiamo "corpo" e tutte le proprietà che usiamo qui verranno applicate a tutti i paragrafi e intestazioni. Usiamo la "famiglia del carattere" e lo impostiamo su "sans-serif", quindi tutto il testo appare in questo formato. Abbiamo impostato la sua "altezza della linea" su "1.45 "e" color sfondo "a" rosa leggera."Usiamo anche" imbottitura "qui, che è selezionato come" 1em ". La "dimensione del carattere" per tutti i paragrafi è "20px" e anche il "font-peso" si imposta come "audace" per tutti.
Stiamo mostrando due o tre screenshot di output qui e puoi notare la modifica del colore del carattere e il colore di sfondo quando viene selezionato il testo. Questo è tutto a causa del selettore "selezione".
Conclusione
In questa guida, abbiamo esplorato il concetto del selettore di "selezione". Come abbiamo discusso che questo selettore di "selezione" viene utilizzato per modificare il colore del carattere e anche il colore di sfondo quando l'utente seleziona il testo su cui viene applicato il selettore "selezione". Abbiamo elaborato più esempi qui in cui abbiamo utilizzato questo selettore di "selezione". Spero che capirai questo selettore di "selezione" dopo aver esaminato questa guida, e questo ti aiuterà molto nei tuoi progetti o siti Web.