CSS Testo rientro

Il rientro è definito come lo spazio extra all'inizio della linea. In CSS, l'indent di testo è definito come lo spazio extra all'inizio della prima riga. Utilizziamo la proprietà "Testo-indent" per applicare la rientranza sulla prima riga del paragrafo. Abbiamo impostato il suo valore in "px", "em" o anche in "%". Abbiamo anche impostato un valore negativo per questa proprietà del testo indent. Quando utilizziamo questa proprietà "indenziale di testo" di CSS, la prima riga del blocco o del paragrafo creerà un po 'di spazio all'inizio della linea. Imposterà solo un po 'di spazio all'inizio della prima riga e non influisce su altre linee del paragrafo o del blocco. Non crea spazio sulle altre righe tranne la prima riga. In questo tutorial, utilizzeremo questa proprietà "indenziale di testo" e imposteremo i valori negativi e positivi per il rientro.

Esempio n. 1: per usare questa proprietà "industriale di testo" in CSS, dobbiamo avere S

blocco di dati o paragrafi. Per questo, abbiamo prima il file HTML. In questo tutorial, il software che stiamo utilizzando è il codice Visual Studio. Yocreato puoi utilizzare qualsiasi editor di testo o blocco note per questo. Quando utilizziamo questo software, dobbiamo scegliere la lingua in cui scriveremo il codice. Qui, stiamo selezionando "HTML" come lingua.

Dopo questo, inizieremo a codificare in questo file. Abbiamo anche messo "!"E poi premendo" Invio "otteniamo i tag di base dell'HTML di cui abbiamo bisogno in tutti i codici HTML. Nel corpo, creeremo alcune classi "div" con nomi diversi. All'interno di ogni div, abbiamo creato un paragrafo usando "

"Tag. Stiamo creando tre div con nomi diversi come "a", "b" e "c". All'interno di questi div, abbiamo un paragrafo. Quindi, in questo modo abbiamo creato tre paragrafi qui. Useremo questi tre paragrafi in tutti gli esempi in questo tutorial. Ora andremo al file CSS in cui utilizziamo la proprietà "Indent di testo" e applicheremo il rientro a tutti questi paragrafi. Abbiamo anche collegato il file CSS con questo file HTML nel tag "testa" del codice HTML.

Stiamo usando il nome "Div" "A" e quindi usiamo la proprietà "Indent di testo". Quindi, creerà un rientro sulla prima riga del paragrafo di div "a". La prima riga di questo paragrafo crea uno spazio all'inizio della linea di paragrafo. Stiamo usando i valori in "PX" in questo codice. Impostiamo il valore "80px" per il primo paragrafo Div. Quindi, creerà spazio libero "80px" in prima riga e gestirà il testo di conseguenza. Quindi, andremo a rientrare nel secondo paragrafo Div e usare "B" con il "div". Quindi, utilizzeremo il valore negativo nella proprietà "indenziale di testo". Per il secondo paragrafo, applichiamo il rientro negativo per impostare il testo sul lato sinistro.

Successivamente, useremo l'ultimo paragrafo e applicheremo anche la proprietà "indenziale di testo" per questo. Abbiamo impostato "30px" per il terzo paragrafo del div. Quindi, il testo della prima riga del paragrafo si sposta su "30px" sul lato destro e crea uno spazio "30px" all'inizio della prima riga. Dopo aver completato questo codice, salvalo con ".Estensione del file CSS "e anche con il nome che abbiamo usato nel tag link di" HTML ". Quindi, controlla l'output.

In questo screenshot, puoi vedere che il primo paragrafo crea un po 'di spazio all'inizio della prima riga. Qui, crea uno spazio "80px" in quanto abbiamo usato "80px" come valore della proprietà "indenziale di testo". Ora, guarda il secondo paragrafo, alcuni testi scompaiono dallo schermo mentre si sposta sul lato sinistro a causa della proprietà "indenziale di testo". Indipende da questo paragrafo "-70px" e questo vale solo per la prima riga del paragrafo. Quindi, arriva l'ultimo paragrafo in cui utilizziamo il valore "30px" di questa proprietà. In questo paragrafo, crea spazio di "30px" nella prima riga.

Esempio n. 2:

Abbiamo impostato la "famiglia di font" dell'intestazione su "algerino" e anche in allineamento "centrale". Abbiamo impostato il suo "colore" su "marrone". Quindi, abbiamo capito 2. Per questa intestazione, stiamo usando "Times New Roman" come "Font-Family" e "Purple" come "colore" del carattere. Ora useremo la proprietà "allineate al testo" per tutti i div separatamente. Innanzitutto, abbiamo il "div.a "e stiamo impostando i valori delle proprietà" indiciti di testo "in" EM ". Qui, "10em" è impostato per il primo paragrafo Div e per il secondo Div, stiamo usando un valore negativo come "-5em". E per l'ultimo Div, abbiamo impostato il valore "indenziale di testo" su "2em".

La prima riga del primo paragrafo è rientrata "10em" sul lato destro, il che significa che crea uno spazio "10em" nella prima riga del primo paragrafo. Quindi, applica un valore negativo al secondo paragrafo e sposta la prima riga del secondo paragrafo sul lato sinistro. Quindi, qualche testo non appare qui. E alla prima riga del terzo paragrafo, utilizziamo la rientranza del testo "2em", quindi crea uno spazio o un rientro "2em" nella prima riga.

Esempio # 3:

Stiamo per modellare l'intestazione qui, con il "carattere familiare" impostato su "algerino" e allineare al "centro". Il suo colore è regolato qui su "arancione". Quindi, c'è Intestazione 2, che è impostato su "Calibri" come "Font-Family" e "Green" come il "colore del carattere."Ora, stiamo usando la proprietà" allineate al testo "per ogni div singolarmente. Innanzitutto, abbiamo “Div.a, "e stiamo usando la percentuale"%"per impostare i valori di proprietà" di testo ". Per il primo paragrafo Div, utilizziamo un valore positivo di "20%" e per il secondo Div, utilizziamo un valore negativo di "-10%". Il valore "indenziale di testo" per il Div finale è stato impostato sul "40%"

La prima riga del primo paragrafo applica una rientranza del "20%" che implica che produce una rientranza del "20%" nella prima riga del primo paragrafo. Al secondo paragrafo viene quindi dato un valore negativo e la riga iniziale del secondo paragrafo viene spostata sul lato sinistro impedendo di apparire un po 'di testo. La prima riga del secondo paragrafo si sposta "10%" a sinistra. Utilizziamo anche un rientro del testo "40%" sulla prima riga del terzo paragrafo che si traduce in uno spazio o un rientro del "10%" sulla prima riga sulla prima riga.

Esempio # 4:

Imposta la famiglia del carattere su "algerino" e "centrale" in questa voce. Il suo colore è cambiato in "rosso" in questo caso. Quindi abbiamo anche la direzione 2, che ha "calibri" come "caramella di carattere" e "blu" come "colore" della voce. Ora, utilizziamo l'attributo "allineamento del testo" per ciascun diva separatamente. Innanzitutto, usiamo il "div. a, "e stiamo impostando i valori delle proprietà" indicatore di testo "con il pixel su" 50px ". Per il secondo paragrafo, abbiamo impostato il valore di "indice del testo" in "EM" e anche negativo. Usiamo "-3em" per il secondo paragrafo Div. Per l'ultimo paragrafo Div, impostiamo il valore in "%". Abbiamo impostato "30%" per l'ultimo paragrafo. In questo codice, utilizziamo "PX", "EM" e anche "%".

Nel primo paragrafo, usiamo "50px" nello screenshot. Regola il rientro "50px". Nel secondo paragrafo, abbiamo impostato il valore negativo in "EM" che è "-3em". La prima linea è rientrata sul lato sinistro. Per l'ultimo paragrafo, abbiamo impostato il valore in "%" che è "30%" e puoi vedere che rientra la prima riga del terzo paragrafo sul lato destro.

Conclusione:

Abbiamo creato questo tutorial per elaborare il "indice del testo" in CSS. Qui, abbiamo discusso di ciò che è il testo e come impostare la rientranza in CSS e quale proprietà di CSS abbiamo usato per rientrare nel testo. Come abbiamo discusso in questo tutorial, la proprietà "Indent di testo" viene utilizzata per applicare il rientro al nostro testo e abbiamo usato valori negativi e positivi qui nei nostri esempi. Questa proprietà ha rientrato solo la prima riga del paragrafo.