Pre -tag CSS
Esempio 01:
Iniziamo con il primo esempio del nostro articolo. Dobbiamo iniziare questo esempio di codice HTML con l'uso del tag di base "HTML". Il tag principale continua con l'uso di un tag del titolo in esso, io.e. "CSS pre". Per comprendere completamente lo script HTML, dobbiamo prima guardare la sezione del corpo della nostra pagina web. L'intestazione della dimensione 1 è inizializzata all'interno del corpo. Successivamente, un elemento "div" viene lanciato per creare una nuova sezione e aggiungere altri elementi ad esso. Questa sezione Div contiene un'intestazione della dimensione 2. Dopo l'intestazione, viene utilizzato un tag di span per creare una nuova intervallo nella sezione "Div". Questa campata contiene un lungo dati di testo in esso.
Dopo tutte queste frasi, il tag di span è seguito da vicino dalla chiusura del tag "Div". Il corpo della nostra pagina HTML è completato. Dopo questo, dobbiamo dare un'occhiata allo stile CSS di questo codice HTML all'interno del tag di stile. L'elemento span è usato per modellarlo di conseguenza. L'attributo "spazio bianco" viene utilizzato con il valore "pre". L'attributo del valore "pre" viene utilizzato qui per preservare tutti gli spazi e le interruzioni della linea che l'elemento "span" contiene al suo interno. Successivamente, la famiglia dei caratteri è impostata su Monospace e la proprietà del display assegna il valore del "blocco". La dimensione del carattere è impostata su 20 pixel con il colore marrone. Mentre il colore di sfondo è impostato su "bisque". Ci sono altre famiglie di carattere usate nello stile per essere utilizzate da questa durata. Il tag principale è completo e possiamo eseguire il nostro codice con il codice VS.
L'output per questa pagina HTML all'interno del browser Chrome è riportato nella seguente immagine. Puoi vedere che la pagina ha creato una nuova sezione e ha aggiunto un elemento span al suo interno. L'elemento span contiene alcune righe come contenuto mentre la linea si interrompe e gli spazi sono tutti conservati a causa dell'uso dell'attributo "pre" come valore per la proprietà "spazio bianco" di CSS.
Esempio 02:
All'interno dell'esempio precedente, abbiamo dato un'occhiata all'uso dell'attributo "pre" come valore della proprietà dello spazio bianco. Ora lo usiamo come tag nel file HTML. Iniziamo questo esempio con lo stesso formato di tag HTML, testa e corpo. All'interno del tag del corpo di questo codice di esempio, utilizziamo la semplice intestazione della dimensione 1 seguita dal tag "pre" contenente un contenuto di testo molto grande in esso. Questo contenuto contiene interruzioni di linea e spazi tra le parole.
Successivamente, utilizziamo un'altra intestazione della dimensione 1 per affermare che il pre-elemento contiene la larghezza e l'altezza fissa. L'elemento "div" viene utilizzato qui per creare una nuova sezione dopo l'intestazione. Il tag di stile viene utilizzato all'interno del tag di apertura "div" per modellare la sezione "div" a una larghezza di 300 pixel, overflow impostato su auto, altezza di 200 pixel e un colore di sfondo di verde chiaro. Questa sezione "Div" contiene un tag "pre" al suo interno per visualizzare una serie di linee in modo abbastanza diverso invece di usare alcune righe di testo come contenuto. Questo contenuto di tag "pre" stile viene visualizzato nella seguente immagine. Il pre-tag e il tag "div" sono chiusi qui.
Successivamente, chiudiamo i tag "corpo" e "html" perché questo codice non contiene alcuna stile più delle basi che già abbiamo fornito in linea. Questo codice è pronto per essere eseguito nel codice Visual Studio utilizzando l'opzione "Esegui".
L'output di questo codice HTML è mostrato di seguito nella seguente immagine. Sta chiaramente mostrando l'uso del pre-tag standard sulle semplici righe di testi contenenti gli spazi. Le interruzioni visualizzano il testo del contenuto come è senza un singolo cambiamento di carattere. Inoltre, l'uso della larghezza fissa e dell'altezza per la sezione "div" non impedisce al tag "pre" di visualizzare i suoi dati così com'è. Dopo l'intestazione 2, lo sfondo verde con la barra di scorrimento mostra gli stessi dati di stile specificati con il tag "pre".
Esempio 03:
Facciamo il nostro ultimo esempio di questo articolo contenente un pre-tag in esso. Il codice HTML inizia con lo stesso formato - tag HTML e il tag principale che segue il tag "Titolo" per dare a una pagina HTML un nuovo nome. Quindi, l'uso di un tag del corpo per aggiungere alcuni elementi da visualizzare sullo schermo del browser. Dopo aver usato il tag di testa, utilizziamo l'intestazione della dimensione 1 nel corpo di una pagina HTML. Il tag figura viene utilizzato prima dell'utilizzo del tag "pre". Il pre-tag è disegnato con lo sfondo marrone, il colore del testo bianco, una larghezza di 600 pixel, un'imbottitura di 10 pixel e una dimensione del carattere di 16 pixel tramite lo stile in linea.
Aggiungiamo il segno meno e maggiore della pagina HTML usando i caratteri delle parole chiave come LT, GT e la forma di una mucca creata da alcuni caratteri speciali insieme ad alcuni testi. Il pre-tag è ora completo e abbiamo inizializzato il tag "FIGCAPTION" per indicare la forma che abbiamo formato all'interno del pre-tag. L'ID per il tag FIGCAPTION è specificato come "Caption di mucca" e contiene 2 righe di dati con alcuni spazi e rotture di linea. Il tag figura, il tag corpore e i tag HTML sono chiusi dopo. Usiamo questo codice nel codice VS per eseguirlo.
L'uscita mostra che l'intestazione è separata dalla sezione "div" separata. Questa sezione div contiene una forma di mucca con uno sfondo marrone e la didascalia data alla fine di questa figura simile all'immagine. Gli spazi vengono rimossi dalla didascalia.
Conclusione
Questo articolo riguarda l'uso dei tag pre all'interno del codice HTML in diversi modi per consentire le pause e gli spazi della linea per qualsiasi motivo. Abbiamo provato alcuni esempi per dimostrare il suo uso nel modo più semplice e migliore possibile. Abbiamo provato a utilizzare la parola chiave "pre" come valore attributo della proprietà dello spazio bianco all'interno di uno dei nostri esempi. All'interno del resto degli esempi, l'abbiamo provato come un tag separato per dimostrare il suo funzionamento in modo più chiaro ed efficiente.