CSS - Elenchi

Gli elenchi sono molto utili per trasmettere una serie di punti numerati o puntati. Questo capitolo ti insegna come controllare il tipo di elenco, la posizione, lo stile, ecc., Utilizzando i CSS.

Abbiamo le seguenti cinque proprietà CSS, che possono essere utilizzate per controllare gli elenchi:

  • Il list-style-type consente di controllare la forma o l'aspetto del marker.

  • Il list-style-position specifica se un punto lungo che va a capo su una seconda linea deve allinearsi con la prima linea o iniziare sotto l'inizio del marcatore.

  • Il list-style-image specifica un'immagine per l'indicatore anziché un punto o un numero.

  • Il list-style serve come scorciatoia per le proprietà precedenti.

  • Il marker-offset specifica la distanza tra un marker e il testo nell'elenco.

Vedremo ora come utilizzare queste proprietà con esempi.

La proprietà del tipo di elenco

La proprietà list-style-type consente di controllare la forma o lo stile del punto elenco (noto anche come marker) nel caso di elenchi non ordinati e lo stile dei caratteri di numerazione negli elenchi ordinati.

Ecco i valori che possono essere utilizzati per un elenco non ordinato:

Sr.No. Valore e descrizione
1

none

N / A
2

disc (default)

Un cerchio pieno
3

circle

Un cerchio vuoto
4

square

Un quadrato pieno

Ecco i valori, che possono essere utilizzati per un elenco ordinato:

Valore Descrizione Esempio
decimale Numero 1,2,3,4,5
zero iniziale decimale 0 prima del numero 01, 02, 03, 04, 05
alfa inferiore Caratteri alfanumerici minuscoli a, b, c, d, e
alfa superiore Caratteri alfanumerici maiuscoli A, B, C, D, E
romano minuscolo Numeri romani minuscoli i, ii, iii, iv, v
maiuscolo Numeri romani maiuscoli I, II, III, IV, V
greco inferiore L'indicatore è in greco inferiore alfa, beta, gamma
latino inferiore Il marcatore è un latino minuscolo a, b, c, d, e
latino superiore Il marcatore è il latino superiore A, B, C, D, E
ebraico Il marcatore è la tradizionale numerazione ebraica  
armeno Il contrassegno è la tradizionale numerazione armena  
georgiano L'indicatore è la tradizionale numerazione georgiana  
cjk-ideographic Il marker sono semplici numeri ideografici  
hiragana Il marker è hiragana a, i, u, e, o, ka, ki
katakana Il marker è katakana A, I, U, E, O, KA, KI
hiragana-iroha Il marker è hiragana-iroha io, ro, ha, ni, ho, lui, a
katakana-iroha Il marker è katakana-iroha I, RO, HA, NI, HO, HE, TO

Ecco un esempio:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Produrrà il seguente risultato:

La proprietà list-style-position

La proprietà list-style-position indica se il marcatore deve apparire all'interno o all'esterno della casella contenente i punti elenco . Può avere uno dei due valori:

Sr.No. Valore e descrizione
1

none

N / A
2

inside

Se il testo va su una seconda riga, il testo andrà a capo sotto il marcatore. Apparirà anche rientrato nel punto in cui il testo sarebbe iniziato se l'elenco avesse un valore esterno.
3

outside

Se il testo va su una seconda riga, il testo sarà allineato con l'inizio della prima riga (a destra del punto elenco).

Ecco un esempio:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Produrrà il seguente risultato:

La proprietà list-style-image

L' immagine in stile elenco consente di specificare un'immagine in modo da poter utilizzare il proprio stile di punto elenco . La sintassi è simile alla proprietà background-image con le lettere url che iniziano il valore della proprietà seguite dall'URL tra parentesi. Se non trova l'immagine data, vengono utilizzati i punti elenco predefiniti.

Ecco un esempio:

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Produrrà il seguente risultato:

La proprietà in stile elenco

Lo stile elenco consente di specificare tutte le proprietà dell'elenco in una singola espressione. Queste proprietà possono essere visualizzate in qualsiasi ordine.

Ecco un esempio:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Produrrà il seguente risultato:

La proprietà marker-offset

La proprietà marker-offset consente di specificare la distanza tra il marker e il testo relativo a quel marker. Il suo valore dovrebbe essere una lunghezza come mostrato nel seguente esempio:

Sfortunatamente, questa proprietà non è supportata in IE 6 o Netscape 7.

Ecco un esempio:

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Produrrà il seguente risultato: