lista de estilos CSS (ul)
papel CSS Propriedades da lista é a seguinte:
- Definir item da lista diferente é marcada como uma lista ordenada
- Definir item da lista diferente é marcado como uma lista não ordenada
- item image marcador lista constante
lista
Em HTML, existem dois tipos de listas:
- Desordenadas lista - itens da lista são marcados com o gráfico especial (como pintas pretas, pequenas caixas, etc.)
- lista ordenada - os itens da lista são marcados com números ou letras
Com CSS, você pode listar o estilo ainda mais, e pode fazer um marcador de imagem lista item.
Diferente marcador item da lista
atributo list-style-type especifica o tipo de marcador item da lista é ::
Exemplos
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
tente »
Alguns valores são listas não ordenadas, e alguns é uma lista ordenada.
À medida que o marcador de imagem lista de itens
Para especificar o marcador imagem lista de itens, use a propriedade list-style-image:
O exemplo acima não mostra o mesmo em todos os navegadores, IE e Opera exibir as tags de imagem do que Firefox, Chrome e Safari um pouco maior.
Se você deseja colocar a mesma imagem do logotipo em todos os navegadores, você deve usar uma solução de compatibilidade do navegador, como se segue
Soluções de compatibilidade do navegador
Também em todos os navegadores, o exemplo a seguir irá mostrar a tag de imagem:
Exemplos
{
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;
}
tente »
Exemplo explicou:
- ul:
- Defina o list-style-type não é para eliminar o marcador item da lista
- Definir estofamento e 0px margem (compatibilidade do navegador)
- Todos li ul:
- Defina o URL da imagem, e defini-lo só aparece uma vez (sem repetição)
- Você precisa localizar a posição da imagem (0px esquerda e um 5px vertical)
- Com atributo padding-esquerda para o texto na lista
Lista - propriedade estenográfica
Você pode especificar uma lista de todas as propriedades em uma única propriedade. Isso é chamado de propriedade estenográfica.
Use abreviaturas propriedade à lista, uma lista de atributos de estilo são definidos da seguinte forma:
Se você usar o valor da propriedade abreviada de a ordem é:
- list-style-type
- list-style-position (para obter instruções, consulte o seguinte tabela de atributos CSS)
- list-style-image
Se esses valores estão faltando uma das ordens restante ainda está especificado, não importa.
mais exemplos
Todos marcador de item de lista diferente
Este exemplo demonstra todos os diferentes marcador CSS lista item.
Todas as propriedades da lista de CSS
| propriedade | descrição |
|---|---|
| list-style | propriedade estenográfica. Para obter uma lista de todas as propriedades é fornecido em um comunicado |
| list-style-image | A imagem está definido para assinar uma lista de itens. |
| list-style-position | Definir a posição na lista do marcador item da lista. |
| list-style-type | Defina o tipo de bandeira item da lista. |