Un foglio di stile a cascata (CSS) svolge un ruolo vitale nel migliorare il contenuto creato da HTML per formare una pagina Web. Una delle proprietà comunemente usate e di base è aggiungere uno spazio vuoto o una nuova linea tra, prima o dopo il contenuto di HTML. Usando solo l'HTML, il
è responsabile della creazione di interruzioni nel contenuto, ma il CSS ha i suoi modi per modellare l'effetto sugli oggetti nel corpo. In questo articolo, vedremo come, usando CSS, possiamo aggiungere una nuova riga nel codice HTML.

Esempio 1:
Per implementare il fenomeno di una pausa di linea, usiamo un semplice esempio per elaborare il concetto. Un semplice programma dimostra prima i testi HTML senza spaziatura e come sembra usare il testo nel paragrafo o un tag di span senza usare gli spazi vuoti. Prima arriva la sezione del corpo dell'HTML. Un'intestazione

viene aggiunto alla sezione. Quindi, usando due tag di span, usiamo il testo semplice. Un tag di span funziona come il

Tag paragrafo. Chiudi il corpo HTML. Questo tag non contiene il CSS o qualsiasi altro tag di contenuto. Sono dichiarate solo due righe per ottenere l'output desiderato.

Salva il codice del file di testo con un'estensione HTML ed eseguilo nel browser.

Vedrai che vengono visualizzate le due frasi senza interruzione di riga sebbene siano scritte su righe separate. Ma non importa poiché ogni linea di span viene visualizzata sulle stesse righe.

Esempio 2:
Esiste una proprietà CSS applicata al contenuto di HTML per aggiungere le pause in esse. È il carattere di ritorno della carrozza (\ a). È suddiviso in due elementi che sono "prima" e ":: dopo" elementi di pseudo che sono menzionati all'interno delle classi di CSS.

Questo è l'effetto che viene applicato in entrambi gli elementi o utilizzando uno di essi. All'inizio, andiamo a usare un elemento dopo nel testo. Vediamo come funziona.

Nella sezione del corpo, lo stesso contenuto viene utilizzato come un'intestazione, quindi vengono applicati due etichette di span. Questa volta, un ID per il CSS è menzionato all'interno del tag. Questo ID applica tutti gli effetti dichiarati all'interno della parte della testa del corpo HTML. Ora chiudi il corpo. Nella sezione della testa, utilizzare i tag di stile per creare il CSS interno. All'interno dei tag, utilizzare l'ID applicato e seguire il tipo di carattere di ritorno ":: After". All'interno di questa descrizione dell'ID, utilizziamo la proprietà del contenuto che è solo il personaggio "\ a". Non provoca altro che una nuova riga al testo esistente. Usando questo, entrambe le frasi vengono visualizzate su righe separate. Un'altra proprietà scritta nella descrizione è lo "spazio bianco". Questo spazio bianco è sempre preso in un pre-tipo.

#content1 :: dopo
Contenuto: "\ a";
Spazio bianco: pre;

Questo ID di stile influisce sul contenuto di span in modo tale che due frasi non siano visualizzate sulla stessa linea. L'elemento "dopo" provoca una rottura di una linea tra due frasi. Come dichiara il suo nome, l'interruzione è dopo la prima riga.

Salva il codice ed eseguilo nel browser per visualizzare la pagina Web risultante creata.

Lo vedrai in questo modo, abbiamo creato una nuova riga utilizzando una proprietà CSS.

Esempio 3:
In questo esempio, useremo entrambi gli elementi del carattere di ritorno del trasporto. Lascia che la sezione corpore. Questo provoca effetti su entrambi i tag di span. Ci sono solo cambiamenti nei tag di stile della sezione testa. L'ID content1 è lo stesso con l'elemento "dopo" al suo interno.

Ma l'ID content2 ha l'elemento "prima" del carattere con esso.

#content2 :: prima
Contenuto: "\ a";
Spazio bianco: pre;

Come mostra la descrizione dello stile, l'elemento prima viene applicato alla seconda campata. Nel primo intervallo, abbiamo applicato l'ID Conent1. A causa dell'ID content1, lo spazio viene creato dopo la prima campata. Ma a causa dell'ID content2 con l'elemento "prima", la seconda campata ha una nuova riga prima della seconda frase. Ciò è dovuto all'elemento "prima" dichiarato nell'ID content2.

All'esecuzione, vedrai che esiste un divario di una linea vuota tra due frasi. L'effetto "dopo" viene applicato dal primo ID Conten1, mentre l'effetto "prima" viene applicato collettivamente dall'ID Content2.

Esempio 4:
Un altro esempio di una nuova linea CSS è dichiarato qui che prevede l'utilizzo di una proprietà CSS in cui l'effetto dello spazio bianco viene dato un valore del pre-line. Questo valore pre-line crea una gap prima del contenuto HTML a cui viene applicato. Ora consideriamo il seguente esempio:

Nella sezione del corpo dell'HTML, due titoli,

E

, sono dati. Dopo questi titoli, un paragrafo viene dichiarato con ogni parola in una linea separata.

Ora, nella testa, dopo aver dato il titolo alla pagina, viene applicato un CSS interno per avere un tag di stile. All'interno del tag di stile, utilizziamo un tag di paragrafo per applicare il colore del carattere al testo insieme alla proprietà dello spazio bianco.

P
Colore arancione;
Spazio bianco: pre-line;

Questo codice "pre-line" provoca una riga vuota prima dell'inizio del paragrafo.

All'esecuzione, vedrai che lo spazio viene creato prima che il paragrafo sia iniziato.

Esempio 5:
Questo esempio è molto diverso dagli esempi precedenti perché non solo useremo una nuova riga vuota qui, ma aggiungeremo anche il nuovo testo alle nuove righe generate prima. Nella sezione del corpo, vengono create due titoli -

E

. Dopo questi, un tag di paragrafo viene utilizzato per creare il testo a due paragrafi.

All'interno della sezione della testa, utilizziamo un paragrafo per lo scopo di styling.

P :: prima
Colore rosso;
Contenuto: "Linuxhint \ a"
"Articolo in linea sulla linea";
Blocco di visualizzazione;
Spazio bianco: pre

Questo effetto include il colore del carattere e il contenuto che vogliamo aggiungere ad ogni paragrafo dopo l'aggiunta della linea vuota. Alla proprietà dello spazio bianco viene assegnato un valore "pre" per aggiungere uno spazio vuoto prima del paragrafo.

Salva il codice ed esegui il file. Vedrai che prima di ogni paragrafo viene aggiunta una riga vuota e successivamente, il contenuto viene aggiunto dopo lo spazio vuoto.

Conclusione

La nuova riga CSS è una descrizione della creazione di una nuova riga utilizzando alcune funzionalità di CSS dichiarate con qualsiasi funzionalità HTML. Attraverso gli effetti CSS, una nuova linea può essere aggiunta prima, dopo o tra il contenuto di HTML. Abbiamo implementato i diversi esempi per elaborare brevemente il concetto. All'inizio, viene utilizzato un esempio di paragrafo HTML senza spazio. Quindi, usando lo stesso codice, abbiamo aggiunto una proprietà CSS del carattere. Un "carattere di ritorno in carrozza" viene utilizzato per aggiungere nuove linee tra il contenuto che dichiariamo nel corpo HTML. Questo carattere può essere aggiunto direttamente o con il nuovo contenuto da aggiungere.