lista de estilos CSS (UL)
papel CSS Propiedades de la lista es la siguiente:
- Establecer elemento de la lista diferente se marca como una lista ordenada
- Establecer elemento de la lista diferente se marca como una lista desordenada
- imagen del marcador elemento de la lista Conjunto
lista
En HTML, hay dos tipos de listas:
- Lista desordenada - elementos de la lista están marcados con el gráfico especial (tal como motas negras, cajas pequeñas, etc.)
- Lista ordenada - los elementos de la lista están marcados con números o letras
Con CSS, puede listar el estilo aún más, y puede hacer un marcador de imagen elemento de la lista.
Diverso marcador del elemento de la lista
-Style-type lista de atributos especifica el tipo de marcador de lista de elementos es ::
Ejemplos
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Trate »
Algunos valores son listas desordenadas, y otra parte es una lista ordenada.
A medida que el marcador de imágenes elemento de la lista
Para especificar el marcador de imágenes elemento de la lista, utilice la propiedad list-style-image:
El ejemplo anterior no muestra la misma en todos los navegadores, IE y Opera muestran las etiquetas de imagen que Firefox, Chrome y Safari un poco más alto.
Si desea colocar la misma imagen del logotipo en todos los navegadores, se debe utilizar un navegador de soluciones de compatibilidad, de la siguiente manera
Soluciones de compatibilidad del navegador
También en todos los navegadores, el siguiente ejemplo mostrará la etiqueta de la imagen:
Ejemplos
{
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;
}
Trate »
Ejemplo explicó:
- ul:
- Ajuste el-style-type lista no es para eliminar el marcador de lista de elementos
- Configuración de relleno y 0px margen (compatibilidad del navegador)
- Todo ul li:
- Establecer la dirección URL de la imagen, y la dejó sólo aparece una vez (sin repetición)
- Es necesario para localizar la posición de la imagen (0px izquierda y un 5px vertical)
- Con el atributo padding-left al texto en la lista
Lista - propiedad abreviada
Puede especificar una lista de todas las propiedades en una sola propiedad. Esto se llama una propiedad abreviada.
Utilice la propiedad abreviaturas a la lista, una lista de atributos de estilo se establecen de la siguiente manera:
Si se utiliza el valor de la propiedad abreviada de la orden es:
- list-style-type
- list-style-position (para obtener instrucciones, consulte la siguiente tabla de atributos CSS)
- list-style-image
Si estos valores están perdiendo una de la orden restante todavía está especificado, no importa.
más ejemplos
Todos diferentes marcadores de lista de elementos
Este ejemplo demuestra todos los diferentes marcadores lista CSS artículo.
Todas las propiedades de la lista de CSS
| propiedad | descripción |
|---|---|
| list-style | Abreviación de las propiedades. Para obtener una lista de todas las propiedades se proporciona en un comunicado |
| list-style-image | La imagen está ajustado a firmar una lista de elementos. |
| list-style-position | Establecer la posición en la lista de la lista de elementos marcador. |
| list-style-type | Establecer el tipo de indicador lista de elementos. |