Come utilizzare al meglio gli elenchi CSS?



Questo articolo ti introdurrà agli elenchi CSS e ti aiuterà a capire come funziona lo stile degli elenchi CSS con una dimostrazione.

Gli elenchi CSS sono molto utili per raggiungere un insieme di punti numerati o puntati. Questo articolo ti mostrerà come controllare il tipo, la posizione e lo stile di utilizzando CSS. I seguenti puntatori saranno trattati qui,

Quindi iniziamo allora,





Elenchi CSS

Proprietà CSS

Esistono cinque diverse proprietà CSS in cui è possibile utilizzarlo per controllare gli elenchi:

  • List-style-type: ci permette di controllare la forma o l'aspetto del marker.
  • List-style-position: specifica che è necessario un punto lungo per andare a capo su una seconda riga o deve allinearsi con la prima riga o iniziare con il marker.
  • List-style-image: specifica che un'immagine per il marker deve essere aggiunta o resa più attraente piuttosto che i punti elenco o numerati.
  • Stile elenco: mostra la scorciatoia per le proprietà precedenti.
  • Marker-offset: specifica la distanza tra il marker e il testo inserito nella lista.

Qui gli elenchi comunemente usati sono: list-style-type e list-style-position. È stato spiegato di seguito



override e sovraccarico in java

Andando avanti con questo articolo sugli elenchi CSS

La proprietà del tipo di elenco

Nella proprietà del tipo di stile di elenco ti consente di controllare la forma e lo stile dei punti elenco o dell'indicatore nel caso di elenco non ordinato. Nel caso di elenco ordinato si tratta di caratteri di numerazione.

Di seguito la tabella che rappresenta per gli elenchi non ordinati:



Valore Descrizione
Nessuna N / A
Disco È riempito nel cerchio. (Predefinito)
Cerchio È un cerchio vuoto.
Piazza È riempito nella piazza.

Di seguito la tabella che rappresenta per gli elenchi ordinati:

Valore Descrizione Esempio
Decimale È un numero1,4,3
Zero iniziale decimale 0 prima del numero effettivo01, 04, 03
Alfa inferiore Sono caratteri alfanumerici minuscoli.a, b, c, d
Alfa superiore Sono caratteri alfanumerici maiuscoli.A, B, C, D
Minuscolo romano Si tratta di numeri romani minuscoli.i, ii, iii, iv, v
Maiuscolo Sono numeri romani maiuscoli.I, II, III, IV, V
Greco inferiore Marker è in greco inferiorealfa, gamma
Latino inferiore Marker è in latino minuscoloa, b, c, d
Latino superiore Il pennarello è in latino superioreA, B, C, D

Andando avanti con questo articolo sugli elenchi CSS

Elenchi CSS: programma di esempio

 
  • Giava
  • Pitone
  • Angolare
  • Giava
  • Pitone
  • Angolare
  1. Giava
  2. Pitone
  3. Angolare
  1. Giava
  2. Pitone
  3. Angolare
  1. Giava
  2. Pitone
  3. Angolare

Produzione

Output - Elenchi CSS - Edureka

Andando avanti con questo articolo sugli elenchi CSS

La proprietà list-style-position

Valori dei marker per la proprietà In list-style-position

Nella proprietà list-style-position mostra che il marker deve apparire all'interno o all'esterno della casella contenente i punti elenco. Questo può avere uno dei due valori:

Valore Descrizione
Nessuna N / A
Dentro In questo caso, se il testo va nella seconda riga, il testo andrà a capo sotto il marcatore e mostrerà anche dove sarebbe iniziato il testo se gli elenchi avessero un valore all'esterno.
al di fuori In questo caso, se il testo va nella seconda riga, il testo sarà allineato con l'inizio della prima riga.

Esempio:

 
  • Matematica
  • Scienze sociali
  • Fisica
  • Matematica
  • Scienze sociali
  • Fisica
  1. Matematica
  2. Scienze sociali
  3. Fisica
  1. Matematica
  2. Scienze sociali
  3. Fisica

Produzione

Questo ci porta alla fine di questo articolo sugli elenchi CSS.

Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.

Hai domande per noi? Per favore menzionalo nella sezione commenti dell'articolo e ti risponderemo.