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:
align-contentflexbox align-content: flex-start | flex-end | center | space-between | space-around | stretch;grid align-content: start | end | center | space-between | space-around | stretch | space-evenly;
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-itemsflexbox align-items: flex-start | flex-end | center | baseline | stretch;grid align-items: start | end | center | baseline | stretch;
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-selfflexbox align-self: flex-start | flex-end | center | baseline | stretch;grid align-self: start | end | center | stretch;
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.allall initial | inherit | unset;
Reestablece el valor de todas las propiedades del elemento seleccionado excepto direction y unicode-bidi.animationanimation: 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-filterbackdrop-filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia();
Tiene el mismo efecto que la propiedad filter, solo que los estilos se aplican al fondo background, en lugar de aplicarse al elemento.backface-visibilitybackface-visibility: hidden | visible;
Decide si un elemento, girado 180º alrededor del eje X o Y, debe seguir visible (el valor por defecto), ó no (hidden).backgroundbackground: color | position / size | repeat | origin | clip1 | attachment | image;
Establece todas las propiedades del fondo en una sola declaración abreviadabackground-attachmentbackground-attachment: scroll | fixed | local;
Se utiliza para controlar como se comportan las imágenes de fondo al desplazar la página.background-blend-modebackground-blend-mode: color | color-burn | color-dodge | darken | difference | exclusion | hard-light | hue | lighten | luminosity | multiply | normal | overlay | saturation | screen | soft-light;
Utilizada para combinar dos imágenes de fondo, ó una imágen y un color.background-clipbackground-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-colorbackground-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 HTMLbackground-imagebackground-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-originbackground-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-positionbackground-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-repeatbackground-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
Utilizada para establecer si la imágen se repite o no y de que forma:background-sizebackground-size: auto | contain | cover | [tamañoX, tamañoY]
Permite redimensionar las imágenes de fondo.bleedbleed: auto |
longitud Propiedad utilizada con la regla at @page para determinar el sangrado de paginaborderborder: [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-collapseborder-collapse: collapse | separate;
Establece si las celdas adyacentes de una tabla <table> comparten el mismo borde (collapsed) ó no (separate).border-imageborder-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-radiusborder-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-spacingborder-spacing: 1em;
Controla la separación de los bordes en una tabla table con bordes separados border-collapse: separate;bottombottom: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-breakbox-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-shadowbox-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-sizingbox-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-insidebreak-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-sidecaption-side: top | bottom | block-start | block-end | inline-start | inline-end;
Decide donde poner la descripción (<caption>) de una tabla (<table>).caret-colorcaret-color: red;
Especifica el color del cursor de texto de un elemento editable.clearclear: none | left | right | both | inline-start | inline-end;
Decide si un elemento tiene que aparecer al lado o debajo de un elemento flotado que lo precede.clip-pathclip-path: circle(50px at 0 100px);
Crea una región de recorte para que solo una parte del elemento HTML sea visible.colorcolor:red;
Establece el color del texto, el de las decoraciones (text-decoration) y el valor de currentcolorcolor-adjustcolor-adjust: economy | exact;
Establece como se debe optimizar el aspecto de un elemento en los dispositivos de salida (una impresora - por ejemplo).column-countcolumn-count: número | auto;
En el layout de columnas la propiedad column-count especifica el número de columnas.column-fillcolumn-fill: auto | balance | balance-all;
Especifica como aparece el contenido de un elemento en el layout de columnas.column-gapcolumn-gap: tamaño | normal;
Especifica el tamaño (px, em, etc…) del espacio entre columnas.column-rulecolumn-rule: column-rule-width column-rule-style column-rule-color;
Declaración abreviada para establecer las propiedades del separador entre columnas.column-spancolumn-span: 1 | all;
Establece si un elemento puede extenderse a lo largo de varias columnas.column-widthcolumn-width: anchura | auto;
Sugiere la anchura optima de las columnas.columnscolumns: column-width column-count;
Declaración abreviada para establecer las propiedades column-width y column-count.contentcontent: url(imagen.jpg);
Se utiliza junto con los pseudo-elementos ::before y ::after para generar el contenido que sde estos.counter-incrementcounter-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-resetcounter-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.cursorcursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize; | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing;
Especifica el tipo de cursor que se mostrara cuando el raton pasa por encima de un elemento.directiondirection: ltr | rtl | inherit;
Se utiliza para indicar en que dirección fluye el texto (rtl: de derecha a izquierda ó ltr: de izquierda a derecha)displaydisplay: inline | block | list-item | inline-block | run-in | table | inline-table | table-row-group | table-header-group; | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit;
Permite definir como será mostrado un cierto elemento HTMLempty-cellsempty-cells: show | hide
Establece si los bordes y los fondos de las celdas vacías de una tabla table serán visibles o no.filterfilter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia();
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-basisflex-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é redimensionadoflex-directionflex-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-flowflex-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-growflex-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-shrinkflex-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-wrapflex-wrap: nowrap | wrap | wrap-reverse;
Es una propiedad del contenedor flex y especifica si puede haber un cambio de línea (wrap) ó no (nowrap).floatfloat: left | right | none | inline-start | inline-end;
Especifica si un elemento debe florar o no y de que manera.fontfont: 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-familyfont-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-familyfont-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-sizefont-size: tamaño | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller;
Establece el tamaño de fuente del elemento HTML.font-size-adjustfont-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-stretchfont-stretch: porcentaje | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
Escoge un tipo de fuente normal, condensado o ampliado.font-stylefont-style: normal | italic | oblique | oblique 40deg;
Establece si el texto tiene que utilizar un tipo de fuente normal, cursiva u oblicua.font-variantfont-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-numericfont-variant-numeric: normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions;
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-weightfont-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-columngrid-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-rowsgrid-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 layouthanging-punctuationhanging-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 agradableheightheight: auto | altura | inherit;
Especifica la altura de un elemento. En unidades de medida, ó en porcentaje.hyphenshyphens: none | manual | auto;
Decide como separar las palabras con guiones a finales de línea.image-renderingimage-rendering: auto | crisp-edges | pixelated;
Establece el algoritmo que debe utilizarse para redimensionar las imágenes.initial-letterinitial-letter: 2;
Selecciona la primera letra de un elemento y establece el número de líneas que debe ocupar.isolationisolation: auto | isolate;
Utilizada junto con mix-blend-modes. Aisla un grupo de elementos para que no fusione con el trasfondo.justify-contentjustify-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.leftleft: 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-spacingletter-spacing: normal | distancia;
Establece el espaciado entre caracteres de texto.line-clampline-clamp: 3;
Corta el texto después de un número especifico de líneas.line-heightline-height: normal | número | longitud | porcentaje;
Utilizada para establecer la altura de línea del texto.list-stylelist-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.marginmargin: 2px 1em 0 auto;
Declaración abreviada para margin-top,max-heightmax-height:valor;
Establece la altura máxima de un elemento.max-widthmax-width: valor;
Establece la anchura máxima de un elemento.min-heightmin-height: valor;
Establece la altura mínima de un elemento:min-widthmin-width: valor;
Establece la anchura mínima de un elemento.mix-blend-modemix-blend-mode: color | color-burn | color-dodge | darken | difference | exclusion | hard-light | hue | lighten | luminosity | multiply | normal | overlay | saturation | screen | soft-light;
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-fitobject-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-positionobject-position: top left;
Estabblece como se alinea un elemento reemplazado (<img>, <video>) dentro de su propia caja definida con width y height.opacityopacity: valor | inherit;
Establece la opacidad de un elemento. Su valor se establece entre 0 (transparente) y 1 (opaco).orderorder: 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.outlineoutline: 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-offsetoutline-offset: distancia | inherit:
Desplaza (offsets) el contorno (outline) y lo dibuja más allá del bordeoverflowoverflow: 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-xoverflow: 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-yoverflow: 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-wrapoverflow-wrap: normal | break-word | anywhere;
Decide si hay que romper las palabras largas que salen de la caja.paddingpadding: 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-bottompadding-bottom: valor;
Establece el relleno (padding) de una caja, por su parte baja.padding-leftpadding-left: valor;
Establece el relleno a la izquierda (padding-left) de una caja.padding-rightpadding-right: valor;
Establece el relleno a la derecha (padding-right) de una caja.padding-toppadding-top: valor;
Establece el relleno superior (padding-top) de una cajapage-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.perspectiveperspective:400px;
Establece la distancia entre el observador virtual, y un elemento posicionado en 3D, para darle perspectiva.perspective-originperspective-origin: distancia | porcentaje | left | center | right | top | bottom;
Establece la posición del observador. Utilizada como punto de fuga (vanishing point) para la perspectivaplace-itemsplace-items: align-items justify-items;
Representa la declaración abreviada para las propiedades align-items y justify-items.pointer-eventspointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;
En SVG y CSS establece como interactúa, (si interactúa) un cierto elemento con el ratón.positionposition: static | relative | absolute | sticky | fixed;
Decide cómo posicionar el elemento seleccionado en el documento.quotesq {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.resizeresize: none | both | horizontal | vertical | block | inline;
Decide si un elemento es redimensionable o no y si lo és en que dirección.rightright: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-behaviorscroll-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) fluidamenteshape-outsideshape-outside: circle() | ellipse() | polygon() | inset() | url() | margin-box | border-box | padding-box | content-box | initial | inherit;
Define como se ajusta el texto alrededor del elemento flotado.shape-marginshape-margin: longitud | porcentajes;
Establece un margen alrededor de un trazado definido con la propiedad shape-outside.tab-sizetab-size: número entero | longitud | inherit
Establece la anchura del carácter tab (U+0009) que aparece en un documento HTML.table-layouttable-layout: auto | fixed;
Establece el algoritmo utilizado para diseñar una tabla (<table>).text-aligntext-align: start | end | left | right | center | justify | match-parent;
Establece la alineación horizontal del texto en un elemento bloque o de una celda de tabla.text-align-lasttext-align-last: auto | start | end | left | right | center | justify;
Establece la alineación horizontal de la última línea de texto en un elemento bloque.text-decorationtext-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-colortext-decoration-color: black;
Establece el color de las decoraciones del texto añadidas con text-decoration-line.text-decoration-linetext-decoration-line: none | underline | overline | line-through | blink;
Establece el tipo de decoración utilizada para el texto.text-decoration-skiptext-decoration-skip: none | objects | spaces | edges | ink | box-decoration;
Establece dónde y cómo interrumpir la línea decorativa de un texto declarada con text-decoration-line.text-decoration-skip-inktext-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-styletext-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-indenttext-indent: longitud | porcentaje | inherit;
Especifica la indentación de la primera línea de texto de un elemento de bloque.text-justifytext-justify: auto | inter-character | inter-word | none;
Establece el tipo de justificación del texto cuando text-align: justify;text-overflowtext-overflow: clip | ellipsis | "cadena de texto";
Decide que hacer con el texto que sobresale de la caja por ejemplo cuando white-space: nowrap.text-renderingtext-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit;
Proporciona información al navegador acerca de como optimizar el texto.text-shadowtext-shadow: desplazamiento horizontal desplazamiento vertical desenfoque color;text-shadow: 2px 0px 3px rgb(100,200,255);
Aplica una sombra al texto.text-stroketext-stroke: 2px red;
Una propiedad experimental que añade un contorno a los caracteres de texto, similar al stroke en SVG.text-transformtext-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana;
Especifica como transformar el texto utilizando mayúsculas y minúsculas.toptop: 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.transformtransform: 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-origintransform-origin: [ left | center | right | top | bottom | porcentaje | longitud ];
Utilizada para cambiar la posición del origen de la transformación de un elemento HTML.transform-styletransform-style: flat | preserve-3d;
Decide si los elementos descendientes son posicionados en un espacio tridimensional o en un espacio bidimensional ó plano (flat).transitiontransition: 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-delaytransition-delay: tiempo (s, ms);
Especifica el número de segundos (s) ó milisegundos (ms) antes de empezar la transición.transition-durationtransition-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-propertytransition-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-functiontransition-timing-function: función_de_temporizadorease | linear | ease-in | ease-out | ease-in-out | cubic-bezier | step;
Especifica como varia la velocidad durante la transición.unicode-bidiunicode-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-selectuser-select: auto | text | none | contain | all;
Controla como el texto de un elemento puede ser seleccionado por el usuario.vertical-alignvertical-align: baseline | sub | super | top | text-top| middle | bottom | text-bottom | porcentaje | longitud | inherit;
Controla el alineamiento vertical de un elemento display:inline o una celda de una tabla (<table>).visibilityvisibility: visible | hidden | collapse | inherit;
Especifica si un elemento es visible o no.white-spacewhite-space: normal | nowrap | pre | pre-wrap |inherit;
Controla cómo gestionar los espacios en blanco dentro de un elementowidowswidows: 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.widthwidth: longitud | porcentaje | auto | inherit;
Especifica la anchura de una caja, ó de cualquier elemento que la admita.will-changewill-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-breakword-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-spacingword-spacing: normal | longitud | porcentajes;
Aumenta o disminuye el espacio en blanco entre las palabras.writing-modewriting-mode sideways-rl | sideways-lr;
Permite establecer la dirección del texto.z-indexz-index: auto | número entero | inherit;
Especifica el orden de apilamiento de un elemento posicionado.
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.
