La hoja de trucos Essential CSS3 Properties
Anuncio Las hojas de estilo en cascada o CSS definen la apariencia de la web tal como la conocemos. Mientras que HTML y JavaScript se centran en el lado funcional de la web, CSS se ocupa de los aspectos visuales de la misma. ¿Necesita ayuda para navegar por el mundo que es CSS3? ¡Descargue hoy nuestra "Hoja de trucos de propiedades CSS3 esenciales"!
Anuncio
Las hojas de estilo en cascada o CSS definen la apariencia de la web tal como la conocemos. Mientras que HTML y JavaScript se centran en el lado funcional de la web, CSS se ocupa de los aspectos visuales de la misma.
¿Necesita ayuda para navegar por el mundo que es CSS3? ¡Descargue hoy nuestra "Hoja de trucos de propiedades CSS3 esenciales"!Después de que haya aprendido cómo construir páginas web estáticas con HTML, es hora de descubrir cómo diseñarlas y hacerlas presentables con CSS. ¡Y nuestra hoja de trucos de propiedades CSS3 a continuación puede ayudarlo con eso! Cubre la sintaxis esencial que necesita conocer en CSS3, que es la última versión de CSS.
Un conocimiento práctico de CSS le ayuda a personalizar los colores, las fuentes, los bordes, los fondos, los diseños y mucho más en las páginas web de manera simplificada. Además, resulta útil al diseñar aplicaciones web y móviles también.
DESCARGA GRATUITA: Esta hoja de trucos está disponible como un PDF descargable de nuestro socio de distribución, TradePub. Deberá completar un breve formulario para acceder solo por primera vez. Descargar Essential CSS3 Properties Cheat Sheet.
La hoja de trucos Essential CSS3 Properties
| Atajo | Acción |
|---|---|
| Propiedades de fondo | |
| antecedentes | Define una variedad de propiedades de fondo dentro de una declaración. |
| adjunto de fondo | Especifica si la imagen de fondo es fija o se desplaza con la página web. |
| color de fondo | Define el color de fondo de un elemento en la página web. |
| imagen de fondo | Define la imagen de fondo de un elemento. |
| clip de fondo | Especifica qué tan lejos se extienden las imágenes de fondo o el color de un elemento. |
| origen de fondo | Especifica el área de posicionamiento de las imágenes de fondo. |
| posición de fondo | Define el origen de una imagen de fondo. |
| repetición de fondo | Especifica cómo se enlosa la imagen de fondo. |
| tamaño de fondo | Especifica el tamaño de las imágenes de fondo. |
| Propiedades de borde | |
| frontera | Establece el ancho del borde, el estilo y el color para los cuatro lados de un elemento. |
| borde inferior | Establece el ancho, el estilo y el color para el borde inferior de un elemento. |
| color del borde inferior | Establece el color del borde inferior de un elemento. |
| radio-borde-inferior-izquierdo | Define la forma de la esquina inferior izquierda del borde de un elemento. |
| radio-borde-inferior-derecho | Define la forma de la esquina inferior derecha de un elemento. |
| estilo borde inferior | Establece el estilo del borde inferior de un elemento. |
| ancho del borde inferior | Establece el ancho del borde inferior de un elemento. |
| color del borde | Establece el color del borde en los cuatro lados de un elemento. |
| imagen de borde | Especifica cómo se utilizará una imagen en lugar de los estilos de borde. |
| borde-imagen-inicio | Especifica la cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde. |
| border-image-repeat | Especifica cómo se enlosa la imagen del borde. |
| border-image-slice | Especifica los desplazamientos internos del borde de la imagen. |
| fuente-imagen-borde | Especifica la ubicación de la imagen que se utilizará como borde. |
| ancho de imagen de borde | Especifica el ancho del borde de la imagen. |
| borde izquierdo | Establece el ancho, el estilo y el color del borde izquierdo de un elemento. |
| color de borde izquierdo | Establece el color del borde izquierdo de un elemento. |
| estilo borde izquierdo | Establece el estilo del borde izquierdo de un elemento. |
| ancho de borde izquierdo | Establece el ancho del borde izquierdo de un elemento. |
| radio de borde | Define la forma de las esquinas del borde de un elemento. |
| borde derecho | Establece el ancho, el estilo y el color del borde derecho de un elemento. |
| color de borde derecho | Establece el color del borde derecho de un elemento. |
| estilo de borde derecho | Establece el estilo del borde derecho de un elemento. |
| ancho de borde derecho | Establece el ancho del borde derecho de un elemento. |
| estilo de borde | Establece el estilo del borde en los cuatro lados de un elemento. |
| borde superior | Establece el ancho, el estilo y el color del borde superior de un elemento. |
| color de borde superior | Establece el color del borde superior de un elemento. |
| radio de borde superior izquierdo | Define la forma de la esquina superior izquierda del borde de un elemento. |
| radio de borde superior derecho | Define la forma de la esquina superior derecha de un elemento. |
| estilo de borde superior | Establece el estilo del borde superior de un elemento. |
| ancho de borde superior | Establece el ancho del borde superior de un elemento. |
| ancho del borde | Establece el ancho del borde en los cuatro lados de un elemento. |
| Propiedades de color | |
| color | Define y establece el color del texto. |
| opacidad | Define la transparencia de un elemento. |
| Propiedades de dimensión | |
| altura | Define la altura de un elemento. |
| Altura máxima | Define la altura máxima de un elemento. |
| anchura máxima | Define el ancho máximo de un elemento. |
| altura mínima | Define la altura mínima de un elemento. |
| ancho min | Define el ancho mínimo de un elemento. |
| anchura | Especifica el ancho de un elemento. |
| Propiedades de contenido generado | |
| contenido | Inserta contenido generado. |
| citas | Especifica comillas para citas incrustadas. |
| contador de reinicio | Crea o restablece uno o más contadores. |
| contra-incremento | Incrementa uno o más valores de contador. |
| Diseño de caja flexible | |
| alinear contenido | Especifica la alineación de los elementos del contenedor flexible. |
| alinear elementos | Especifica la alineación predeterminada para los elementos. |
| alinearse | Especifica la alineación de los elementos seleccionados. |
| flexionar | Especifica los componentes de una longitud flexible. |
| base flexible | Especifica el tamaño principal inicial del elemento flexible. |
| dirección flexible | Especifica la dirección de los elementos flexibles. |
| flujo flexible | Una propiedad abreviada para las propiedades flex-direction y flex-wrap. |
| flex-grow | Especifica cómo crecerá el elemento flexible en relación con los otros elementos dentro del contenedor flexible. |
| encogimiento flexible | Especifica cómo se reducirá el elemento flexible en relación con los otros elementos dentro del contenedor flexible. |
| envoltura flexible | Especifica si los elementos flexibles deben ajustarse o no. |
| justificar-contenido | Especifica cómo se alinean los elementos flexibles a lo largo del eje principal del contenedor flexible después de que se hayan resuelto cualquier longitud flexible y márgenes automáticos. |
| orden | Especifica el orden en que se muestran los elementos flexibles y se presentan dentro de un contenedor flexible. |
| Propiedades de fuente | |
| fuente | Define una variedad de propiedades de fuente dentro de una declaración, como el estilo de fuente, variante de fuente, peso de fuente, tamaño de fuente / altura de línea y la familia de fuentes. |
| Familia tipográfica | Define una lista de fuentes para elemento. |
| tamaño de fuente | Define el tamaño de fuente para el texto. |
| ajuste de tamaño de fuente | Conserva la legibilidad del texto cuando se produce el retroceso de la fuente. |
| estiramiento de fuente | Selecciona una cara normal, condensada o expandida de una fuente. |
| Estilo de fuente | Define el estilo de fuente para el texto. |
| variante de fuente | Especifica la variante de fuente. |
| peso de fuente | Especifica el peso de la fuente del texto. |
| Propiedades de lista | |
| estilo de lista | Define el estilo de visualización para una lista y elementos de lista. |
| imagen-estilo-lista | Especifica la imagen que se utilizará como marcador de elemento de lista. |
| lista-estilo-posición | Especifica la posición del marcador de elemento de lista. |
| tipo-estilo-lista | Especifica el estilo de marcador para un elemento de lista. |
| Propiedades de margen | |
| margen | Establece el margen en los cuatro lados del elemento. |
| margen inferior | Establece el margen inferior del elemento. |
| margen izquierdo | Establece el margen izquierdo del elemento. |
| margen derecho | Establece el margen derecho del elemento. |
| margen superior | Establece el margen superior del elemento. |
| Propiedades de diseño de varias columnas | |
| recuento de columnas | Especifica el número de columnas en un elemento de varias columnas. |
| relleno de columna | Especifica cómo se llenarán las columnas. |
| hueco de columna | Especifica el espacio entre las columnas en un elemento de varias columnas. |
| regla de columna | Especifica una línea recta, o "regla", que se dibujará entre cada columna en un elemento de varias columnas. |
| columna-regla-color | Especifica el color de las reglas dibujadas entre columnas en un diseño de varias columnas. |
| estilo de regla de columna | Especifica el estilo de la regla dibujada entre las columnas en un diseño de varias columnas. |
| ancho-regla-columna | Especifica el ancho de la regla dibujada entre las columnas en un diseño de varias columnas. |
| tramo de columna | Especifica cuántas columnas atraviesa un elemento en un diseño de varias columnas. |
| ancho de columna | Especifica el ancho óptimo de las columnas en un elemento de varias columnas. |
| columnas | Una propiedad abreviada para establecer las propiedades de ancho de columna y conteo de columnas. |
| recuento de columnas | Especifica el número de columnas en un elemento de varias columnas. |
| Propiedades del esquema | |
| contorno | Establece el ancho, el estilo y el color de los cuatro lados del contorno de un elemento. |
| color de contorno | Establece el color del contorno. |
| esquema-offset | Establezca el espacio entre un contorno y el borde del borde de un elemento. |
| estilo de contorno | Establece un estilo para un esquema. |
| ancho de contorno | Establece el ancho del contorno. |
| Propiedades de relleno | |
| relleno | Establece el relleno en los cuatro lados del elemento. |
| fondo acolchado | Establece el relleno en la parte inferior de un elemento. |
| acolchado-izquierda | Establece el relleno al lado izquierdo de un elemento. |
| acolchado derecho | Establece el relleno al lado derecho de un elemento. |
| acolchado superior | Establece el relleno en la parte superior de un elemento. |
| Propiedades de impresión | |
| salto de página después | Inserta un salto de página después de un elemento. |
| salto de página antes | Inserta un salto de página antes de un elemento. |
| salto de página dentro | Inserta un salto de página dentro de un elemento. |
| Propiedades de tabla | |
| colapso fronterizo | Especifica si los bordes de las celdas de la tabla están conectados o separados. |
| espaciado de borde | Establece el espacio entre los bordes de las celdas adyacentes de la tabla. |
| lado del subtítulo | Especifica la posición del título de la tabla. |
| celdas vacías | Muestra u oculta bordes y fondos de celdas de tabla vacías. |
| disposición de la mesa | Especifica un algoritmo de diseño de tabla. |
| colapso fronterizo | Especifica si los bordes de las celdas de la tabla están conectados o separados. |
| Propiedades de texto | |
| dirección | Define la dirección del texto / dirección de escritura. |
| tamaño de pestaña | Especifica la longitud del carácter de tabulación. |
| Alineación texto | Establece la alineación horizontal del contenido en línea. |
| text-align-last | Especifica cómo se alinea la última línea de un bloque o una línea justo antes de un salto de línea forzado cuando se justifica la alineación de texto. |
| decoracion de texto | Especifica la decoración agregada al texto. |
| texto-decoracion-color | Especifica el color de la línea de decoración de texto. |
| línea de decoración de texto | Especifica qué tipo de decoraciones de línea se agregan al elemento. |
| estilo de decoracion de texto | Especifica el estilo de las líneas especificadas por la propiedad text-decoration-line |
| guion de texto | Sangra la primera línea de texto. |
| justificar texto | Especifica el método de justificación que se utilizará cuando la propiedad de alineación de texto se configure para justificar. |
| desbordamiento de texto | Especifica cómo se mostrará el contenido del texto cuando desborde los contenedores de bloques. |
| sombra de texto | Aplica una o más sombras al contenido de texto de un elemento. |
| transformación de texto | Transforma el caso del texto. |
| altura de la línea | Establece la altura entre líneas de texto. |
| alineación vertical | Establece la posición vertical de un elemento en relación con la línea de base de texto actual. |
| espaciado de letras | Establece el espacio adicional entre letras. |
| espaciado de palabras | Establece el espacio entre palabras. |
| espacio en blanco | Especifica cómo se maneja el espacio en blanco dentro del elemento. |
| salto de palabra | Especifica cómo dividir líneas dentro de las palabras. |
| ajuste de línea | Especifica si se rompen las palabras cuando el contenido desborda los límites de su contenedor. |
| Propiedades de transformación | |
| visibilidad de la cara posterior | Especifica si el lado "posterior" de un elemento transformado es visible cuando se enfrenta al usuario. |
| perspectiva | Define la perspectiva desde la cual se ven todos los elementos secundarios del objeto. |
| origen de perspectiva | Define el origen (el punto de fuga para el espacio 3D) para la propiedad de perspectiva. |
| transformar | Aplica una transformación 2D o 3D a un elemento. |
| origen de transformación | Define el origen de la transformación para un elemento. |
| estilo de transformación | Especifica cómo se representan los elementos anidados en el espacio 3D. |
| Propiedades de transición | |
| transición | Define la transición entre dos estados de un elemento. |
| retraso de transición | Especifica cuándo comenzará el efecto de transición. |
| duración de la transición | Especifica el número de segundos o milisegundos que debe tardar un efecto de transición en completarse. |
| propiedad de transición | Especifica los nombres de las propiedades CSS a las que se debe aplicar un efecto de transición. |
| función de sincronización de transición | Especifica la curva de velocidad del efecto de transición. |
| Propiedades de formato visual | |
| monitor | Especifica cómo se muestra un elemento en la pantalla. |
| posición | Especifica cómo se posiciona un elemento. |
| parte superior | Especifica la ubicación del borde superior del elemento posicionado. |
| derecho | Especifica la ubicación del borde derecho del elemento posicionado. |
| fondo | Especifica la ubicación del borde inferior del elemento posicionado. |
| izquierda | Especifica la ubicación del borde izquierdo del elemento posicionado. |
| flotador | Especifica si una caja debe flotar o no. |
| claro | Especifica la ubicación de un elemento en relación con elementos flotantes. |
| índice z | Especifica un orden de capas o apilamiento para elementos posicionados. |
| Desbordamiento | Especifica el tratamiento del contenido que desborda el cuadro del elemento. |
| desbordamiento-x | Especifica cómo administrar el contenido cuando desborda el ancho del área de contenido del elemento. |
| desbordamiento | Especifica cómo administrar el contenido cuando desborda la altura del área de contenido del elemento. |
| redimensionar | Especifica si el elemento puede cambiar el tamaño de un elemento o no. |
| fragmento de una película | Define la región de recorte. |
| visibilidad | Especifica si un elemento es visible o no. |
| cursor | Especifica el tipo de cursor. |
| sombra de la caja | Aplica una o más sombras paralelas al cuadro del elemento. |
| tamaño de caja | Altera el modelo de cuadro CSS predeterminado. |
| Propiedades de animación | |
| animación | Especifica el comportamiento de todas las animaciones. |
| retraso de la animación | Especifica cuándo comenzará la animación con un retraso. |
| dirección de animación | Especifica si la animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternativos. |
| duración de la animación | Especifica el número de segundos o milisegundos que una animación debería tomar para completar un ciclo. |
| modo de relleno de animación | Especifica cómo una animación CSS debe aplicar estilos a su destino antes y después de ejecutarse. |
| recuento-iteración-animación | Especifica el número de veces que se debe reproducir un ciclo de animación antes de detenerse. |
| nombre-animación | Especifica el nombre de las animaciones definidas @keyframes que se deben aplicar al elemento seleccionado. |
| animación-play-state | Especifica si la animación se está ejecutando o está en pausa. |
| función de sincronización de animación | Especifica cómo debe progresar una animación CSS durante la duración de cada ciclo. |
Vaya más allá de lo básico de CSS
Una vez que hayas dominado los componentes básicos de CSS, te recomendamos que actualices tus habilidades de CSS ¡Inicia tus proyectos de CSS con este eBook GRATIS! ¡Comience sus proyectos CSS con este libro electrónico GRATIS! Este libro electrónico gratuito proporciona una gran cantidad de ejemplos basados en CSS que lo ayudarán a poner en marcha sus propios proyectos web. Leer más y aprender JavaScript ¿Qué es JavaScript y cómo funciona? ¿Qué es JavaScript y cómo funciona? ¿Qué es Javascript? Es un lenguaje de programación utilizado para mejorar las páginas web. Incluye la actualización dinámica de páginas web, interfaces de usuario y más. Veamos de qué se trata Javascript. Lea más para llevar sus páginas web a un nuevo nivel de deslumbramiento.
Crédito de imagen: Nick Karvounis en Unsplash
Explore más sobre: Cheat Sheet, CSS, Diseño web.
