CSS leggi solo
Esempio 01
Iniziamo con il primo esempio di utilizzo degli attributi di sola lettura CSS nel codice HTML. Abbiamo iniziato questo primo esempio con il formato standard dei tag HTML. A partire dal tag di apertura HTML, ha seguito l'apertura della testa e dello stile. All'interno del tag di stile, abbiamo disegnato il corpo della nostra pagina HTML. Per un po ', diamo un'occhiata al corpo di questo codice HTML prima. Abbiamo aggiunto un totale di 2 paragrafi nel corpo della pagina web HTML. I paragrafi contengono semplici testi al loro interno. Entrambe le aperture del paragrafo sono seguite dal loro testo,
Tag per aggiungere una rottura del collegamento nella pagina web e il tag per aggiungere alcuni elementi di input alla pagina web.
Entrambi i tag di input contengono l'attributo "Valore" con il valore "Leggi e scrivi la casella di testo" e "Casella di testo di sola lettura". Inoltre, il secondo tag di input del secondo paragrafo contiene l'attributo "sola lettura" al suo interno. Dopo questo, entrambi i tag di input contengono lo stile inline tramite il tag di stile utilizzato al loro interno. Entrambe le caselle di testo di input saranno di altezza 30px e larghezza 250px. I tag di paragrafo sono chiusi qui, insieme al tag corporeo del codice HTML. All'interno del tag di stile, abbiamo disegnato il tag del paragrafo che contiene il titolo di sola lettura, i.e., Seconda casella di testo. Lo sfondo per la particolare casella di testo di sola lettura è stato impostato su rosso arancione. Questo riguarda lo stile e l'etichetta della testa. Questo codice è ora completo e pronto per essere eseguito sul browser Chrome tramite il codice Visual Studio.
Dopo l'esecuzione di questo codice, abbiamo ottenuto le due caselle di testo con due paragrafi nella nuova scheda del nostro browser. La prima casella di testo è la casella di testo di lettura e.e., Puoi scriverlo e leggere qualunque cosa tu abbia scritto. D'altra parte, la casella di testo rosso-rosso-arancione di sola lettura può essere vista solo e non è modificabile.
Esempio 02
Iniziamo con un altro esempio di HTML per creare elementi di sola lettura usando lo stile CSS. All'interno di questo codice, abbiamo aggiunto lo stesso tag insieme al tag, seguito dai tag principali della testa e del corpo. Il tag corporeo di questo semplice codice contiene un semplice testo al suo interno senza l'uso di alcun tag. Dopo questo testo, abbiamo utilizzato il tag per creare alcuni elementi dinamici come il testo nella nostra pagina web HTML. Questa casella di testo di input è stata classificata con la classe "DisablePoIntevents". L'elemento di input è stato chiamato "Input" con il valore "testo di sola lettura". Lo stile in linea è stato utilizzato per impostare l'altezza di 30px e la larghezza di 250px per questa casella di testo.
Il corpo della nostra pagina HTML è ora completo e ora esamineremo il tag di stile di questo codice HTML. Abbiamo usato la classe "DisablePoIntevents" del tag "input" per modellarlo. Gli eventi puntatore della proprietà non sono stati impostati su nessuno. Il colore di sfondo per la casella di testo è stato impostato su hotpink. Si tratta dello stile della pagina web HTML. Salviamo ed eseguiamolo all'interno del codice Visual Studio seguito dal browser.
Dopo aver eseguito questo codice, la scheda browser ci mostra il semplice testo seguito dalla casella di testo rosa. Dopo aver fatto clic sull'area di testo di testo, non siamo in grado di scrivere nulla. Questo perché abbiamo usato gli eventi puntatori correttamente impostati su nessuno nel tag di stile.
Esempio 03
Diamo un'occhiata all'ultimo ma non ultimo esempi di questo articolo. All'interno di questo articolo, renderemo un elemento scrivibile mentre l'altro è lettura dall'uso di alcune proprietà. Questo script HTML è stato avviato con il tag HTML seguito dal tag Head contenente un lungo elenco di proprietà di styling all'interno del suo tag di stile. Il tag corporeo di questo script HTML contiene la proprietà "Fieldset" qui, raggruppa gli elementi simili in un set e li modella di conseguenza. Questo elemento del campo contiene il tag legenda e il tag DIV. Abbiamo usato la proprietà contentyEdibile impostata su "True" per questo tag, i.e., La sua didascalia sarebbe modificabile e utilizzava la didascalia "Informazioni sulla spedizione dell'ordine dei clienti" in essa.
Il tag DIV contiene una nuova textErae al suo interno che sarà identificata dall'ID "C_ADDRESS" seguito dal suo nome "C_ADDRESS", e lo impostiamo in sola lettura. Questa area di testo contiene informazioni di testo al suo interno che sono solo leggi e non possono essere modificabili. Il tag textArea insieme al contenitore Div è stato completato qui. Abbiamo chiuso anche il tag Fieldset qui, io.e., che tiene la sezione div al suo interno. Il corpo della nostra pagina HTML è stato completato qui, quindi abbiamo chiuso il corpo e il tag HTML.
Il tag di stile del tag principale principale ha utilizzato molte proprietà per gli elementi del corpo. Abbiamo impostato la larghezza, i margini e la famiglia dei caratteri di tutto il corpo di questa pagina HTML tramite l'uso della parola chiave "corpo". L'imbottitura e i margini sono stati impostati per l'elemento del campo, i.e., contenente altri elementi dentro di sé. L'elemento Legend ha utilizzato la proprietà a colori per impostare il colore di una didascalia su bianco con lo sfondo nero e anche un po 'di imbottitura. L'elemento del contenitore di Div interno viene utilizzato per impostare i margini, la visualizzazione e la proprietà di giustificare il contenuto. L'elemento textrea all'interno di questo contenitore è stato disegnato con l'uso di proprietà display, familiari, dimensioni del carattere, imbottitura, larghezza, larghezza, selezione dell'utente, altezza e ridimensionamento.
La proprietà di selezione dell'utente per l'area di testo e il ridimensionamento non è stata impostata su nessuno, i.e., scatola non modificabile né ridimensionabile. L'offset Hover e Focus è stato utilizzato per texarea per utilizzare lo sfondo di colore bianco su Hovering e Focus. Per i tag di sola lettura di TextArea, abbiamo impostato la scatola-Shadow su nessuno e il colore di sfondo su bianco con 0 bordi. Questo è tutto su questo codice. Esemiamolo ora.
L'output ha mostrato il campo con la didascalia "Informazioni sulla spedizione dell'ordine del cliente" insieme a un contenitore contenente un testo all'interno della sua texarea.
Puoi vedere che la didascalia del campo è modificabile, mentre il testo può essere copiato e non è modificabile.
Conclusione
Il paragrafo introduttivo di questo articolo riguarda l'uso del selettore di lettura CSS nei codici HTML e spiega il suo utilizzo. Insieme a ciò, abbiamo discusso di un totale di tre diversi esempi per rendere semplice un elemento semplice tramite l'uso di proprietà diverse sull'uso di un selettore lettura, i.e., Offset readonly, Utilizzo della proprietà Events e l'uso del valore di offset contenti all'interno del tag elemento particolare.