Referencia de 154 propiedades CSS
Qué hace cada propiedad, qué valores se usan de verdad y si se hereda, en una línea.
Maquetación11
Propiedades que deciden qué tipo de caja es un elemento y qué pasa cuando desborda.
displayDefine qué tipo de caja es el elemento: el punto de partida de toda maquetación.visibilityMuestra u oculta; con hidden el espacio sigue ocupado.floatFlota el elemento a un lado para que el texto lo rodee; hoy lo hacen flex y grid.clearEmpuja el elemento por debajo de los flotantes anteriores.overflowDecide si el contenido que desborda se recorta o se desplaza.overflow-xControla solo el desbordamiento horizontal.overflow-yControla solo el desbordamiento vertical.box-sizingDecide si el ancho incluye relleno y borde; border-box es más fácil de calcular.aspect-ratioFija la relación ancho-alto: defines un lado y el otro se ajusta.container-typePermite que los estilos respondan al tamaño de la caja padre, no de la pantalla.isolationCrea una capa nueva para que la mezcla no se salga.
Flexbox y grid24
Propiedades que alinean elementos y los colocan en una cuadrícula: hoy casi toda maquetación usa una de las dos.
flex-directionDefine si los elementos flex van en fila o en columna.flex-wrapDecide si los elementos pasan a otra línea cuando no caben.flexReparte el espacio sobrante de una vez; flex: 1 lo divide por igual.flex-growCuánto del espacio sobrante toma este elemento.flex-shrinkCuánto se encoge cuando falta espacio; con 0 no se encoge.flex-basisEl tamaño de partida antes de crecer o encoger.justify-contentReparte los elementos a lo largo del eje principal.align-itemsAlinea los elementos en el eje transversal; center es el centrado vertical habitual.align-selfCambia la alineación de un solo elemento.align-contentDistribuye las líneas cuando los elementos ocupan varias filas.gapEl espacio entre elementos; a diferencia del margen, no se añade por fuera.row-gapFija solo el espacio entre filas.column-gapFija solo el espacio entre columnas.orderCambia el orden visual sin tocar el del HTML.grid-template-columnsDefine cuántas columnas tiene la cuadrícula y su ancho.grid-template-rowsDefine cuántas filas tiene la cuadrícula y su alto.grid-template-areasNombra zonas de la cuadrícula para escribir la maquetación como un dibujo.grid-columnIndica cuántas columnas ocupa un elemento.grid-rowIndica cuántas filas ocupa un elemento.grid-auto-flowDecide en qué dirección se colocan los elementos sin posición.grid-auto-rowsFija la altura de las filas creadas automáticamente.place-itemsDefine ambos ejes de alineación a la vez; con center todo queda centrado.place-contentColoca el bloque de contenido en ambos ejes.justify-itemsColoca los elementos horizontalmente dentro de su celda.
Caja y espaciado16
Tamaño y espaciado. Los márgenes exteriores se colapsan; el relleno lo pinta el fondo.
widthEl tamaño horizontal; 100% sigue al padre y 100vw a la ventana.heightEl tamaño vertical; con auto ocupa solo lo que pide el contenido.min-widthImpide que la caja sea más estrecha; en flex, 0 le permite encogerse.max-widthLimita el ancho; la forma habitual de controlar la longitud de línea.min-heightImpide que la caja sea más baja.max-heightLimita el alto; lo que sobra lo gestiona overflow.marginEl espacio exterior; los márgenes superior e inferior se colapsan en uno.margin-topEl espacio exterior por arriba.margin-rightEl espacio exterior derecho; con auto la caja se va a la izquierda.margin-bottomEl espacio exterior por abajo.margin-leftEl espacio exterior izquierdo; auto a ambos lados centra la caja.paddingEl espacio interior; el color de fondo llega hasta aquí.padding-topEl espacio interior por arriba.padding-rightEl espacio interior derecho.padding-bottomEl espacio interior inferior; en porcentaje sirve para generar altura.padding-leftEl espacio interior izquierdo.
Texto25
Tipografía, interlineado, alineación: cómo se lee el texto. La mayoría se hereda.
font-sizeEl tamaño del texto; rem multiplica el tamaño raíz y respeta el zoom del lector.font-familyDefine la tipografía; el navegador recorre la lista, así que termina con una familia genérica.font-weightEl grosor del trazo; 400 es normal y 700 negrita.font-styleActiva o desactiva la cursiva.fontFija varios valores de fuente a la vez; lo omitido vuelve a su valor inicial.line-heightEl interlineado; un valor sin unidad como 1.5 se hereda mejor.letter-spacingEl espacio entre letras; apretarlo un poco favorece a los títulos grandes.word-spacingEl espacio entre palabras.text-alignAlinea el texto horizontalmente.text-decorationAñade subrayado o tachado; también sirve para quitar el subrayado de los enlaces.text-decoration-lineElige qué línea de decoración se dibuja.text-decoration-colorDa color a esa línea por separado.text-decoration-styleDefine el estilo de línea; wavy da la ondulación del corrector.text-transformCambia mayúsculas y minúsculas solo en pantalla; el texto original no cambia.text-indentSangra la primera línea del bloque.text-overflowCorta el texto que desborda con puntos suspensivos; requiere overflow y nowrap.text-shadowProyecta sombra tras el texto: útil para letras blancas sobre fotos.white-spaceControla espacios y saltos de línea; con nowrap todo queda en una línea.word-breakDecide dónde se parten las palabras largas; keep-all evita partir palabras en coreano.overflow-wrapFuerza el salto de cadenas largas sin espacios: útil para URLs.writing-modeCambia la dirección del texto: así se escribe en vertical.vertical-alignAlinea verticalmente dentro de la línea; también sirve en celdas de tabla.font-variant-numericElige el estilo de las cifras; tabular-nums iguala su ancho y estabiliza las tablas.hyphensPermite partir palabras con guion al final de línea; requiere declarar el idioma.text-wrapElige cómo se reparten las líneas; balance iguala su longitud en los títulos.
Color y fondo13
Color de texto, color de fondo, degradados y transparencia.
colorEl color del texto; currentColor remite a este valor.background-colorEl color de fondo; llena también el relleno.background-imageColoca una imagen o degradado de fondo; se pueden apilar varios.background-sizeDimensiona la imagen de fondo; cover llena sin huecos y contain la muestra entera.background-positionColoca la imagen de fondo dentro de la caja.background-repeatDecide si la imagen de fondo se repite.background-attachmentDecide si el fondo se desplaza con la página o queda fijo.backgroundFija todos los valores de fondo a la vez; lo omitido vuelve a su valor inicial.background-clipLimita hasta dónde se pinta el fondo; con text se recorta a las letras.opacityLa transparencia global; los hijos también se atenúan.mix-blend-modeDefine cómo se mezclan los colores con lo que hay debajo.accent-colorDa color a los controles que dibuja el navegador, como casillas y radios.color-schemeDeclara si la página admite modo claro, oscuro o ambos.
Bordes13
Bordes, esquinas y sombras. El contorno no ocupa espacio propio.
borderDefine grosor, estilo y color del borde en una línea.border-widthFija solo el grosor del borde.border-styleFija solo el estilo; sin él el borde no se ve.border-colorFija solo el color del borde.border-topDefine solo el borde superior.border-bottomDefine solo el borde inferior: el separador habitual entre filas.border-radiusRedondea las esquinas; 50% da un círculo y un valor enorme, una píldora.outlineUna línea fuera del borde; no ocupa espacio, por eso sirve para el foco de teclado.outline-widthFija solo el grosor del contorno.outline-styleFija solo el estilo del contorno.outline-colorFija solo el color del contorno.outline-offsetSepara el contorno del elemento.box-shadowProyecta sombra alrededor de la caja; con inset va por dentro.
Efectos7
Efectos aplicados tras el pintado: desenfoque, recorte, relleno.
filterAplica desenfoque, escala de grises o brillo; se pueden encadenar.backdrop-filterFiltra lo que hay detrás del elemento: así se logra el cristal esmerilado.clip-pathRecorta el elemento según una forma dada.mask-imageOculta partes según el brillo de una imagen: útil para desvanecer bordes.object-fitDecide cómo llena la caja una imagen o vídeo; cover recorta para llenar.object-positionElige qué parte se conserva al recortar: así se salvan las caras.image-renderingElige escalado suave o nítido; pixelated conserva el pixel art.
Transformación y movimiento14
Mover, girar y suavizar. No tocan la maquetación, así que nada salta.
transformMueve, gira y escala; la caja no se mueve, así que nada más se descoloca.transform-originEl punto de anclaje al girar o escalar.transitionSuaviza el cambio de un valor; en una línea se dice qué, cuánto y cómo.transition-propertyIndica qué propiedades se animan; all es cómodo pero puede pesar.transition-delayCuánto se espera antes de empezar.transition-durationCuánto dura el cambio; unos 0,2 s resulta natural.transition-timing-functionDa forma al ritmo; ease empieza y termina suave.animationReproduce fotogramas clave; nombre, duración y repetición en una línea.animation-nameEl nombre de los fotogramas clave.animation-timing-functionEl ritmo del movimiento; con steps avanza a saltos.animation-durationCuánto dura un ciclo.animation-iteration-countCuántas veces se repite; con infinite no para.will-changeAvisa al navegador de qué cambiará; abusar de ello es contraproducente.perspectiveFija la profundidad de las transformaciones 3D; valores menores exageran.
Posicionamiento7
Sacar un elemento del flujo y colocarlo; z-index decide qué queda delante.
positionElige el esquema de posición; sticky fija el elemento al desplazarse.topA qué distancia queda del borde superior.rightA qué distancia queda del borde derecho.bottomA qué distancia queda del borde inferior.leftA qué distancia queda del borde izquierdo.insetFija los cuatro lados a la vez; con 0 llena el padre por completo.z-indexDecide qué queda encima; solo se compara dentro del mismo contexto de apilamiento.
Tablas4
Propiedades para bordes de tabla y ancho de columnas.
Listas4
La forma y la posición de los marcadores de lista.
Interacción9
Cómo responde el elemento al ratón, al dedo y al desplazamiento.
cursorDefine la forma del puntero; pointer indica que algo se puede pulsar.pointer-eventsDecide si recibe eventos de puntero; con none los clics lo atraviesan.user-selectDecide si se puede seleccionar el texto arrastrando.touch-actionControla qué gestos táctiles gestiona el navegador; manipulation quita el zoom por doble toque.scroll-behaviorHace que el desplazamiento salte o fluya.scroll-snap-typeAjusta el desplazamiento a posiciones fijas: habitual en carruseles.overscroll-behaviorDecide si al llegar al final se mueve el padre; contain lo detiene dentro.resizePermite al usuario cambiar el tamaño; se usa sobre todo en textarea.caret-colorDa color al cursor parpadeante del campo.
Impresión y varios7
El resto: impresión, contenido generado y numeración automática.
page-break-afterFuerza o evita un salto de página después al imprimir.break-insideImpide que el elemento se parta entre páginas o columnas.contentEl contenido que generan ::before o ::after; a menudo solo comillas vacías.counter-resetInicia o reinicia un contador de numeración.counter-incrementAvanza el contador; junto a content numera títulos automáticamente.quotesElige las comillas que usa el elemento q según el idioma.allReinicia todas las propiedades de golpe: útil para borrar estilos heredados.
Cómo leerlo
- Una propiedad heredada basta escribirla en el padre: todos los hijos la reciben. Casi todas las de texto funcionan así.
- Un atajo reinicia lo que omites. Escribir solo background: red borra también la imagen de fondo puesta antes.
- Cuando dos reglas chocan gana el selector más específico; solo con igual especificidad decide el orden.
- Anima transform y opacity para que sea suave. Cambiar width o top obliga a recalcular la maquetación.
Preguntas frecuentes
Q. ¿Cuántas propiedades CSS hay?
El estándar recoge más de 500, pero solo una parte aparece en el trabajo diario. Aquí están las 154 que se acaban escribiendo una y otra vez, agrupadas por propósito.
Q. ¿Qué significa que se hereda?
Que el valor pasa hacia abajo: lo pones en el padre y los hijos lo usan sin repetirlo. Casi todas las propiedades de texto se heredan; los espacios y bordes no.
Q. ¿Qué cambia al usar un atajo?
Defines varios valores en una línea, pero lo que omites vuelve a su valor inicial. Por eso background: red a secas borra también la imagen de fondo anterior.
Q. Si la misma propiedad se declara dos veces, ¿cuál gana?
Primero se mira la especificidad: un id gana a una clase y una clase a una etiqueta. Solo con igual especificidad gana la regla posterior. !important lo anula todo, y por eso conviene evitarlo.
Q. ¿Debo usar px o rem?
Un rem es un múltiplo del tamaño raíz, así que crece cuando el lector amplía el texto en el navegador. Usa rem para tipografía y espacios; px va bien donde el valor nunca debe cambiar, como un borde de un píxel.