Todas las propiedades CSS3 y sus funciones

CSS3 es la última evolución del lenguaje de hojas de estilo en cascada, que se utiliza para diseñar y estructurar el contenido de las páginas web. Con CSS3, los desarrolladores web pueden aplicar estilos avanzados, como animaciones, transformaciones y un control preciso del diseño de la página a través de propiedades como flexbox y grid layout. En esta sección, te presentamos una lista completa de las propiedades y selectores más comunes de CSS3, organizados por categorías, para ayudarte a comprender cómo utilizarlos para crear páginas web modernas y atractivas.

Propiedades de Fondo y Color

• background-color: Establece el color de fondo de un elemento.
• background-image: Define una imagen de fondo para un elemento.
• background-repeat: Controla si la imagen de fondo se repite (horizontal, vertical, ambas, o ninguna).
• background-position: Define la posición inicial de la imagen de fondo.
• background-size: Especifica el tamaño de la imagen de fondo.
• background-clip: Define hasta dónde se extiende el área de pintura del fondo.
• background-origin: Especifica el área en la cual se sitúa la imagen de fondo.
• background-attachment: Establece si la imagen de fondo se desplaza con el contenido de la página o se mantiene fija.
• color: Define el color del texto dentro de un elemento.

Propiedades de Texto

• font-family: Especifica la familia de fuentes para el texto.
• font-size: Define el tamaño de la fuente.
• font-weight: Controla el grosor del texto.
• font-style: Establece el estilo de la fuente.
• text-align: Define la alineación horizontal del texto.
• text-decoration: Agrega decoraciones al texto, como subrayado, línea sobre el texto, o línea a través del texto.
• text-transform: Controla la capitalización del texto.
• line-height: Establece la altura de línea, controlando el espacio vertical entre líneas de texto.
• letter-spacing: Define el espacio entre caracteres.
• word-spacing: Define el espacio entre palabras.
• text-shadow: Aplica una sombra al texto.

Propiedades de Caja y Modelo de Caja

• width: Define el ancho de un elemento.
• height: Define la altura de un elemento.
• padding: Controla el espacio entre el contenido de un elemento y su borde.
• margin: Define el espacio exterior alrededor de un elemento.
• border: Establece el borde alrededor de un elemento.
• border-radius: Redondea las esquinas de un borde.
• box-shadow: Aplica una sombra alrededor del borde de un elemento.
• box-sizing: Define cómo se calcula el ancho y la altura total de un elemento.

Propiedades de Posicionamiento

• position: Define el método de posicionamiento de un elemento.
• top, right, bottom, left: Controla la ubicación de un elemento cuando se utiliza un posicionamiento relativo, absoluto, fijo o sticky.
• z-index: Controla la superposición de elementos apilados.
• float: Permite que un elemento flote a la izquierda o derecha dentro de su contenedor.
• clear: Controla el comportamiento del flujo de un elemento después de un elemento flotante.

Propiedades de Flexbox

• display: Define el tipo de caja de un elemento, como flex o inline-flex.
• flex-direction: Especifica la dirección en la que los elementos hijos son colocados en el contenedor flex.
• justify-content: Alinea los elementos hijos a lo largo del eje principal.
• align-items: Alinea los elementos hijos a lo largo del eje transversal.
• align-self: Permite anular la alineación de un elemento hijo en particular.
• flex-wrap: Define si los elementos hijos se deben envolver en una nueva línea.
• flex-grow: Especifica cuánto debería crecer un elemento en relación a los demás.
• flex-shrink: Especifica cuánto debería encogerse un elemento en relación a los demás.
• flex-basis: Define el tamaño inicial de un elemento antes de distribuir el espacio restante.
• order: Controla el orden en el que aparecen los elementos hijos.

Propiedades de Grid Layout

• display: Define el tipo de caja de un elemento, como grid o inline-grid.
• grid-template-columns: Define el número y tamaño de las columnas en un grid.
• grid-template-rows: Define el número y tamaño de las filas en un grid.
• grid-template-areas: Especifica el diseño de las áreas dentro de un grid.
• grid-gap, row-gap, column-gap: Define el espacio entre filas y columnas en un grid.
• grid-auto-rows, grid-auto-columns: Define el tamaño de las filas y columnas implícitas.
• justify-items: Alinea los elementos dentro de sus celdas a lo largo del eje horizontal.
• align-items: Alinea los elementos dentro de sus celdas a lo largo del eje vertical.
• justify-self: Permite anular la alineación de un elemento en particular a lo largo del eje horizontal.
• align-self: Permite anular la alineación de un elemento en particular a lo largo del eje vertical.

Propiedades de Transiciones y Animaciones

• transition: Define la transición entre dos estados de un elemento.
• transition-property: Especifica las propiedades que se verán afectadas por la transición.
• transition-duration: Define cuánto tiempo debería durar la transición.
• transition-timing-function: Define la curva de velocidad para la transición.
• transition-delay: Especifica el retraso antes de que comience la transición.
• animation: Define una animación basada en keyframes para un elemento.
• animation-name: Especifica el nombre del conjunto de keyframes a utilizar.
• animation-duration: Define cuánto tiempo debería durar la animación.
• animation-timing-function: Define la curva de velocidad para la animación.
• animation-delay: Especifica el retraso antes de que comience la animación.
• animation-iteration-count: Define cuántas veces debería repetirse la animación.
• animation-direction: Define la dirección en la que se debería ejecutar la animación.
• animation-fill-mode: Especifica cómo debe aplicarse el estilo de animación fuera del tiempo de ejecución.
• animation-play-state: Controla si la animación está en ejecución o en pausa.

Propiedades de Transformaciones

• transform: Aplica una transformación 2D o 3D a un elemento.
• transform-origin: Define el punto de origen para las transformaciones.
• transform-style: Especifica cómo deben anidarse los elementos hijos transformados en 3D.
• perspective: Establece la distancia desde el espectador hasta el plano z para elementos 3D.
• perspective-origin: Define el punto de vista para los elementos transformados en 3D.
• backface-visibility: Controla la visibilidad del reverso de un elemento cuando está rotado en 3D.

Propiedades de Listas

• list-style: Establece todas las propiedades de estilo de lista en una declaración.
• list-style-type: Define el marcador de la lista.
• list-style-position: Establece la posición del marcador.
• list-style-image: Especifica una imagen como marcador de lista.

Propiedades de Cursor

• cursor: Define el tipo de cursor que se mostrará cuando el mouse esté sobre un elemento.

Propiedades de Visualización y Visibilidad

• display: Define cómo se debe mostrar un elemento (block, inline, inline-block, flex, grid, none, etc.).
• visibility: Controla si un elemento es visible.

Propiedades de Selectores

• *: Selecciona todos los elementos.
• #id: Selecciona un elemento por su ID único.
• .class: Selecciona todos los elementos que tienen una clase específica.
• element: Selecciona todos los elementos de un tipo dado.
• element, element: Selecciona todos los elementos que coinciden con cualquiera de los selectores.
• element element: Selecciona todos los elementos que son descendientes de un elemento específico.
• element > element: Selecciona todos los elementos que son hijos directos de un elemento específico.
• element + element: Selecciona un elemento que es adyacente a otro elemento.
• element ~ element: Selecciona todos los elementos que son hermanos de un elemento.
• [attribute]: Selecciona todos los elementos con un atributo dado.
• [attribute="value"]: Selecciona todos los elementos con un atributo que tiene un valor específico.
• [attribute^="value"]: Selecciona todos los elementos con un atributo cuyo valor comienza con un valor específico.
• [attribute$="value"]: Selecciona todos los elementos con un atributo cuyo valor termina con un valor específico.
• [attribute*="value"]: Selecciona todos los elementos con un atributo que contiene un valor específico.
• :first-child: Selecciona el primer hijo de un elemento.
• :last-child: Selecciona el último hijo de un elemento.
• :nth-child(n): Selecciona el n-ésimo hijo de un elemento.
• :nth-of-type(n): Selecciona el n-ésimo hijo de un tipo específico de elemento.
• :only-child: Selecciona un elemento que es el único hijo de su padre.
• :hover: Selecciona un elemento cuando el puntero del mouse está sobre él.
• :focus: Selecciona un elemento que ha recibido foco.
• :active: Selecciona un elemento mientras está siendo activado (por ejemplo, durante el clic del mouse).
• :visited: Selecciona un enlace que ya ha sido visitado.
• :link: Selecciona un enlace que aún no ha sido visitado.

Aquí una muestra del código