Video: Galería de imágenes con diversos tamaños - object fit css 2024
Lists estilo con hojas de estilo en cascada (CSS) son mucho más robustos que las listas con estilo con formato HTML de lista estándar. Con CSS, puede seleccionar fácilmente el tipo de lista para las listas numeradas y con viñetas, establecer la posición de las viñetas con respecto a los contenidos dentro de la lista e incluso elegir usar su propio gráfico para la imagen con viñetas.
list-style-type: para las listas ordenadas, establezca el tipo de lista en decimal, bajo-romano, superior-romano, inferior-alfa, superior-alfa, o ninguno. Al crear listas desordenadas, elija el tipo de disco, círculo o lista cuadrada. La ilustración muestra ejemplos de cada uno de estos tipos de listas.
li {list-style-type: circle;}
list-style-image: Para usar su propia imagen personalizada como viñeta, ingrese la ubicación y el nombre de archivo de la imagen deseada como una atributo para la etiqueta de la lista desordenada. También puede eliminar la parte de viñeta del estilo de la lista utilizando el valor de propiedad none.
ul {list-style-image: url (images / mybullet. Gif);}
Para crear una lista con diferentes gráficos para cada elemento de la lista, cree estilos personalizados para cada elemento de la lista y luego añada cada
. redarrow {list-style-image: url (redarrow. gif);}. bluearrow {list-style-image: url (bluearrow. gif);}
- Ir a este sitio
- Ir a ese sitio
list-style-position: con la propiedad de posición, puede colocar la viñeta relativa al contenido dentro de cada elemento de la lista. La posición se puede ubicar dentro o fuera del texto. Como se ilustra a continuación, cuando se establece en el interior, el texto se ajusta debajo de la viñeta a lo largo del margen izquierdo, y cuando se establece en el exterior, la viñeta permanece fuera de cualquier texto envolvente, como una sangría francesa.
li {list-style-position: outside;}
Con las propiedades de extensión, puede cambiar la forma en que el cursor se muestra en diferentes circunstancias, crear saltos de página y agregar filtros de efectos especiales a ciertos elementos en la página.
Desafortunadamente, desde su inicio, muy pocos de ellos son compatibles con los navegadores más populares. Si desea utilizar alguno de estos atributos, pruébelos en tantos buscadores como sea posible en plataformas Mac y PC para asegurarse de que funcionan y / o fallan de una manera aceptable.
page-break-before / -after: este atributo fuerza un salto de página al imprimir una página, ya sea antes o después del diseño del objeto con este atributo. Elija los valores izquierdo, derecho, siempre o automático para antes y / o después del objeto con estilo deseado, como se muestra a continuación:
# sidebar3 {page-break-before: always; page-break-after: left;}
cursor: puede especificar un cursor diferente para que aparezca cuando un visitante pasa sobre un objeto que tiene un estilo con este atributo.Elija entre punto de mira, texto, espera, valor predeterminado, ayuda, tamaño electrónico, ne-tamaño, n-cambio de tamaño, tamaño-n, tamaño-w, tamaño-sw, tamaño-s, ajuste de tamaño, y automático.
También hay 15 nuevas opciones de cursor CSS3, todas funcionan en la última versión de Firefox, Chrome, Safari, Opera e IE9 +: ninguna, menú de contexto, celda, texto vertical, alias, copia, no- drop, not-allowed, ew-resize, ns-resize, news-resize, nwse-resize, col-resize, row-resize y all-scroll. Para ver ejemplos de estos cursores en acción, visite Sitepoint.
#helpmenu {cursor: help;}
filtro: Puede elegir entre varios filtros de efectos especiales, incluidos Alpha, BlendTrans, Blur, Chroma, DropShadow, FlipH (flip horizontal), FlipV (flip vertical), Glow, Gris, Invertir, Luz, Máscara, RevealTrans, Shadow, Wave y Xray. La mayoría de los filtros requieren una entrada numérica, como el filtro de máscara, que debe contener el valor hexadecimal del color de la máscara, como en el filtro: Máscara (Color = # ffcc33);.
#details {filter: invert;;
Aunque es cierto que estos filtros pueden hacer algunas cosas interesantes e inusuales, durante más tiempo no han funcionado en ningún otro navegador que no sea IE. Para ver un ejemplo de algunos de estos filtros, abra el siguiente enlace dentro de un navegador IE: Xentrik. Afortunadamente, muchos de estos filtros se han reinventado como nuevos estilos de CSS3 que tienen un mejor soporte para el navegador.
