Ajuste de desplazamiento Scroll Snap
CSS Scroll Snap permite que un área de desplazamiento se detenga en puntos de alineación elegidos después de que las personas se desplacen.
↗Diseño y CSS
Aprende cómo el contenido obtiene su tamaño, lugar, espacio, capas y forma en cada pantalla.
01 / Atlas
Todos los términos de Diseño y CSS
Abrir un término para un significado simple, un ejemplo, cuándo usarlo, cuán oficial es y su nombre en código.
-
01 · Más detalle -
02 · Núcleo ajuste de objeto object-fit
`object-fit` controla cómo se ajusta una imagen, video o elemento similar dentro de su caja.
↗ -
03 · Más detalle Anidamiento de CSS CSS Nesting
El anidamiento de CSS es una sintaxis incorporada para escribir una regla de estilo dentro de otra. El navegador todavía sigue las reglas de CSS para leer selectores y su peso.
↗ -
04 · Más detalle Bloque contenedor Containing Block
Un bloque contenedor es el rectángulo que un elemento usa para calcular su posición y tamaño porcentual.
↗ -
05 · Núcleo Box Model Box Model
El modelo de caja de CSS explica el tamaño de un elemento. Cada caja tiene contenido, relleno, un borde y un margen.
↗ -
06 · Núcleo Breakpoint & Media Query Breakpoint & Media Query
Un breakpoint es donde un diseño necesita cambiar. Una media query aplica CSS cuando la pantalla o el dispositivo cumplen una condición.
↗ -
07 · Más detalle Capas en cascada Cascade Layers
Las capas en cascada son grupos con nombre que establecen el orden de las reglas CSS. El navegador verifica este orden antes de comparar la especificidad del selector.
↗ -
08 · Núcleo Cascada en CSS CSS Cascade
La cascada de CSS es el conjunto de reglas que un navegador usa cuando varios estilos apuntan a lo mismo. Verifica de dónde proviene cada regla, su importancia, contexto, capa, peso del selector, alcance y orden.
↗ -
09 · Núcleo clamp() clamp()
`clamp()` elige un valor CSS preferido pero lo mantiene entre un mínimo y un máximo.
↗ -
10 · Núcleo Columna centrada Centered Column
Una columna centrada tiene un ancho máximo legible y un espacio que parece igual a ambos lados.
↗ -
11 · Más detalle comportamiento de sobredesplazamiento overscroll-behavior
`overscroll-behavior` controla lo que ocurre cuando un área de desplazamiento llega a su borde. Puede evitar que el desplazamiento continúe hacia un área superior y puede cambiar el efecto del borde.
↗ -
12 · Más detalle Container Query Container Query
Una container query permite que CSS adapte un componente a su propio contenedor. Revisa el tamaño o estilo de ese contenedor en lugar de solo mirar la pantalla.
↗ -
13 · Más detalle contenido máximo max-content
`max-content` es el tamaño que el contenido desearía si no se dividiera en puntos de quiebre normales.
↗ -
14 · Más detalle Contexto de apilamiento Stacking Context
Un contexto de apilamiento es un grupo local de capas CSS. Los elementos se ordenan primero dentro del grupo, y luego todo el grupo se coloca entre otros grupos.
↗ -
15 · Más detalle Contexto de apilamiento y Z-index — Paquete de aprendizaje Stacking Context & Z-index — Learning Bundle
Este paquete de aprendizaje conecta dos ideas de CSS. Un contexto de apilamiento mantiene su orden de pintura separado. z-index ordena las cajas que pueden participar dentro de ese contexto. El paquete no es un término estándar único de CSS.
↗ -
16 · Más detalle Contexto de Formato de Bloque Block Formatting Context
Un contexto de formato de bloque, o BFC, es un área separada para la disposición de bloques. Mantiene los flotantes dentro y evita que algunos márgenes y flotantes afecten el contenido exterior.
↗ -
17 · Más detalle CSS Custom Property CSS Custom Property
Una CSS custom property es un valor CSS reutilizable, a menudo llamado CSS variable. Sigue la cascada y puede cambiar según el ámbito o el tema.
↗ -
18 · Núcleo CSS Grid CSS Grid
CSS Grid es un sistema de diseño para filas y columnas juntas. Puede fijar áreas o cambiarlas según el espacio.
↗ -
19 · Más detalle Cuadrícula Bento Bento Grid
Una cuadrícula tipo bento junta bloques de diferentes tamaños en un solo diseño. Los espacios más grandes muestran qué contenido es el más importante.
↗ -
20 · Núcleo Cuadrícula de tarjetas Card Grid
Una cuadrícula de tarjetas repite tarjetas que se pueden comparar. El número de columnas cambia según el espacio disponible.
↗ -
21 · Núcleo Desbordamiento Overflow
El desbordamiento ocurre cuando el contenido es más grande que su caja. CSS puede mostrarlo, recortarlo o permitir que la gente lo desplace.
↗ -
22 · Más detalle Desenfoque de fondo Backdrop Blur
El desenfoque de fondo suaviza lo que está detrás de una capa transparente. No desenfoca el contenido de esa capa.
↗ -
23 · Más detalle dimensionamiento intrínseco Intrinsic Sizing
El dimensionamiento intrínseco permite que el contenido de un elemento ayude a decidir su tamaño en lugar de usar solo un tamaño fijo externo.
↗ -
24 · Más detalle Diseño de la documentación Documentation Layout
Un Documentation Layout combina navegación, un artículo, ejemplos, su esquema y enlaces siguientes en una sola vista de lectura.
↗ -
25 · Más detalle Diseño de mampostería Masonry Layout
Un diseño de mampostería acomoda artículos de diferentes alturas en columnas. Los artículos llenan los espacios vacíos verticales sin compartir las mismas líneas de fila.
↗ -
26 · Núcleo Diseño de Página Única Single-Page Layout
Un diseño de una sola página pone una historia o tarea principal en una página larga.
↗ -
27 · Núcleo Espaciado Spacing
El espaciado es espacio vacío colocado intencionalmente. Agrupa elementos relacionados, separa ideas y da ritmo a la página.
↗ -
28 · Núcleo Espacio Gap
El espacio es el que un contenedor coloca entre sus hijos de Flexbox o Grid. La misma regla se aplica a cada par.
↗ -
29 · Núcleo Especificidad de CSS CSS Specificity
La especificidad de CSS es el peso de un selector. Cuando otras reglas de la cascada están empatadas, el navegador usa este peso para elegir qué estilo prevalece.
↗ -
30 · Núcleo Estructura básica de la aplicación App Shell
Una shell de aplicación es el marco pequeño que permanece mientras el contenido de la página cambia. Normalmente contiene navegación, identidad y estado.
↗ -
31 · Núcleo Flexbox Flexbox
Flexbox es un sistema de diseño CSS para una dirección a la vez. Alinea y distribuye elementos a lo largo de una fila o columna.
↗ -
32 · Núcleo Herencia en CSS CSS Inheritance
La herencia de CSS permite que algunas propiedades copien un valor de un elemento padre. Esto ocurre cuando el hijo no tiene un valor propio.
↗ -
33 · Núcleo índice-z z-index
El índice-z es una propiedad CSS que establece el nivel de frente a atrás de una caja posicionada. En algunos casos, también crea un nuevo contexto de apilamiento local.
↗ -
34 · Núcleo Margen Margin
El margen es el espacio fuera del borde de un elemento. Mantiene ese elemento alejado de los elementos de diseño cercanos.
↗ -
35 · Más detalle mínimo de contenido min-content
`min-content` es el tamaño más pequeño que el contenido puede usar después de envolverse en todos los puntos de quiebre permitidos.
↗ -
36 · Núcleo minmax() minmax()
`minmax()` es una función de CSS Grid que da a una fila o columna tanto un tamaño mínimo como máximo.
↗ -
37 · Núcleo Opacidad Opacity
La opacidad indica cuán sólido se ve un elemento y sus hijos. Puede variar de transparente a sólido.
↗ -
38 · Núcleo Posición corregida Fixed Position
La posición fija en CSS coloca un cuadro relativo a un contenedor fijo, generalmente la ventana del navegador. El cuadro normalmente permanece en su lugar mientras el documento se desplaza.
↗ -
39 · Núcleo Posición fija Sticky Position
La posición sticky de CSS comienza como la posición relativa normal. A medida que la página se desplaza, el cuadro puede permanecer en un borde establecido, pero solo dentro de su bloque contenedor.
↗ -
40 · Más detalle Posición Pegajosa y Fija — Paquete de Aprendizaje Sticky & Fixed Position — Learning Bundle
Este paquete de aprendizaje compara dos valores de posición de CSS. sticky permanece en el flujo normal hasta que alcanza un punto establecido en su contenedor de desplazamiento. fixed se coloca contra un bloque contenedor de posición fija. El paquete no es un único término de CSS.
↗ -
41 · Núcleo Posicionamiento CSS CSS Positioning
El posicionamiento CSS indica respecto a qué se coloca un elemento. Puede usar el flujo normal, a sí mismo, un contenedor o la ventana como referencia.
↗ -
42 · Más detalle Posicionamiento de ancla en CSS CSS Anchor Positioning
El posicionamiento de ancla en CSS coloca un cuadro relativo a otro elemento ancla nombrado.
↗ -
43 · Núcleo Propiedades Lógicas de CSS CSS Logical Properties
Las propiedades lógicas de CSS describen los lados según el flujo de escritura, como bloque y línea. Reemplazan direcciones fijas como arriba, derecha, abajo y izquierda. Esto ayuda a que los diseños sigan la dirección de escritura del idioma.
↗ -
44 · Núcleo Pseudo-clase Pseudo-class
Una pseudo-clase es parte de un selector CSS. Encuentra un elemento mediante una condición, como el estado, lugar, idioma o acción del usuario.
↗ -
45 · Núcleo Pseudo-elemento Pseudo-element
Un pseudo-elemento permite que CSS estilice una parte o caja que no tiene un elemento normal en el HTML de origen. Ejemplos incluyen la primera letra y la decoración generada.
↗ -
46 · Núcleo Relación de aspecto Aspect Ratio
La relación de aspecto dice qué tan ancho es un elemento comparado con qué tan alto es.
↗ -
47 · Núcleo Relleno Padding
El relleno es el espacio dentro del borde de un elemento, entre su contenido y su borde.
↗ -
48 · Núcleo Selector de CSS CSS Selector
Un selector CSS es un patrón que encuentra elementos en una página para que se les puedan aplicar estilos.
↗ -
49 · Más detalle Subcuadrícula Subgrid
Una subrejilla es una cuadrícula dentro de otra cuadrícula que comparte los tamaños de fila o columna de su elemento superior. Puede compartir una dirección o ambas.
↗ -
50 · Núcleo Truncamiento de Texto Text Truncation
El truncamiento de texto corta el texto para ahorrar espacio. Una elipsis muestra que falta una o más líneas.
↗ -
51 · Núcleo Unidades de viewport Viewport Units
Las unidades de viewport son longitudes CSS basadas en el área visible del navegador. Las versiones pequeña, grande y dinámica manejan las barras del navegador que aparecen o desaparecen.
↗