Geekflare recibe el apoyo de nuestra audiencia. Podemos ganar comisiones de afiliación de los enlaces de compra en este sitio.
En Desarrollo Última actualización: 24 de septiembre de 2023
Compartir en:
Escáner de seguridad de aplicaciones web Invicti - la única solución que ofrece verificación automática de vulnerabilidades con Proof-Based Scanning™.

El diseño web es una habilidad muy exigente en el mundo actual impulsado por la tecnología. Y uno de los conceptos fundamentales del diseño y el desarrollo web son las hojas de estilo en cascada (CSS)

Tanto si diseña una página web como si mejora el aspecto de una entrada de blog en su sitio web, CSS puede ayudarle a lo grande. Las CSS se utilizan para afinar y personalizar el aspecto de una página web con el fin de ofrecer una mejor experiencia de navegación a los lectores.

Dicho esto, se han producido continuos desarrollos en las especificaciones CSS para satisfacer las exigencias de las necesidades de diseño modernas. Por lo tanto, resulta penoso para los desarrolladores y diseñadores web recordarlo todo y mantenerse al día de los cambios

Por eso hemos recopilado algunas de las mejores hojas de trucos CSS a las que puede recurrir y echar un vistazo rápido para refrescar la memoria y mantenerse al día de los últimos cambios

Aquí tiene

Htmlcheatsheet.com: Otro excelente recurso para CSS es este sitio web. Cubre todos los aspectos básicos, como la sintaxis, los estilos internos y externos, el estilo en línea, el modelo de caja, etc.

También cubre selectores, propiedades, selector de color, fondo, vista previa, degradado, sombra de caja, generador de botones, sombra de texto, generador de fuentes, transformaciones, borde/contorno, borde-radio, consultas de medios, restablecer CSS y mucho más. También puede ver vídeos de YouTube en este sitio web para comprender cómo utilizarlos en su proyecto

Stanford: El truco CSS de la Universidad de Stanford es fácil de seguir y comprender y se puede descargar gratuitamente. Incluye hojas de estilo en cascada con propiedades de fuente, propiedades de fondo y color, propiedades de texto y propiedades de clasificación

Esta hoja de trucos de dos páginas también cubre exhaustivamente las propiedades de las cajas para ayudarle a diseñar como un profesional

Configuración del sitio web: Esta es una de las mejores hojas de trucos CSS que puede encontrar en Internet. Consta de 29 páginas y está estructurada en varios apartados, fuentes, bordes, fondos, columnas, textos, posicionamiento en cuadrícula, colores y mucho más. Su creador también ha enumerado todas las etiquetas/div CSS

Puede leerlo en línea o descargar una impresión gratuita. Es útil para todos los diseñadores, especialmente para los principiantes

Codecademy: Codecademy tiene una maravillosa hoja de trucos CSS que le servirá de guía rápida siempre que quiera aclarar un concepto. Encontrará diferentes temas de CSS, como la sintaxis y los selectores con reglas visuales, la visualización y el posicionamiento, el modelo de caja, la tipografía y los colores

Puede consultarlo para establecer el tamaño de la fuente, el color de fondo, la opacidad, el peso de la fuente, la alineación del texto, las direcciones URL de los recursos, las palabras clave de los nombres de los colores y mucho más. Incluso puede descargarlo y guardarlo en su dispositivo para echarle un vistazo rápido siempre que lo necesite o marcarlo como favorito en su navegador

Hostinger: Tanto si es un diseñador profesional como un principiante, esta completa hoja de trucos puede ayudarle a recordar los conceptos que se le han escapado. Incluye algunos conceptos básicos sobre CSS y cubre temas avanzados que puede descargar en formato pdf

Esta hoja de trucos contiene algunas propiedades y valores CSS comunes como borde, modelo de caja, transiciones, fuente y color. Está curada con un fondo sólido y estructurada adecuadamente que puede previsualizar antes de descargarla

Lesliefranke.com: Si es un fan de las hojas de trucos de una sola página, aquí tiene algo para usted. Los temas están diseñados con un aspecto minimalista utilizando un fondo blanco, texto negro y algunos resaltes marrones. También cubre la sintaxis, el modelo de caja, los conceptos generales, el borde, la posición, el fondo, la fuente, la lista y el texto

Además, el creador también ha añadido algunas abreviaturas, pseudoselectores, comentarios, tipos de medios y unidades para su comodidad

Devhints: Este sitio es excelente para que los diseñadores profesionales encuentren hojas de trucos CSS sobre diversos temas. Todo está diseñado para que sea fácil de digerir para los lectores utilizando colores sutiles. Incluye selectores, combinaciones, pseudoclases, variaciones de pseudoclases, propiedades de fuentes con ejemplos y casos

A continuación, encontrará información sobre fondos, animación con ejemplos, eventos y mucho más

dgiiit.github.io: Como los principiantes se ven abrumados con mucha información que procesar, esta hoja de trucos puede ser de gran ayuda. Podrá encontrar etiquetas y conceptos básicos de CSS en esta hoja de trucos de CSS de una página y súper fácil de leer. Está diseñado con colores azul claro y fondos blancos e incluye cosas que necesitará recordar rápidamente

Aquí encontrará etiquetas CSS para selectores, texto, bordes, modelo de caja, posicionamiento, bordes y listas, y otros temas

OverAPI.com: Este sitio es un buen recurso para las hojas de trucos, incluidas las hojas de trucos CSS. Puede utilizar el botón de búsqueda para encontrar el elemento concreto que busca o simplemente la página para hacer un recorrido rápido cuando diseñe una página. Utiliza colores frescos y agradables a la vista, como el verde, el azul, el gris, etc., con texto blanco que no daña los ojos

Los temas CSS que puede encontrar aquí son modelo de caja, selectores, estilo, elementos, caja CSS3, animación, página, recursos y otros temas varios

Lighthouselabs: Si es un fan de una hoja de trucos completa que pueda utilizar como referencia cuando esté atascado con un concepto o para refrescar sus conocimientos, esta hoja de trucos de CSS es para usted. Comienza con todas las terminologías básicas de CSS como valor, propiedades y selectores en detalle. También transmite la información con pequeños datos fáciles de entender con un ejemplo para cada término

Además, también encontrará otros términos como modelo de caja, código de texto y fuente, código de fondo, código de borde y flexbox

Conclusión

Espero que estas hojas de trucos CSS le ayuden siempre que necesite consultar términos y código CSS, tanto si desea recordar lo aprendido como si ha olvidado algo mientras diseñaba. Todas ellas han sido creadas para aliviarle el dolor mientras diseña páginas web. Así pues, márquelas en su navegador o guárdelas en su dispositivo para consultarlas siempre que lo desee.

  • Durga Prasad Acharya
    Autor
    Durga Prasad Acharya es una escritora técnica freelance a la que le encanta escribir sobre tecnologías emergentes, como IA y ML, ciberseguridad, alojamiento web, SaaS, computación en nube y mucho más. Además de escribir, es diseñador web y le apasiona... Seguir leyendo
Gracias a nuestros patrocinadores
Más lecturas sobre desarrollo
Potencia tu negocio
Algunas de las herramientas y servicios que le ayudarán a hacer crecer su negocio.
  • Invicti utiliza el Proof-Based Scanning™ para verificar automáticamente las vulnerabilidades identificadas y generar resultados procesables en tan solo unas horas.
    Pruebe Invicti
  • Web scraping, proxy residencial, gestor de proxy, desbloqueador web, rastreador de motores de búsqueda, y todo lo que necesita para recopilar datos web.
    Pruebe Brightdata
  • Monday.com es un sistema operativo de trabajo todo en uno que te ayuda a gestionar proyectos, tareas, trabajo, ventas, CRM, operaciones, flujos de trabajo y mucho más.
    Prueba Monday
  • Intruder es un escáner de vulnerabilidades en línea que encuentra puntos débiles de ciberseguridad en su infraestructura, para evitar costosas violaciones de datos.
    Prueba Intruder