Lista di stile CSS (ul)
ruolo CSS Proprietà elenco è il seguente:
- Impostare elemento di elenco diverso è contrassegnato come un elenco ordinato
- Impostare elemento di elenco diverso è contrassegnato come una lista non ordinata
- immagine Indicatore voce Imposta lista
lista
In HTML, ci sono due tipi di elenchi:
- Elenco non ordinato - gli elementi della lista sono contrassegnati con grafica speciale (come punti neri, piccole scatole, ecc)
- lista ordinata - le voci della lista sono contrassegnati con numeri o lettere
Con i CSS, è possibile elencare lo stile ulteriormente, e può rendere un indicatore un'immagine voce di elenco.
Diverso marcatore elemento della lista
attributo list-style-type specifica il tipo di marcatore voce di elenco è ::
Esempi
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Prova »
Alcuni valori sono liste non ordinate, e un po 'è una lista ordinata.
Come il marcatore immagine elemento della lista
Per specificare il marcatore immagine elemento della lista, utilizzare la proprietà list-style-image:
L'esempio di cui sopra non mostra lo stesso in tutti i browser, IE e Opera visualizzare i tag di immagine rispetto a Firefox, Chrome e Safari un po 'più alto.
Se si desidera inserire la stessa immagine del logo in tutti i browser, è necessario utilizzare un soluzioni di compatibilità del browser, come segue
Soluzioni Browser Compatibility
Anche in tutti i browser, il seguente esempio mostra la tag immagine:
Esempi
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Prova »
Esempio spiegato:
- ul:
- Impostare il list-style-type non è quello di eliminare il marcatore voce di elenco
- Impostazione imbottitura e 0px margine (compatibilità del browser)
- Tutti ul li:
- Impostare l'URL dell'immagine, e la mise appare solo una volta (nessuna ripetizione)
- È necessario individuare la posizione dell'immagine (0px sinistra e un 5px verticale)
- Con l'attributo padding-left al testo nella lista
Lista - proprietà abbreviata
È possibile specificare un elenco di tutte le proprietà di una singola proprietà. Questo si chiama una proprietà scorciatoia.
Utilizzare la proprietà abbreviazioni alla lista, un elenco di attributi di stile sono impostati come segue:
Se si utilizza il valore della proprietà abbreviata dell'ordine è:
- list-style-type
- list-style-position (per le istruzioni, vedere la seguente tabella degli attributi CSS)
- list-style-image
Se questi valori sono mancanti uno dei seguenti ordini rimanente è ancora specificato, non importa.
Altri esempi
Tutti diversi marcatore elemento della lista
Questo esempio dimostra tutte le diverse marcatore lista CSS voce.
Tutte le Proprietà elenco CSS
| proprietà | descrizione |
|---|---|
| list-style | proprietà abbreviata. Per un elenco di tutte le proprietà è previsto in una dichiarazione |
| list-style-image | L'immagine è impostato per firmare un elenco di elementi. |
| list-style-position | Impostare la posizione nella lista marcatore voce dell'elenco. |
| list-style-type | Impostare il tipo di bandiera elemento della lista. |