Elenco CSS rientro

Un foglio di stile a cascata è una lingua che viene utilizzata per migliorare l'attuale contenuto creato attraverso la lingua HTML. Entrambe le lingue lavorano insieme per formare una pagina web. HTML si occupa di creare e CSS progetta tutti gli elementi di HTML. HTML ha molti contenuti che aiutano a creare una pagina web. In tutti questi, il testo è il contenuto di base utilizzato da ogni pagina Web per visualizzare qualsiasi tipo di informazione. Uno dei contenuti utilizzati per visualizzare il testo sono gli elenchi. In questo articolo, parleremo di elenchi che hanno una proprietà indenziale di testo e di come questa proprietà funziona nell'elenco.

Elenchi CSS:

La dimostrazione verticale dei dati HTML in una forma ordinata o non ordinata è rappresentata attraverso uno speciale contenuto HTML noto come elenchi. Il contenuto scritto all'interno dell'elenco è menzionato con i proiettili. Alla fine, gli elenchi sono divisi in due tipi principali: un elenco ordinato e non ordinato. Se vogliamo fornire la numerazione ai dati, è un elenco ordinato

. I dati con qualsiasi tipo di proiettile senza numeri sono un elenco non ordinato
. Questi due
E
sono responsabili solo per la visualizzazione del tipo di elenco. La semplice sintassi che viene utilizzata per creare un elenco:


• dati



È uno snippet di una pagina web con un elenco non ordinato. Puoi vedere che tutti i dati sono rappresentati formando un piccolo elenco con proiettili che mostra che è un elenco non ordinato.

Proprietà e lista CSS rientra:

Questa è la proprietà applicata al contenuto HTML, principalmente sul testo. Viene utilizzato per spostare il testo dal suo punto originale in un luogo specifico. Questa proprietà viene utilizzata per cercare l'attenzione dell'utente su contenuti specifici. Potresti aver visto alcuni siti Web con paragrafo a partire da una distanza rispetto all'intestazione, rendendolo più importante davanti allo spettatore. La sintassi utilizzata per applicare questa proprietà è semplice. Aggiungiamo solo un parametro di lunghezza a questa proprietà in pixel o con unità percentuali.

Text-indent: lunghezza;

Esempio 1:
Questo esempio tratta la visualizzazione di un elenco di elementi generati come un elenco normale e anche un secondo elenco che contiene elementi sfollati dalla loro posizione originale. Vediamo il codice corporeo HTML per creare un elenco.
Un'intestazione viene aggiunta alla pagina web utilizzando

Tag di intestazione. Quindi, abbiamo usato un elenco ordinato.



1. articolo


2. articolo



Questo elenco ordinato creerà cifre di numerazione predefinita con le voci nei tag dell'elenco. Un'altra intestazione viene dichiarata seguita di nuovo da un elenco ordinato. Una classe di CSS viene dichiarata all'interno del secondo

.

Questo è solo il nome della classe CSS, è dichiarato nella sezione principale del codice HTML. Ogni volta che questo nome di classe viene utilizzato in qualsiasi tag, vengono applicati tutti i filtri o gli effetti menzionati in questa classe nell'istruzione Style.

All'interno della testa, viene assegnato un titolo alla pagina. Un tag di stile viene utilizzato per applicare gli effetti. Questo tipo di stile è noto come CSS interno.

Viene dichiarato un customindent di classe. All'interno della descrizione della classe, non abbiamo usato direttamente la proprietà del testo-indent. In effetti, possiamo rientrare gli elementi dell'elenco utilizzando la proprietà di imbottitura in qualsiasi dimensione. Quindi, poiché vogliamo che l'elenco venga visualizzato con il suo contenuto nella giusta direzione, useremo la proprietà di imbottitura per rientrare nel testo dalla posizione sinistra verso la giusta direzione.

La proprietà di imbottitura è la distanza del contenuto HTML dal bordo specificato del contenuto esterno o della pagina HTML.

Chiudi tutti i tag sulla testa. Salva il file con l'estensione HTML per creare una pagina Web nel browser ogni volta che questo file viene aperto con un browser. E quando lo apriamo nell'editor di testo, visualizzerà solo il codice.

Vedrai che un semplice elenco viene visualizzato senza alcun effetto rientrante perché non abbiamo applicato il nome della classe CSS ad esso. Ma il secondo elenco con un rientro personalizzato viene trascinato verso la giusta posizione. Ciò è dovuto alla proprietà di imbottitura.

Esempio 2:
In questo esempio, stiamo usando lo stesso esempio ma con proprietà CSS diverse per rientrare nel testo nell'elenco. All'interno del tag di stile, la classe CSS ha una proprietà a margine. Questo margine è la distanza del contenuto dal bordo della pagina. In questo caso, abbiamo il testo HTML, quindi il testo all'interno dell'elenco verrà spostato in base al valore.

.customindent
Margine -sinistra: -15px;

In questo esempio, vogliamo che l'elenco sia con il margine sinistro. Quindi, abbiamo preso il valore del margine verso il lato sinistro. Il valore viene preso in un segno negativo per tornare indietro. Se la distanza è stata presa con un segno positivo, l'elenco sarà sul lato destro della pagina.

Questo stile viene nuovamente applicato al secondo elenco che abbiamo creato con una classe di indice personalizzata.

Ora eseguiremo la pagina web per vedere il risultato. Vedrai che l'elenco ordinato è bloccato sul lato più a sinistra della pagina.

Esempio 3:
Questo esempio tratta l'uso di un elenco non ordinato nella pagina Web. All'interno dell'elenco, abbiamo preso 4 file di articoli. In questo esempio, non useremo lo stile CSS attraverso una classe. Non applicheremo la proprietà del testo rientrante all'intero elenco. La singola riga nell'elenco verrà effettuata tramite la proprietà indenziale di testo. Questo verrà fatto utilizzando un'altra proprietà CSS che è una proprietà di "primo tipo".

Questa proprietà si occupa della selezione della prima occorrenza di un elemento in tutti gli stessi contenuti HTML. Ad esempio, questa proprietà influenzerà solo la prima riga della riga, senza menzionare il nome di qualsiasi elenco o la classe all'interno del tag.

Durante la scrittura della dichiarazione di stile nella sezione principale del codice, useremo il

1. Come vogliamo applicare l'effetto sul Li.
   Li: primo tipo
   Endente di testo: 50px;
   Tipo elenco: stella;
   

   Il primo elemento verrà spostato verso destra con una distanza specificata sopra menzionata. E inoltre, abbiamo dato un numero a quell'elemento per la discriminazione.

   Durante l'esecuzione, osserverai che il primo elemento dell'elenco viene spostato nella giusta direzione e il proiettile viene anche definito un numero decimale.

   Conclusione

   Questo articolo mira a descrivere lo scopo e l'uso della proprietà di rientro nell'elenco del contenuto HTML. Iniziamo con una breve spiegazione degli elenchi e dei loro tipi. La proprietà di rientro può essere applicata a uno qualsiasi dei tipi di elenco. Successivamente, abbiamo utilizzato tre esempi di base tra cui l'effetto di imbottitura, il margine e la proprietà del testo influiscono utilizzando la proprietà CSS del primo tipo. Tutti questi esempi mostrano il rientro dell'intero elenco e anche una singola riga dell'elenco.