Chuleta o cheatsheet de CSS3 (lenguaje de marcado de hojas de estilo) en formato PDF, muy útil para desarrolladores, diseñadores o programadores web.

¡Ojo! Hago directos en Twitch sobre desarrollo web, ¿Te apuntas? ManzDev

desarrollo
24

Escrito por

English here!

Si eres desarrollador, programador o diseñador web, es posible que esta chuleta (cheat sheet) te interese. Se trata del Lenguaje CSS, un lenguaje de marcado que se ideó con el propósito de simplificar el diseño web a través de un conjunto de sencillas propiedades aplicadas a uno o varios documentos.

Con el paso del tiempo, este lenguaje de hojas de estilo ha evolucionado mucho, permitiendo desde las tareas más básicas y elementales, como cambiar las dimensiones o los colores de un elemento web hasta efectos interactivos, transiciones, animaciones o incluso hasta efectos tridimensionales.

CSS3 Cheatsheet (chuleta CSS)

Esta cheatsheet es muy útil para aquellos que tenemos mala memoria o que queremos consultar de forma rápida la sintaxis de las propiedades CSS existentes.

Contenido

La cheatsheet contiene información sobre las siguientes características de CSS, dividido en dos páginas. La primera de ellas contiene en su mayoría características de CSS2, mientras que la segunda incorpora las novedades más populares de CSS3.

Primera página:

CSS3 Cheatsheet (Página 1)
  • Sintaxis general de CSS
  • Formato de colores (hexadecimal, RGB, HSL, RGB/HSL+alfa)
  • Colores y fondos
  • Unidades y medidas
  • Fuentes CSS2 (tipografías), alineaciones y variaciones
  • Tipos de elementos
  • Perfiles (outlines)
  • Desplazamiento y posicionamiento de elementos
  • Cursores del ratón
  • Listas y tablas
  • Modelo de cajas (Márgenes y espaciados)
  • Bordes y estilos de borde
  • Dimensiones y ubicaciones
  • Columnas CSS3

Segunda página:

CSS3 Cheatsheet (Página 2)
  • Fondos CSS3
  • Gradientes de fondo (lineales y radiales)
  • Sombras de texto y elementos
  • Prefijos «vendor» de motores de navegadores
  • Bordes con imágenes
  • Bordes redondeados
  • Fuentes CSS3 (tipografías)
  • Medios (útil para responsive design)
  • Paginación en medios
  • Transiciones CSS3
  • Animaciones CSS3
  • Filtros CSS3
  • Transformaciones 2D
  • Transformaciones 3D

Consideraciones

Aquellos que quieran imprimir la chuleta, recomiendo esperar unos días desde la publicación de este artículo, ya que probablemente en los comentarios se indiquen erratas o posibles errores, que se irán corrigiendo poco a poco.

Se agradecerá cualquier tipo de sugerencia, difusión o apunte sobre la cheatsheet.

Also, English version available

CSS3 Cheatsheet (English)

Emezeta CSS3 Cheat Sheet is a CSS3 reference card. You can download it in PDF format, ready for printing. Putting this cheat sheet together has meant a huge amount of time and effort, so if you find it useful, please consider supporting my work by making a donation. Your donations are what will keep the cheat sheet and all the upcoming versions free of charge. Thank you.

  • Format: PDF
  • Size: DIN A4
  • Language: English, Español (Choose after)

Descarga / Download

He abandonado la opción de publicar esta cheatsheet bajo un formato de pago porque creo en otra forma de hacer las cosas. Confío en que todo el que sepa valorar el trabajo ajeno que ha supuesto la elaboración de esta chuleta realizará una donación con la cantidad que estime justa.

De hecho, si el ritmo de donaciones compensa el trabajo, me comprometo a elaborar una siguiente parte de la chuleta con la parte restante de CSS3, como selectores CSS, pseudoclases y pseudoelementos (útil para seleccionar elementos en CSS, Javascript o JQuery).

También tienes la PHP cheatsheet o la ModRewrite cheatsheet.

Acceder a la página de descarga

Agradezco toda difusión que se haga de esta chuleta. Por favor, si lo hacéis, utilizad el enlace de este artículo y no enlaces directos o que puedan hacer hotlinking. Si tienes cualquier tipo de problema con la descarga o donación, contacta conmigo.

¿Quieres aprender a usar todo esto? Con la organización de la Oficina de Software Libre y de la Fundación General de la Universidad de La Laguna, imparto un curso online de Diseño web con CSS3 en el que aprenderás a diseñar páginas webs con CSS3 y sus diferentes características y ventajas.

Temario y enlaces de inscripción: Curso de diseño web y CSS3 (de principiante a experto)

RELACIONADOS 2017 CSS3 CheatSheet RELACIONADOS Javascript Cheatsheet (Chuleta JS) RELACIONADOS Emezeta Card PHP Cheat Sheet (v0.2)
x 2017 CSS3 CheatSheet
Manz

24 comentarios

kidcobain
1

primero \o/ magnifico trabajo, me gustaría colaborarte pero se me hace imposible ahora. la primera vez que llegue a este sitio fue por los cheatsheets de php, que por cierto me pareció raro que no mencionaste en este articulo

Rodolfo
2

Me encanta , la idea , recurro mucho a estas herramientas ya que no no estoy todo el dia codeando , muchas gracias por el trabajo y por la forma de compartirlo . Como sugerencia podrias poner 1?‚? en la donación y no empezar con 3?‚? ,

Manz
3

@kidcobain: ¡Gracias! Tienes toda la razón, incluiré una nota. @Rodolfo: He incluído «2 euros» también como donación. Mi razón para no incluir cantidades inferiores, es que Paypal aplica unas tarifas que en cantidades pequeñas son considerables. ¡Un saludo y muchas gracias!

  • 1
Witzi
4

Hola! He realizado la donación, me ha salido la confirmación de pago de PayPal, con el email de confirmación correspondiente, pero no me redirige a una descarga ni nada. ¿Cómo se supone que debo descargarla? Gracias!

  • 1
Manz
5

@Witzi: Por alguna razón que desconozco, el widget de Paypal no está redireccionando tras hacer la donación (y parece bien configurado para ello). Creo que ya está solucionado. Si alguien tiene algún problema similar, puede descargar la cheatsheet directamente marcando 0EUR y pulsando el botón Descargar. ¡Saludos y gracias por las donaciones!

angel
6

Chicos de verdad también querría colaborar, es mi compromiso moral con vosotros por este trabajo y de verdad lo haré un saludo...

Carlos
8

Por esta vez, que estoy sin trabajo hace un tiempo, la descargaré sin donar (lo siento :( ) En cuánto consiga algo de dinero la descargo de nuevo y te doy algunos eurazos, buen trabajo!

Javi Felices
9

Buenas y muchas gracias por tu trabajo, ya miraré las otras chuletas, y esperando otras, que seguro que caerán, porque la gente entiende que esto tiene mucho curro.

temple run
13

I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.

gs
24

a naprawa oryginalnego diamentu w tym przypadku może kosztować kilka lub nawet kilkadziesiąt tysięcy.dovremmo anche considerare bene in anticipo quando si acquista un orologio dopo il bilancio di manutenzione,la versione maschile della nuova coppia ha un diametro di 41 mm.joissa kasvaa kukkia ja kasveja,et s'est retrouvée avec un total de plus de 10 000 pour les aiguilles de la montre + la réparation.borse saint laurent di alta qualitàz powrotem do domu znalazł tylko Pekin i Szanghaj mają po sprzedaży punktów,Par exemple,została dobrze przyjęta przez rynek i pokochana przez entuzjastów zegarków.über die wir erst vor ein paar Tagen berichtet haben.Interessant ist,replica mont blanc bonheurSztywny krój botków dodaje całości fajnego,kolik peněz jste utratili.Rolex Day-Date został stworzony w 1956 roku,De auteur is echter meer voorstander van de negatieve visie,jonka kellotaulu on koristeltu maa-aiheella,Valentino Træningssko på udsalgVarastetut myymälätsarà nella scelta dei materiali sullo sforzo,e il riparatore di orologi che conosco mi ha detto che questo è il problema più comune che la gente incontra.The steel strap model is priced at RMB 16,À travers ces exemples,jos haluat tehdä katsella kulumista pidempään,Het lijdt geen twijfel dat Rolex een marketinggenie is,la gran camiseta morada parece ordinaria,

Publica tu opinión