Lista y extensión propiedades de las hojas de estilo en cascada (CSS)

Listas de estilo con las hojas de estilo en cascada (CSS) son mucho más robustas que las listas de estilo con formato de lista HTML estándar. Con CSS, puede seleccionar fácilmente el tipo de lista para las listas numeradas y con viñetas, ajuste la posición de las balas en relación con el contenido dentro de la lista, e incluso optar por utilizar su propio gráfico para la imagen de bala.

-style-type lista: Para listas ordenadas, establezca el tipo de lista de decimal, menor-romano, superior-romano, menor-alfa, superior-alfa, o ninguno. Al crear listas desordenadas, elija el disco, círculo, o cuadrado Tipo de lista. La ilustración muestra ejemplos de cada uno de estos tipos de listas.

li {-style-type lista: círculo-}

list-style-image: Para utilizar su propia imagen personalizada como una bala, introduzca la ubicación y el nombre del archivo de la imagen deseada como un atributo para la desordenada lista de etiquetas. También puede quitar la parte de bala de la lista de estilo mediante el valor de la propiedad ninguno.

ul {list-style-image: url (images / mybullet.jpg) -}

Para crear una lista con diferentes gráficos para cada elemento de la lista, crear estilos personalizados para cada elemento de la lista y luego agregue cada

etiqueta con el juego clase atribuir, como se ilustra a continuación y se muestra en el siguiente ejemplo de código, lo que también hace que cada elemento de la lista un hipervínculo:

.redarrow {list-style-image: url (redarrow.jpg) -} bluearrow. {list-style-image: url (bluearrow.jpg) -}
Ir a este sitio
Ir a ese sitio

list-style-posición: Con la propiedad de posición, puede colocar la bala en relación con el contenido dentro de cada elemento de la lista. La posición puede ser localizado dentro o fuera del texto. Como se ilustra a continuación, cuando se establece en dentro, el texto se ajusta por debajo de la bala en el margen izquierdo, y cuando establece en afuera, la bala se queda fuera de cualquier texto ajustado, como una sangría francesa.

li {list-style-posición: fuera-}

Con propiedades de extensión, puede cambiar la manera en que el cursor se muestra en diferentes circunstancias, crear saltos de página, y añadir filtros de efectos especiales a ciertos elementos de la página.

Por desgracia, desde sus inicios, muy pocos de ellos son compatibles con los navegadores más populares. Si desea utilizar cualquiera de estos atributos, prueba de ellos en tantos navegadores como sea posible tanto en plataformas Mac y PC para asegurarse de que trabajan y / o no de una manera aceptable.

page-break-antes/-después: Este atributo fuerza un salto de página al imprimir una página, ya sea antes o después del objeto de estilo con este atributo. Escoger izquierda, derecho, siempre, o auto valores para antes y / o después del objeto de estilo deseado, como en el siguiente:

# sidebar3 {page-break-before: always-page-break-after: left;}

cursor: Puede especificar un cursor diferente a aparecer cuando un visitante Mouses sobre un objeto con el estilo con este atributo. Escoge entre punto de mira, texto, espera, por defecto, Ayuda, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, y auto.

También hay 15 nuevas opciones de cursor CSS3, todos los cuales trabajan en la última versión de Firefox, Chrome, Safari, Opera y IE9 +: ninguno, Menú de contexto, celda, -texto vertical, alias, copia, no hay caída, No permitido, ew-resize, ns-resize, noticias-resize, NWSE-resize, col-resize, fila de cambio de tamaño, y todo desplazamiento. Para ver ejemplos de estos cursores en acción, visite Sitepoint.

#helpmenu {cursor: ayudando}

filtro: Se puede elegir entre varios filtros de efectos especiales, incluyendo Alfa, BlendTrans, Blur, Inserción, DropShadow, fliph (flip horizontal), flipv (flip vertical), Glow, Gris, Invertir, Luz, Máscara, revealTrans, Sombra, Ola, y la radiografía. La mayoría de los filtros requieren entrada numérica, como el filtro de la máscara, la cual debe contener el valor hexadecimal del color para la máscara, como en Filtro: Máscara (color = # ffcc33) -.

#details {filtro: convertidores de}

Si bien es cierto que estos filtros pueden hacer algunas cosas interesantes y poco comunes, por mucho tiempo que no han trabajado en alguna navegadores distintos de IE. Para ver un ejemplo de algunos de estos filtros, abra el siguiente enlace dentro de un navegador Internet Explorer: Xentrik. Afortunadamente, muchos de estos filtros se han reinventado como nuevos estilos CSS3 que tienen mucho mejor soporte de los navegadores.