Rientro CSS

"Il rientro CSS è la proprietà dei CSS utilizzati nel blocco Div o in qualsiasi contenitore per mostrare la rientranza della prima riga del testo. Quando il rientro CSS non è menzionato con alcuna riga, quindi per impostazione predefinita, è per la prima riga del testo. Prende anche i valori con segni positivi e negativi.

Questa proprietà di rientro può essere applicata a qualsiasi contenuto HTML, ma in questo articolo abbiamo usato il testo per rientrare il testo nella prima riga del paragrafo."

Lavorando sulla proprietà del testo di CSS rientrante

Viene utilizzato per mostrare il numero di spazi vuoti che discriminano tra i paragrafi a partire dalla sinistra o dai margini destro del contenuto esterno che è principalmente div. La proprietà di rientro di CSS rende il testo facile per i programmi da leggere e comprensibili mantenendo il testo a una lunghezza specificata. Questo fa un effetto accattivante per il testo per l'utente.

La sintassi di base utilizzata per la proprietà dell'indent text è:

Text-indent: lunghezza;

Esempio 1

In questo esempio, creeremo una pagina Web utilizzando solo il contenuto di testo HTML sotto forma di intestazioni o paragrafi. Quindi prima, all'interno della sezione del corpo, usa l'intestazione

tag per introdurre una voce. Dopo una pausa
, Ancora una volta, viene utilizzata un'intestazione. Il tag Break crea una riga vuota e salta alla riga successiva per creare nuovi contenuti. Dopo aver dichiarato i titoli, viene creato un div. Un Div è un contenitore HTML importante in quanto è un contenitore che mantiene il contenuto di HTML nel luogo specificato. Qualunque elementi che utilizziamo all'interno del div sono richiesti con una dimensione specifica per mantenere rispettivamente tutti gli elementi di quella dimensione. In questo caso, abbiamo menzionato il nome della classe, che sarà dichiarato nella sezione principale del codice HTML. Tutte le proprietà in stile CSS sono scritte all'interno della classe menzionata che verrà applicata al Div e al contenuto al suo interno.

All'interno del div, useremo semplicemente il testo. Il contenuto di testo semplice può essere utilizzato con o senza i tag di paragrafo.

Dopo la chiusura del tag DIV, viene nuovamente utilizzato un nome intestazione

. Un div sarà dichiarato di nuovo con il nuovo nome di classe che conterrà il CSS per questa classe separatamente. Chiudi anche tutti i tag e il corpo HTML. Ora considera i tag CSS dichiarati nella porzione di testa, rendendolo un CSS interno. Nel CSS, due classi sono dichiarate separatamente; La prima classe contiene un rientro di testo di 50px con una larghezza di div di 650px di lunghezza, questo manterrà il testo in questa lunghezza del div e la prima riga del testo sarà influenzata da questo valore di rientro.

.mytext
Endente di testo: 50px;

Allo stesso modo, per la seconda classe dichiarata per il secondo div, un indice di testo applicato al testo ha un valore negativo. Una lunghezza di larghezza simile viene applicata anche al div.

Ora salva il codice con l'estensione HTML per aprirlo sia come codice HTML nell'editor sia come pagina Web nel browser.

Vedrai che il primo div che ha l'indent text di 50px ha la prima riga del testo che ha spostato l'indennità di 50px dal punto di partenza sinistro. Mentre il secondo div ha 10em, il testo si sposterà verso il lato sinistro rientrato dal valore specificato, facendo nascere le parole della prima riga.

Esempio 2

L'unità utilizzata per il rientro non è sempre nei pixel; Può anche essere utilizzato in percentuali. In questo esempio, il codice corporeo HTML è quasi lo stesso; Solo il nome dell'intestazione è diverso in quanto specificano i nuovi valori in percentuale. Le stesse due classi per il CSS verranno utilizzate anche nel codice.

Muovendosi verso la porzione di testa CSS, il tag di stile ha la classe per contenere un rientro del 20 % di valore e larghezza, come abbiamo fornito nel primo esempio.

.mytext
Testo-indent: 20%;

Allo stesso modo, la seconda classe MyText1 è dichiarata per applicare uno stile al secondo div, questo avrà la stessa larghezza, ma il rientro per il testo è del 40%. Questo aumento dell'indent di testo causerà la spostamento della prima riga del testo nella giusta direzione con una modifica.

Puoi vedere che quando eseguiamo il file HTML sul browser, verrà formata una pagina Web con due paragrafi di testo. Il primo inizia vicino a sinistra, mentre il secondo paragrafo inizia dal centro del div.

Esempio 3

Il terzo e l'ultimo esempio riguarda il settore del testo sospeso. In questo esempio, la prima frase viene spostata in una direzione all'indietro, mentre il resto del paragrafo è ancora nella sua posizione; Lo spostamento ha principalmente un valore negativo in questo caso, per spostare la prima sezione di testo in una direzione sinistra. Considerando il corpo HTML, c'è una singola intestazione e un div contenente il testo. Il contenitore Div ha una classe per modellare il testo al suo interno usando CSS interno.

< div class = mytext >

All'interno del tag di stile nella testa HTML, la classe dichiarata nel tag DIV è dichiarata con le specifiche. Ha un indice di testo di -28px. Ciò significa che la prima riga inizierà con una rientranza di un 28 ° valore negativo, spostando il testo sul lato sinistro. Dato che il valore negativo del testo indente fa il testo verso il lato negativo, lo abbiamo spiegato nel primo esempio, ma a differenza di quell'esempio, in cui la parte in movimento della prima riga non era visibile, qui, l'intera prima frase è apparsa all'interno il div.

.mytext
Testo -indent: -28px;
Imbottitura-sinistra: 28px;

A differenza del text-indent, in quanto viene assunto in un valore negativo, il valore della sinistra di imbottitura è preso in positivo perché l'intero paragrafo si inserirà all'interno di questa dimensione di div; Questo renderà il testo della prima riga più importante verso la direzione sinistra.

Il resto del codice corporeo HTML è lo stesso, con una voce e un div con una classe.

Dopo aver salvato il codice, eseguilo sul browser. Vedrai che la prima riga del testo è verso la direzione sinistra e il resto del paragrafo dalla seconda riga è verso destra.

Conclusione

L'articolo spiega il funzionamento e l'utilizzo della proprietà CSS di rientro del testo nelle pagine Web. Ogni volta che siamo disposti a descrivere qualcosa attraverso un testo sul sito Web, che si tratti del sito Web o di altre informazioni, utilizziamo questa proprietà di rientro per spostare il testo della prima riga in una direzione un po 'destra o sinistra. In questo articolo, abbiamo usato diversi esempi che spiegano il funzionamento di questa proprietà di rientro nella proprietà del testo di una pagina Web, formata utilizzando HTML e CSS insieme.