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
41

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

41 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,

  • -1
johnson2154
27

I need to say thanks to proportion this submit due to the fact this form of know-how could be very beneficial in this enhanced era. Under its steering users can get all answers to their headaches in the email I'd. It is an exciting subject matter but these days I am not free to speak extra about it due to the fact I am busy with my fiancee. Do you already know that I discover her from latina girls. These ladies have lovely splendor. If you furthermore may be fascinated to repair meeting with latina girls I assist you to.

  • -1
Anyilo
28

Excelente trabajo, he querido descargar tus publicaciones, pero no puedo, aun cuando dices que puede descargar gratis , no se puede, creo que hay que ser congruentes y hacer lo que decimos. Aún así excelente trabajo, todo tiene su costo.

john2212
29

I wanted to download CSS3 cheatsheet but the download site was not starting the download. Thanks to Surfshark coupon code that gave me VPN at low price so that i can connect to the download site from different server and download the CSSs cheatsheet

David Hug
30

Excellent work. I recently discovered your blog and have enjoyed reading your posts. I’m looking for fresh postings to help me learn more. Thank you for providing such useful information about artificial intelligence.

erotic massage
33

It's obviously true that back rubs are reviving and discharge the poisons in the body. Yet, not just this back rubs additionally discharge endorphins in your cerebrum that you cheerful and make it simpler for you talk and cooperate with your accomplice. Since a back rub is additionally extremely cozy it fabricates a passionate associate between the accomplices getting the back rub.Visit erotic massage

  • -1
massage parlour near
35

Myotherapy, also known as massage therapy, is the art of manipulating and kneading a person's soft-tissues or muscles in order to improve their health or wellbeing. This is a type of manual therapy that involves holding, moving and applying pressure on the muscles, tendons and ligaments.Visit massage parlour near me

  • -1
body massage near me
36

Are you looking for the best body to body massage services in Bangalore? Come visit our spa and we will make sure you leave with a smile on your face. Our masseuses are trained professionals who know how to give you exactly what you need.Visit body massage near me

  • -1
body spa near me
37

Skin well being requires sustenance sometimes. Standard spa treatment prompts the shining and sound skin. That is most likely the motivation behind why body spa is so well known among ladies.Visit body spa near me

  • -1
patsm00re18
38

A fantastic point-and-click adventure game is Dark Dome's Nowhere House. The journey of Adria, who visits a run-down house at the top of the hill with two companions, is followed throughout the game. The Nowhere House is rumored to be haunted by a witch and to be cursed. Many years ago, she was found and killed in Hidden Town. Now you can watch and enjoy the most awaited games on PC by wathching the video on youtube and learn how to play it.  link: https://youtu.be/N_AqTiFAHrw

rocket soccer derby
41

Primero conocí Traffic/day Rate the Development Notes gracias a un amigo mío que me lo presentó. Estoy muy impresionado porque es muy bueno. pero aprendo más, así que solo sé como tal. Ahora tengo una visión más general. Este artículo es realmente detallado y fácil de entender. muchas gracias. rocket soccer derby

Publica tu opinión