Propiedades CSS

Abajo, podeís ver, la lista completa, de las propiedades CSS ordenadas alfabéticamente, con la sintaxís para declararla y una breve descripción.

Conviene, estudiarlas, conocerlas bien, y si quieres aprender, prácticar y experimentar con ellas, para darle a tus páginas, el estilo, que desees.

Os recuerdo, que CSS, significa Cascading Style Sheet ú hojas de estilo en cascada, es el lenguaje standar, en la web, para aplicar los estilos, al html, que visualizaremos, cuando veamos, las páginas, en los navegadores.

El CSS, se puede aplicar, inline, osea incrustado en el HTML, no recomendado, mejor separarlo, en un archivo aparte, con extensión .css, y enlazarlo en el <head>, del documento, por un link. También, es habitual inyectarlo dinámicamente, con javascript, mediante diversos métodos

Podemos emplear la pseudoclase :hover, (posar el mouse, sobre algún elemento), que junto con los pseudoelementos ::before y ::after, se empleán frecuentemente, para crear adornos ó pequeños efectos, en el documento.

Desde CSS3 y con sus nuevas propiedades, transition y animation, podemos cambiar dinámicamente, las propiedades CSS, de cualquier elemento html, y crear grandes ó pequeños efectos.

Pues para ver la mayoría de las propiedades CSS que debemos conocer y manejar para estilizar nuestras páginas, podeis estudiarlas, en la siguiente lista por orden alfabetico:

Lista Propiedades CSS

Propiedad

Sintaxís

Descripción

align-content

Alinea los elementos del contenedor, a lo largo del eje transversal (Y), en contenedores multilínea, en flexbox y a lo relativo a la columna en grid. El valor por defecto es stretch.

align-items

Establece el valor align-self, para todos los elementos (items), descendientes directos de un elemento. Utilizada en flexbox y grid. El valor por defecto es stretch.

align-self

En flexbox la propiedad align-self reposiciona elementos individuales relativamente al eje transversal de la caja. En grid la propiedad align-self alinea el ítem relativo a la columna.

all

all initial | inherit | unset;

Reestablece el valor de todas las propiedades del elemento seleccionado excepto direction y unicode-bidi.

animation

animation: nombre | duración | función-de-temporizador | demora | número-de-iteraciones | dirección | estado-de-la-animación;animation: vuelta 1.5s ease 0.3s 3 alternate paused;
@keyframes vuelta{from{}to{}}

Utilizada para animar las propiedades CSS que pueden ser animadas. Prácticamente todas, a las que se les pueden dar medidas definidas, en unidades de medida (px, ems, etc) ó en porcentaje (%).

appearance

-moz-appearance: none;-webkit-appearance: none;

Utilizada para mostrar los estilos nativos del sistema operativo para un elemento como checkbox, button, textarea, radio, etc...

backdrop-filter

Tiene el mismo efecto que la propiedad filter, solo que los estilos se aplican al fondo background, en lugar de aplicarse al elemento.

backface-visibility

backface-visibility: hidden | visible;

Decide si un elemento, girado 180º alrededor del eje X o Y, debe seguir visible (el valor por defecto), ó no (hidden).

background

Establece todas las propiedades del fondo en una sola declaración abreviada

background-attachment

background-attachment: scroll | fixed | local;

Se utiliza para controlar como se comportan las imágenes de fondo al desplazar la página.

background-blend-mode

Utilizada para combinar dos imágenes de fondo, ó una imágen y un color.

background-clip

background-clip: border-box | padding-box | content-box | text | inherit;

Especifica hasta donde se extiende el fondo (background) de un elemento, ya sea color ó imágen.

background-color

background-color: rgb(0,0,0); rgba(0,0,0,.5); hsl(0,50%,50%); etc.

Se utiliza para dar un color de fondo a un elemento HTML

background-image

background-image: url(ruta a carpeta/donde/esta/la/imagen.png);

Utiliza una imagen o un gradiente como imágen de fondo de un elemento HTML.

background-origin

background-origin: border-box | padding-box | content-box | inherit;

Utilizada para determinar como se calcula la posición (background-position) de la imágen de fondo (background-image).

background-position

background-position: 50px 0; background-position: 50% 10%;background-position: top | bottom | left | right | center;

Permite posicionar una imágen de fondo dentro de su contenedor.

background-repeat

Utilizada para establecer si la imágen se repite o no y de que forma:

background-size

background-size: auto | contain | cover | [tamañoX, tamañoY]

Permite redimensionar las imágenes de fondo.

bleed

bleed: auto |

longitud Propiedad utilizada con la regla at @page para determinar el sangrado de pagina

border

border: [border-width] border-style [border-color];border:1px solid black;

Establece en una declaración abreviada las propiedades border-width, border-style, y border-color.

border-collapse

border-collapse: collapse | separate;

Establece si las celdas adyacentes de una tabla <table> comparten el mismo borde (collapsed) ó no (separate).

border-image

border-image: border-image-source | border-image-slice| border-image-width | border-image-outset | border-image-repeat

Utiliza una imágen ó un gradiente para trazar el borde de un elemento HTML y es la declaración abreviada de border-image-source, border-image-slice, border-image-width, border-image-outset, y border-image-repeat.

border-radius

border-radius: 10px;

Utilizada para crear esquinas redondeadas. Es la declaración abreviada de border-top-left-radius, border-top-right-radius, border-bottom-right-radius, y border-bottom-left-radius.

border-spacing

border-spacing: 1em;

Controla la separación de los bordes en una tabla table con bordes separados border-collapse: separate;

bottom

bottom:1px;

Establece la distancia entre el borde inferior de un elemento posicionado (position: relative | absolute | fixed | sticky), relativo al borde inferior de la caja padre.

box-decoration-break

box-decoration-break: slice | clone;

Decide como utilizar los elementos decorativos de un elemento (background, border, border-radius, border-image, box-shadow, margin, y padding ) cuando el elemento ocupa múltiples líneas columnas o páginas.

box-shadow

box-shadow: desplazamiento horizontal desplazamiento vertical desenfoque extension color inset;box-shadow: 2px 2px 3px 5px rgba(0,0,0,.5);

Aplica una sombra alrededor de un elemento HTML.

box-sizing

box-sizing : content-box | border-box | inherit;

Decide como se calcula el ancho y el alto de una caja; si el padding y el border de la caja sumán (content-box), ó no (border-box).

break-inside

break-inside: auto | avoid | avoid-page | avoid-column | avoid-region,

En el layout de columnas la propiedad break-inside se utiliza para controlar si romper o no un elemento html entre columnas.

caption-side

Decide donde poner la descripción (<caption>) de una tabla (<table>).

caret-color

caret-color: red;

Especifica el color del cursor de texto de un elemento editable.

clear

Decide si un elemento tiene que aparecer al lado o debajo de un elemento flotado que lo precede.

clip-path

clip-path: circle(50px at 0 100px);

Crea una región de recorte para que solo una parte del elemento HTML sea visible.

color

color:red;

Establece el color del texto, el de las decoraciones (text-decoration) y el valor de currentcolor

color-adjust

color-adjust: economy | exact;

Establece como se debe optimizar el aspecto de un elemento en los dispositivos de salida (una impresora - por ejemplo).

column-count

column-count: número | auto;

En el layout de columnas la propiedad column-count especifica el número de columnas.

column-fill

column-fill: auto | balance | balance-all;

Especifica como aparece el contenido de un elemento en el layout de columnas.

column-gap

column-gap: tamaño | normal;

Especifica el tamaño (px, em, etc…) del espacio entre columnas.

column-rule

column-rule: column-rule-width column-rule-style column-rule-color;

Declaración abreviada para establecer las propiedades del separador entre columnas.

column-span

column-span: 1 | all;

Establece si un elemento puede extenderse a lo largo de varias columnas.

column-width

column-width: anchura | auto;

Sugiere la anchura optima de las columnas.

columns

columns: column-width column-count;

Declaración abreviada para establecer las propiedades column-width y column-count.

content

content: url(imagen.jpg);

Se utiliza junto con los pseudo-elementos ::before y ::after para generar el contenido que sde estos.

counter-increment

counter-increment: mi-contador 5;

Se utiliza junto con los pseudo-elementos ::before y ::after para especificar el incremento del contador utilizado como valor de la propiedad content.

counter-reset

counter-reset: contador número | none;

Se utiliza junto con los pseudo-elementos ::before y ::after para reestablecer el valor inicial de un contador utilizado como valor de la propiedad content.

cursor

Especifica el tipo de cursor que se mostrara cuando el raton pasa por encima de un elemento.

direction

direction: ltr | rtl | inherit;

Se utiliza para indicar en que dirección fluye el texto (rtl: de derecha a izquierda ó ltr: de izquierda a derecha)

display

Permite definir como será mostrado un cierto elemento HTML

empty-cells

empty-cells: show | hide

Establece si los bordes y los fondos de las celdas vacías de una tabla table serán visibles o no.

filter

Es una manera de aplicar filtros SVG a un elemento html (sobretodo imágenes)

flex

.item {flex: flex-grow [flex-shrink] [flex-basis];}

Es una propiedad de los ítems de un contenedor flex. y representa la declaración abreviada de flex-grow, flex-shrink (opcional) y flex-basis (opcional)

flex-basis

flex-basis:50%;

Es una propiedad de los ítems de un contenedor flex. Especifica el valor inicial del tamaño principal de un elemento flex, antes de que esté redimensionado

flex-direction

flex-direction: row | row-reverse | column | column-reverse;

Es una propiedad del contenedor flex, y establece la dirección de los elementos hijos (ítems flex).

flex-flow

flex-flow: flex-direction [flex-wrap];

Es una propiedad del contenedor flex. Representa la declaración abreviada de las dos propiedades: flex-direction y flex-wrap (opcional)

flex-grow

flex-grow:2;

Una propiedad de los ítems del contenedor flex. Establece cuanto puede crecer un elemento flex en relación al resto de elementos de la misma caja flex.

flex-shrink

flex-shrink:2;

Una propiedad de los ítems del contenedor flex. Establece cuanto puede disminuir un elemento flex en relación al resto de elementos de la misma caja flex.

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

Es una propiedad del contenedor flex y especifica si puede haber un cambio de línea (wrap) ó no (nowrap).

float

float: left | right | none | inline-start | inline-end;

Especifica si un elemento debe florar o no y de que manera.

font

font: italic small-caps bold 44px Georgia, sans-serif;

Representa la declaración abreviada de font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family

font-display

@font-face {font-family: "Fuente Ejemplo";src: url('fuente.woff') format('woff');font-display: auto | block | swap | fallback | optional;}

Decide que fuente hay que mostrar, si hay que mostrar antes que la fuente definida con @font-face este disponible.

font-family

font-family: Courier, "Lucida Console", monospace;

Define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado.

font-size

Establece el tamaño de fuente del elemento HTML.

font-size-adjust

font-size-adjust: tamaño | none | inherit;

Ajusta la proporción de la fuente, donde la proporción se calcula como x-height / font-size.

font-stretch

Escoge un tipo de fuente normal, condensado o ampliado.

font-style

font-style: normal | italic | oblique | oblique 40deg;

Establece si el texto tiene que utilizar un tipo de fuente normal, cursiva u oblicua.

font-variant

font-variant: normal | small-caps | inherit;

Decide si utilizar o no una variación de la fuente donde las minúsculas se parecen a las mayusculas (small-caps).

font-variant-numeric

Controla el uso de caracteres alternativos para números, fracciones, cero con barra, indicadores ordinales (º, ª) etc... La fuente utilizada tiene que disponer de estos carácteres alternativos.

font-weight

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit;

Especifica el grosor o el peso de la fuente.

grid-row / grid-column

grid-column: 2 / 3; grid-row: 2 / 3;

grid-row representa la declaración abreviada para grid-row-start y grid-row-end; grid-column representa la declaración abreviada para grid-column-start y grid-column-end.

grid-template-columns / grid-template-rows

grid-template-rows: 1fr 2fr; grid-template-columns: 1fr 1fr 1fr;

Define una plantilla de columnas (grid-template-columns) o de filas (grid-template-rows) en el Grid layout

hanging-punctuation

hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]

Mueve (o no) algunos signos de puntuación (punto, coma, comillas, viñetas ...etc) fuera de la caja, para dar al texto un aspecto visualmente agradable

height

height: auto | altura | inherit;

Especifica la altura de un elemento. En unidades de medida, ó en porcentaje.

hyphens

hyphens: none | manual | auto;

Decide como separar las palabras con guiones a finales de línea.

image-rendering

image-rendering: auto | crisp-edges | pixelated;

Establece el algoritmo que debe utilizarse para redimensionar las imágenes.

initial-letter

initial-letter: 2;

Selecciona la primera letra de un elemento y establece el número de líneas que debe ocupar.

isolation

isolation: auto | isolate;

Utilizada junto con mix-blend-modes. Aisla un grupo de elementos para que no fusione con el trasfondo.

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around;

Controla el alineamiento de los elementos de una caja flexible (flexbox) a lo largo de su eje principal.

left

left: longitud | porcentaje | auto;

Establece la distancia entre el borde izquierdo de un elemento posicionado (position: relative | absolute | fixed | sticky) relativo al borde izquierdo de la caja padre.

letter-spacing

letter-spacing: normal | distancia;

Establece el espaciado entre caracteres de texto.

line-clamp

line-clamp: 3;

Corta el texto después de un número especifico de líneas.

line-height

line-height: normal | número | longitud | porcentaje;

Utilizada para establecer la altura de línea del texto.

list-style

list-style: tipo posición imagen | inherit

Establece las propiedades de la lista (list-style-type, list-style-image, y list-style-position) en una sola declaración abreviada.

margin

margin: 2px 1em 0 auto;

Declaración abreviada para margin-top,

max-height

max-height:valor;

Establece la altura máxima de un elemento.

max-width

max-width: valor;

Establece la anchura máxima de un elemento.

min-height

min-height: valor;

Establece la altura mínima de un elemento:

min-width

min-width: valor;

Establece la anchura mínima de un elemento.

mix-blend-mode

Establece cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está detrás de él y con el fondo del elemento.

object-fit

object-fit: fill | contain | cover | none | scale-down;

Especifica como el contenido de un elemento reemplazado (<img>, <video>) tiene que encajar en su propia caja definida con width y height.

object-position

object-position: top left;

Estabblece como se alinea un elemento reemplazado (<img>, <video>) dentro de su propia caja definida con width y height.

opacity

opacity: valor | inherit;

Establece la opacidad de un elemento. Su valor se establece entre 0 (transparente) y 1 (opaco).

order

order: número | initial | inherit;

Es una propiedad de los ítems del contenedor flex utilizada para cambiar el orden de los elementos de una caja flex.

outline

outline: 1px solid #000;

La propiedad outline (contorno) dibuja una línea fuera de los bordes para destacar el elemento. Es la declaración abreviada de outline-width, outline-style, y outline-color.

outline-offset

outline-offset: distancia | inherit:

Desplaza (offsets) el contorno (outline) y lo dibuja más allá del borde

overflow

overflow: visible | hidden | scroll | auto | inherit;

Decide qué pasa si el contenido se sale de la caja. Representa la declaración abreviada de overflow-x y overflow-y.

overflow-x

overflow: visible | hidden | scroll | auto | inherit;

Decide si hay que recortar el contenido en x (en horizontal o sea: derecha/izquierda) quee sale de la caja.

overflow-y

overflow: visible | hidden | scroll | auto | inherit;

Decide si hay que recortar el contenido en y (en vertical o sea: arriba/abajo) que sale de la caja.

overflow-wrap

overflow-wrap: normal | break-word | anywhere;

Decide si hay que romper las palabras largas que salen de la caja.

padding

padding: valor(px, em, %, etc)

Establece el relleno (padding) de una caja y representa la declaración abreviada de padding-top, padding-right, padding-bottom, y padding-left.

padding-bottom

padding-bottom: valor;

Establece el relleno (padding) de una caja, por su parte baja.

padding-left

padding-left: valor;

Establece el relleno a la izquierda (padding-left) de una caja.

padding-right

padding-right: valor;

Establece el relleno a la derecha (padding-right) de una caja.

padding-top

padding-top: valor;

Establece el relleno superior (padding-top) de una caja

page-break-after (break-after)

page-break-after: auto | always | avoid | left | right;

Establece si el salto de página, en el documento impreso, tiene que ser después (after) del elemento.

page-break-before (break-before)

page-break-before: auto | always | avoid | left | right;

Establece si el salto de página, en el documento impreso, tiene que ser antes (before) del elemento.

page-break-inside (break-inside)

page-break-inside: auto | avoid

Establece si el salto de página, en el documento impreso, puede ocurrir dentro (inside) del elemento.

perspective

perspective:400px;

Establece la distancia entre el observador virtual, y un elemento posicionado en 3D, para darle perspectiva.

perspective-origin

Establece la posición del observador. Utilizada como punto de fuga (vanishing point) para la perspectiva

place-items

place-items: align-items justify-items;

Representa la declaración abreviada para las propiedades align-items y justify-items.

pointer-events

En SVG y CSS establece como interactúa, (si interactúa) un cierto elemento con el ratón.

position

position: static | relative | absolute | sticky | fixed;

Decide cómo posicionar el elemento seleccionado en el documento.

quotes

q {quotes: "«" "»";} q:before {content: open-quote} q:after {content: close-quote}/* Establece dos niveles de comillas */ q {quotes: "«" "»" "‹" "›";}

Establece el aspecto de las comillas en el documento.

resize

Decide si un elemento es redimensionable o no y si lo és en que dirección.

right

right:1em;

Establece la distancia entre el borde derecho de un elemento posicionado (position: relative | absolute | fixed | sticky;) relativo al borde derecho de la caja padre.

scroll-behavior

scroll-behavior: auto | smooth;

Al hacer click en un enlace dentro del mismo documento (<a href="#top">), permite establecer si la página tiene que saltar a la nueva posición o si debe desplazarse, (scroll) fluidamente

shape-outside

Define como se ajusta el texto alrededor del elemento flotado.

shape-margin

shape-margin: longitud | porcentajes;

Establece un margen alrededor de un trazado definido con la propiedad shape-outside.

tab-size

tab-size: número entero | longitud | inherit

Establece la anchura del carácter tab (U+0009) que aparece en un documento HTML.

table-layout

table-layout: auto | fixed;

Establece el algoritmo utilizado para diseñar una tabla (<table>).

text-align

Establece la alineación horizontal del texto en un elemento bloque o de una celda de tabla.

text-align-last

Establece la alineación horizontal de la última línea de texto en un elemento bloque.

text-decoration

text-decoration: text-decoration-line | text-decoration-style | text-decoration-color

Representa la declaración abreviada, de las propiedades text-decoration-line, text-decoration-color, text-decoration-style y de la nueva text-decoration-thickness.

text-decoration-color

text-decoration-color: black;

Establece el color de las decoraciones del texto añadidas con text-decoration-line.

text-decoration-line

text-decoration-line: none | underline | overline | line-through | blink;

Establece el tipo de decoración utilizada para el texto.

text-decoration-skip

Establece dónde y cómo interrumpir la línea decorativa de un texto declarada con text-decoration-line.

text-decoration-skip-ink

text-decoration-skip-ink: auto | none;

Establece dónde y cómo interrumpir la línea decorativa de un texto declarada con text-decoration-line. Equivalente de text-decoration-skip: ink;

text-decoration-style

text-decoration-style: solid | double | dotted | dashed | wavy;

Especifica el estilo de línea utilizada para la decoración de un texto (declarada con text-decoration-line)

text-indent

text-indent: longitud | porcentaje | inherit;

Especifica la indentación de la primera línea de texto de un elemento de bloque.

text-justify

text-justify: auto | inter-character | inter-word | none;

Establece el tipo de justificación del texto cuando text-align: justify;

text-overflow

text-overflow: clip | ellipsis | "cadena de texto";

Decide que hacer con el texto que sobresale de la caja por ejemplo cuando white-space: nowrap.

text-rendering

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit;

Proporciona información al navegador acerca de como optimizar el texto.

text-shadow

text-shadow: desplazamiento horizontal desplazamiento vertical desenfoque color;text-shadow: 2px 0px 3px rgb(100,200,255);

Aplica una sombra al texto.

text-stroke

text-stroke: 2px red;

Una propiedad experimental que añade un contorno a los caracteres de texto, similar al stroke en SVG.

text-transform

Especifica como transformar el texto utilizando mayúsculas y minúsculas.

top

top: 1em;

Establece la distancia entre el borde superior de un elemento posicionado (position: relative | absolute | fixed | sticky;) relativo al borde superior de la caja padre.

transform

transform: none | funcion_de_ transformación() | initial | inherit;transform: translate(10px, 0) scale(0.8) rotate(10deg) skewX(3deg);

Utilizada para mover (translate), redimensionar (scale), girar (rotate), y sesgar (skew) el elemento seleccionado.

transform-origin

Utilizada para cambiar la posición del origen de la transformación de un elemento HTML.

transform-style

transform-style: flat | preserve-3d;

Decide si los elementos descendientes son posicionados en un espacio tridimensional o en un espacio bidimensional ó plano (flat).

transition

transition: propiedad duración función_de_temporizador (opcional) demora (opcional);transition: color 1s linear 0.2s;

Es la declaración abreviada de transition-property, transition-duration, transition-timing-function, y transition-delay.

transition-delay

transition-delay: tiempo (s, ms);

Especifica el número de segundos (s) ó milisegundos (ms) antes de empezar la transición.

transition-duration

transition-duration: tiempo (s, ms);

Especifica el número de segundos (s) o milisegundos (ms) entre el comienzo y el fin de la transición.

transition-property

transition-property: none | propiedad css | all;

Especifica la lista de propiedades (separadas por comas) que modificaran su valor durante la transición. Con la palabra clave all (todas), no necesitaras especificar, todas las propiedades por su nombre.

transition-timing-function

Especifica como varia la velocidad durante la transición.

unicode-bidi

unicode-bidi: normal | embed | bidi-override | inherit;

Utilizada junto con la propiedad direction, para especificar cómo manejar el texto bidireccional en el documento.

unicode-range

@font-face{font-family: "Fuente Ejemplo"; src: url('fuente.woff') format('woff'); unicode-range: U+00-FF;}

Utilizada con @font-face para definir los caracteres disponibles.

user-select

user-select: auto | text | none | contain | all;

Controla como el texto de un elemento puede ser seleccionado por el usuario.

vertical-align

Controla el alineamiento vertical de un elemento display:inline o una celda de una tabla (<table>).

visibility

visibility: visible | hidden | collapse | inherit;

Especifica si un elemento es visible o no.

white-space

white-space: normal | nowrap | pre | pre-wrap |inherit;

Controla cómo gestionar los espacios en blanco dentro de un elemento

widows

widows: número entero | inherit;

La propiedad widows (viudas), se utiliza con elementos display:block; (parrafos) situados a final de página o de columna para sugerir el número de líneas, después del salto de página o de columna.

width

width: longitud | porcentaje | auto | inherit;

Especifica la anchura de una caja, ó de cualquier elemento que la admita.

will-change

will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; will-change: opacity; will-change: left, top;

Avisa al navegador que un elemento tiene que cambiar para que este pueda optimizar la página antes del cambio previsto.

word-break

word-break: normal | break-all | keep-all | break-word;

Decide si poner un salto de línea en el medio de una palabra y cómo hacerlo.

word-spacing

word-spacing: normal | longitud | porcentajes;

Aumenta o disminuye el espacio en blanco entre las palabras.

writing-mode

writing-mode sideways-rl | sideways-lr;

Permite establecer la dirección del texto.

z-index

z-index: auto | número entero | inherit;

Especifica el orden de apilamiento de un elemento posicionado.

Conclusión

Es importante, conocer y saber manejar, estas propiedades CSS, para estilizar, nuestras páginas, y la forma de conseguirlo, es prácticar ó jugar con ellas, es lo que yo recomiendo.

Bueno, os he presentado, una lista bastante completa, pero puede faltar alguna propiedad, si notas alguna ausencia, hazmelo saber, o para cualquier sugerencia, agradecería, el contacto, gracias por leer, hasta la próxima.

Cookies

Propiedades CSS

Lista Propiedades CSS

Propiedad

Sintaxís

Descripción

Conclusión