Seconda riga del rientro CSS

Un foglio di stile a cascata è un codice di stile che viene aggiunto ai tag HTML per migliorare il lavoro e l'aspetto del contenuto di HTML. Tra i molti effetti di CSS, una delle proprietà fondamentali dello styling del contenuto è applicare un foglio di stile al testo, tra cui colore di testo, famiglia, dimensioni e posizione. Una delle proprietà di testo di CSS sarà spiegata in questo articolo. Questa è una proprietà di rientro. Rientro significa lo spostamento del testo da un certo punto a un luogo specifico.

Proprietà di testo

Durante la visualizzazione di alcuni siti Web educativi, devi aver visto tali paragrafi o caselle di testo che iniziano con la prima riga da una distanza di un intero paragrafo, rendendolo più importante e attraente. Questo viene fatto creando la prima riga del testo rientrata. Non solo la prima riga, ma possiamo anche indicare la seconda riga mantenendo intatta la prima linea. Questa proprietà di testo viene presa in pixel o percentuali. La sintassi per il rientro del testo è:

Testo-indent: valore;

Questa proprietà può essere applicata su qualsiasi contenuto HTML. Tuttavia, ora applicheremo questa proprietà sul testo. HTML e CSS sono entrambi i linguaggi della spina dorsale per lo sviluppo frontale e la progettazione di una pagina web. HTML contiene due sezioni di base: sezioni di testa e corpo. Entrambe queste porzioni sono descritte con i tag:

.. .

Tutti i contenuti HTML sono descritti nelle sezioni del corpo. La sezione principale contiene il titolo della pagina web e il CSS se è CSS interno. I tag HTML di base utilizzati in questo articolo saranno spiegati al momento dell'implementazione. Parlando della dichiarazione CSS, abbiamo usato CSS interno tra tre tipi CSS. Le proprietà CSS sono dichiarate all'interno del tag di stile, che viene dichiarato nel tag della testa.

Esistono diversi approcci per rientrare nella seconda riga del paragrafo HTML. Alcuni dei semplici metodi sono spiegati di seguito.

Esempio 1

Innanzitutto, abbiamo usato un esempio per applicare la proprietà CSS di rientro su un testo di paragrafo di HTML. Come mostra il nome dell'articolo, dobbiamo rientrare la seconda riga del testo. In questo esempio, abbiamo applicato la proprietà di rientro in modo che la prima riga del paragrafo rimanga la stessa nel punto in cui era prima. Tuttavia, il paragrafo dalla seconda riga sarà rientrato. Cominciamo con il codice di esempio. Innanzitutto, considera la sezione del corpo, in cui viene utilizzato un semplice tag di paragrafo per applicare il rientro.

Viene dichiarata una semplice intestazione, che non applicheremo alcun effetto. Il tag paragrafo è dichiarato all'interno del div. È un contenitore che mantiene il contenuto di HTML in un punto specifico. Allo stesso modo, qui dichiareremo un div. Una classe è anche dichiarata qui.

In CSS, la progettazione viene eseguita tramite gli ID o le classi. Tutti gli effetti che vogliamo applicare sono scritti all'interno della dichiarazione di classe nel corpo CSS. Nella parte della testa, dobbiamo menzionare il nome nel punto in cui vogliamo applicare questi effetti.

Chiudi anche tutti i tag e il corpo HTML. Una volta dichiarato il contenuto di HTML, un singolo paragrafo e un'intestazione verranno visualizzati quando si esegue la pagina sul sito Web. Useremo il seguente codice CSS per applicare gli effetti su questo.

Dirigendosi verso il tag di stile, un div per la classe è spiegato con le funzionalità che vogliamo applicare a questo contenitore. Viene utilizzato l'indent di testo di -36px, il che significa che la prima riga non sarà rientrata. Tuttavia, la prima riga viene spostata verso sinistra rispetto alle restanti linee di paragrafo. Questo viene fatto dichiarando il lato sinistro del Div Padding 36px. Entrambi i valori sono impostati in unità pixel.

div.UN
Testo -indent: -36px;
imbottitura-sinistra: 36px;

La proprietà di imbottitura è per il contenuto interno, che controlla quello esterno. Questa è la distanza tra il confine di testo e il confine del contenitore div. Ora, salva il codice con l'estensione HTML ed esegui la pagina Web sul browser.

Vedrai una semplice intestazione. Un paragrafo ha la prima linea intatta, ma la seconda e tutte le altre linee vengono spostate verso destra. La proprietà del testo di CSS lo fa.

Esempio 2

La proprietà di testo-indent verrà applicata all'intestazione in questo esempio. Viene dichiarata una semplice intestazione. Successivamente, abbiamo usato il tag paragrafo per aggiungere testo ad esso. L'ID nel contenitore Div verrà applicato all'intero Div proprio allo stesso modo. Gli effetti descritti nella classe sono stati applicati.

All'interno della sezione della testa, un tag di stile conterrà le funzionalità ID. Il div viene dato un margine e la larghezza da applicare. L'ID è dichiarato con un segno di hash con esso.

Per applicare gli effetti sul paragrafo in particolare, dobbiamo menzionare "P" con l'ID. Il bordo sopra il paragrafo è dato con colore e dimensioni. Viene applicato l'effetto di imbottitura. Questa è la distanza tra il paragrafo e l'intestazione. Le due caratteristiche di sinistra sono la dimensione e il peso del testo del paragrafo. Questo sarà senza la caratteristica rientrata del testo. L'intestazione viene applicata con la proprietà indicale del testo di -26 pixel e imbottire l'intestazione verso sinistra con lo stesso valore con un segno positivo.

#Container H2
Testo -indent: -26px;
Imbottitura-sinistra: 26px;

Salva il codice ed esegui il file per esaminare l'output.

Durante l'esecuzione, vedrai che l'intestazione viene visualizzata in modo che la seconda riga dell'intestazione sia rientrata verso la direzione sinistra. Tuttavia, la prima riga rimane la stessa.

Nota: Per fare la seconda riga del testo nel paragrafo o nella testata rientrata, dobbiamo prendere il valore del testo indicato in una direzione negativa. Allo stesso tempo, l'imbottitura del testo dovrebbe essere eseguita nella direzione sinistra con il valore positivo. L'utente dovrebbe confermare che entrambi questi valori dovrebbero essere gli stessi. In entrambi gli esempi, abbiamo applicato lo stesso concetto.

Conclusione

La proprietà CSS rientra per la seconda riga è una caratteristica essenziale del contenuto di testo che viene applicato ai paragrafi e alle intestazioni per discriminare questo testo dagli altri rendendo il testo che fa appello all'utente. I valori di rientro possono essere presi anche in pixel e percentuali. Questa proprietà viene applicata alla prima e alla seconda riga del paragrafo. L'indent di testo della funzione di seconda riga di CSS viene realizzato avendo il valore con un segno negativo e lo stesso valore per l'imbottitura con un segno positivo. La direzione di imbottitura dovrebbe essere presa come lasciata. Abbiamo usato due esempi per elaborare questo concetto indice di testo che sarà sufficiente per migliorare le tue conoscenze riguardo alle proprietà del testo.