Cheatsheet
How do I make an cheatsheet?
What is a cheatsheet? How do you make a cheatsheet? This script and codes were developed by Ex HTML on 15 September 2022, Thursday.
Cheatsheet - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cheatsheet</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--
Contenedores div
-->
<div>Contenedor div</div>
<!--
Encabezados
-->
<h1>Encabezado 1</h1>
<h2>Encabezado 1</h2>
<h3>Encabezado 1</h3>
<h4>Encabezado 1</h4>
<h5>Encabezado 1</h5>
<h6>Encabezado 1</h6>
<!--
Párrafos
-->
<p>Párrafo de texto</p>
<p>Con <strong>negrita</strong> y <em>cursiva</em> y un salto <br> de párrafo</p>
<!--
Enlaces
-->
<a href="https://www.google.com" target="_blank">Enlace</a>
<!--
Lista desordenada
-->
<ul> <li>Elemento de lista</li> <li>Elemento de lista</li> <li>Elemento de lista</li>
</ul>
<!-- Lista ordenada -->
<ol> <li>Elemento de lista</li> <li>Elemento de lista</li> <li>Elemento de lista</li>
</ol>
<!--
Imagen
-->
<img src="http://placekitten.com/400/300" />
<!--
Otras etiquetas alternativas a 'div' y más semánticas
-->
<header>Cabecera</header>
<nav>Menu</nav>
<section>Seccion</section>
<article>Articulo</article>
<aside>Sidebar</aside>
<footer>Pie</footer>
</body>
</html>
Cheatsheet - Script Codes CSS Codes
/* Ayuda visual -- no es importante */
* {background:rgba(0,0,0,0.1)}
/* Clearfix hack (para solucionar problemas con cajas que tienen elementos flotados dentro y no pueden calcular su alto ni pintar imagenes y colores de fondo )
Aplicaremos la clase 'clearfix' a los elementos que contengan otros elementos flotados y nos den problemas de representacion
Más info: http://nicolasgallagher.com/micro-clearfix-hack/
*/
.clearfix:before,
.clearfix:after {content:""; display:table;}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}
/* - - - - - - - -
CONTENEDORES
*/
.caja { /* modelo de caja: content-box (default), border-box */ box-sizing: border-box; /* add browser prefixes ! */ /* dimensiones */ width: 100px; height: 100px; max-width: 100px; min-width: 100px; max-height: 100px; min-height: 100px; /* relleno */ padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; /* abreviado: top, left, bottom, right */ padding: 10px 20px 30px 40px; /* abreviado: mismo padding para todos los lados */ padding: 10px; /* margen */ margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; /* abreviado: top, left, bottom, right */ margin: 10px 20px 30px 40px; /* abreviado: mismo margin para todos los lados */ margin: 10px; /* borde: grosor, estilo[ solid, dashed, dotted ], color */ border-top: 2px solid #0ff; border-bottom: 2px solid #0ff; border-left: 2px solid #0ff; border-right: 2px solid #0ff; /* mismo borde por todos los lados */ border: 1px dashed #0f0; /* fondo (version abreviada) */ background: #0ff; background: url('imagen.jpg') no-repeat top left; /* fondo (todas las propiedades) */ /* color */ background-color: #0ff; /* imagen */ background-image: url('imagen.jpg'); /* repeticion de imagen de fondo: repeat, no-repeat, repeat-x, repeat-y */ background-repeat: no-repeat; /* posicionamiento de imagen de fondo: top, left, bottom, right, center... Se usan combinados: 'top center', 'bottom right' ... */ background-position: top left; /* tamaño de imagen de fondo: contain, cover, ... ver transparencias */ background-size: auto; /* anclaje de imagen de fondo: scroll, fixed */ background-attachment: fixed; /* desbordamiento de contenido: auto, scroll, hidden */ overflow: auto; /* display: 'block', 'inline-block', 'inline', 'none' */ display: block; /* float: 'left', 'right' - empuja la caja hacia uno de los lados y 'fuerza' al elemento siguiente a colocarse a su lado */ float: left; /* clear: evita que el elemento anterior flotado le fuerce a colocarse a su lado. El flujo del documento vuelve a su modo normal */ clear: both; /* position: 'static', 'relative', 'absolute', 'fixed' */ position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; /* sombra: x, y, blur, color */ box-shadow: 2px 2px 6px rgba(0,0,0,0.5); /* add browser prefixes ! */ /* borde redondeado */ border-radius: 5px; /* add browser prefixes ! */ /* Modificar el modelo de caja por defecto */ box-sizing: border-box; /* add browser prefixes ! */
}
/* - - - - - - - -
TEXTO
*/
.estilo-texto { /* fuente */ font-family: Helvetica, arial, sans-serif; /* tamaño: px, pt, %, em, rem */ font-size: 16px; /* peso: normal, bold */ font-weight: bold; /* estilo: normal, italic */ font-style: italic; /* transformación: uppercase, lowercase */ text-transform: uppercase; /* decoración: underline, none... */ text-decoration: underline; /* interlineado: px, pt, %, em, rem */ line-height: 1.5em; /* espacio entre caracteres: px, pt, %, em, rem */ letter-spacing: 1.2em; /* alineación: left, right, center, justify */ text-align: right; /* sombra de texto: x, y, blur, color */ text-shadow: 2px 2px 6px rgba(0,0,0,0,5); /* texto en columnas */ column-count: 3; column-gap: 2em; /* add browser prefixes ! */
}
/* - - - - - - - -
TRANSICIONES ENTRE ESTADOS
*/
/* estado en reposo */
.boton-cambiante { background:#f00; /* Transitions: propiedad, duracion, tipo de animacion, demora inicial de la animacion */ transition: background 0.2s ease-in-out 1s; /* add browser prefixes ! */
}
/* estado hover */
.boton-cambiante:hover { background:#0ff;
}
Developer | Ex HTML |
Username | exhtml |
Uploaded | September 15, 2022 |
Rating | 3 |
Size | 3,374 Kb |
Views | 26,312 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Slides-06-2 FLOATS | 1,744 Kb |
Test animation rotate concentric | 2,799 Kb |
Cursor mouse test | 1,972 Kb |
Smooth Scroll | 1,567 Kb |
Slides-05-1 BOX-MODEL | 1,637 Kb |
Expanding panels onmouseover | 2,342 Kb |
Slides-08-1 TEXTOS | 2,295 Kb |
Intramurs Typo | 2,065 Kb |
Slides-06-1 DISPLAY | 1,598 Kb |
Parallax tests | 2,238 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Addthis_button | Esambino | 1,691 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!