Selezione utente CSS
Esempio 1
Per cominciare, creiamo un nuovo file nel software, che in questa guida è il codice Visual Studio. Quando creiamo un nuovo file, possiamo scegliere la lingua e selezionare HTML. Il codice HTML deve quindi essere creato. Il codice Visual Studio ci consente di acquisire istantaneamente i tag fondamentali inserendo "!"E quindi facendo clic su" Invio ". Quindi, stiamo approfittando di questa capacità e raccogliendo tutti questi tag fondamentali. Utilizzeremo la proprietà Select utente in CSS e collegheremo questo file al file CSS aggiungendo il tag "link" nel tag HTML. Abbiamo una semplice intestazione e un div in questo codice HTML. Scriviamo anche un po 'di testo all'interno del tag di intestazione "H1" e anche nel tag "Div". Dopo aver completato questo codice, salvalo e procedi al file CSS. Ora applicheremo la proprietà "Select utente" a questi testi nel file CSS.
Stiamo selezionando "RGB" come "colore" dell'intestazione e i valori che stiamo utilizzando qui sono "RGB (16, 100, 8)" che rappresenta il colore dell'ombra "verde". Quindi, "Algerian" è selezionato come "Font-Family" e decoramo anche questa intestazione mettendo "sottolineate" qui. Aggiungiamo questa "sottolineatura" utilizzando la proprietà "decorazione del testo". Selezioneremo questo testo di intestazione facendo doppio clic su di esso perché non utilizziamo alcuna proprietà "selezione utente" per questa intestazione. Il valore predefinito di questa proprietà è "Auto". Abbiamo semplicemente impostato "nessuno" come valore di questa proprietà "Select utente" per l'elemento "Div".
Posizioneremo la proprietà "WebKit-User-Select" poiché Chrome supporta questo prefisso e impostare il suo valore su "Nessuno". Quindi, utilizziamo il "MS-User-Select" che viene utilizzato per specificare il valore della parola chiave che è "nessuno". Significa che l'utente non sarà in grado di selezionare il testo scritto all'interno del div. Usiamo anche solo la proprietà "Select utente" e la impostiamo su "Nessuno". Ora, quando questo elemento Div viene visualizzato sullo schermo, l'utente non selezionerà l'elemento Div nel testo.
L'output di questo codice mostra che non esiste un testo selezionato in questa immagine in quanto non consente all'utente di selezionare il testo del div. Ciò è dovuto al valore "nessuno" della proprietà "Select utente".
Esempio 2
Abbiamo una semplice intestazione e un div qui. Includiamo anche un po 'di testo nel tag di intestazione "H1" e nel tag "Div". Ora applicheremo la proprietà "User Select" su questo testo Div.
Abbiamo scelto "RGB" come "colore" dell'intestazione e i numeri che abbiamo scelto sono "RGB (87, 23, 4)", che è il colore dell'ombra "marrone". Quindi, scegliamo "algerino" come "famiglie di carattere", e aggiungiamo anche "sottolineatura" a questa intestazione. Per l'elemento "Div", abbiamo semplicemente impostato la proprietà "Select utente" su "Auto". Stiamo usando la proprietà "WebKit-User-Select" qui perché Chrome consente solo questo prefisso e cambia il suo valore in "Auto".
Quindi, utilizziamo "MS-User-Select" per specificare il valore delle parole chiave, che è "automatico" in questo caso. Stiamo inoltre indicando che l'utente sarà autorizzato a selezionare il testo facendo doppio clic su di esso che viene messo all'interno del div. Abbiamo anche impostato la proprietà "User Select" su "Auto". Quando questo elemento Div appare sullo schermo, l'utente selezionerà questo testo facendo doppio clic su. Quindi, stiamo impostando il valore "20px" per la "dimensione del carattere" del "Div" e "Times New Roman" come "Font-Family".
Quando l'output di questo codice rende sullo schermo, sembra il primo screenshot. Possiamo selezionare questi testi facendo doppio clic su di essi poiché abbiamo usato la parola chiave "auto" come valore della proprietà "Select utente".
Nel secondo screenshot, puoi anche vedere il testo selezionato mentre selezioniamo il testo facendo doppio clic su di esso. Il testo selezionato è evidenziato in questo screenshot.
Esempio 3
Il file HTML è lo stesso di sopra. Sostituiamo solo l'elemento Div con il paragrafo e cambiamo il testo scritto all'interno di questo tag di paragrafo.
Allineiamo tutti gli elementi del "corpo" nel "centro". Quindi, usa "RGB (96, 18, 199)" come "colore" dell'intestazione e la "famiglia di carattere" è lo stesso degli esempi sopra. Dato che Chrome accetta solo il prefisso "WebKit", quindi utilizziamo la proprietà "WebKit-User-Select" e impostiamo il suo valore su "testo". Il valore del "MOZ-User-Select" è impostato su "Testo". Quindi, utilizziamo "MS-User-Select" per specificare il valore della parola chiave, che è "testo". La proprietà "User Select" è anche impostata su "testo", il che significa che l'utente può selezionare il testo utilizzando questa proprietà. Non impedisce all'utente di selezionare il testo. La "dimensione del carattere" di questa "P" è "22px" e "Calibri" è selezionata qui come "Font-Family" e scegli "Green" come "Colore" del testo ".
L'output mostra che selezioniamo il testo da qualsiasi luogo in cui desideriamo mentre impostiamo il valore della proprietà per selezioni utente su "testo" in questo esempio.
Esempio 4
In questo codice, modifichiamo il testo che è scritto all'interno del contenitore Div. Ora applicheremo anche la proprietà "User Select" in questo esempio ma con un valore diverso.
Tutti gli elementi del "corpo" sono allineati nel "centro". Quindi, usa "Maroon" come "colore" dell'intestazione e la "famiglia di carattere" è lo stesso degli esempi precedenti. Impostamo la parola chiave "All" per il valore di "WebKit-User-Select", "Moz-User-Select", "MS-User-Select" e anche per la sintassi standard che è "Select utente". Quando utilizziamo "tutto" come valore di questa proprietà "Select utente", selezionerà il testo con un singolo clic del mouse anziché un doppio clic. Quindi, saremo in grado di selezionare il testo Div con un solo clic e non è necessario fare doppio clic su di esso per selezionare questo testo. Utilizziamo anche "23px" per la "dimensione del carattere" e modelliamo questo testo in stile font "corsivo" e "audace" questo testo con l'aiuto della proprietà "font-weight".
L'output prima della selezione del testo viene visualizzata nel primo screenshot. Stiamo fornendo l'altro screenshot in cui selezioniamo l'intero testo con un solo clic del mouse.
In questo screenshot, il testo viene selezionato. Oppure possiamo dire che il testo è evidenziato quando utilizziamo un singolo mouse clic su questo testo. Non abbiamo bisogno di fare doppio clic sul testo per selezionarlo perché utilizziamo la parola chiave "all" e seleziona anche l'intero testo come puoi vedere nello screenshot seguente.
Conclusione
Questa guida è stata creata per aiutarti a comprendere la proprietà CSS "Select utente". Abbiamo superato questo argomento in dettaglio e abbiamo esaminato molti esempi di come abbiamo usato la proprietà "Select utente" nel codice CSS. Abbiamo già trattato come utilizzare la proprietà Select utente per il controllo di come l'utente seleziona il testo o se l'utente selezionerà il testo o meno. Abbiamo anche coperto come impostare i valori per questa proprietà e abbiamo spiegato in dettaglio tutti i valori di questa proprietà. Abbiamo messo insieme una guida completa per te, in cui abbiamo incluso il codice e spiegazioni dettagliate su come usarlo, nonché i risultati.