Untitled

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset='utf-8' />
			<title>Ejemplo JS.</title>
		<style>
		.contenedor{width: 1024px;
					margin: auto;
					}
		.conborde{border: 10px #8000FF inset;
						border-radius: 10px;
						text-align: center;
						padding: 30px;
						box-shadow: 3px -2px 6px rgba(0, 0, 0, 0.6);
						}
		.tam{position: relative;
				top: 10px;
				left: 50px;
				padding: 10px;
				background-color: #D9FFFF;
				border: 2px grey outset;
				width: 270px;
				font-family: Chewy;
				font-size: 20px;
				box-shadow: 3px -2px 6px rgba(0, 0, 0, 0.6);
				}
		.size{width: 75px;
				font-family: Chewy;
				padding: 5px;
				background-color:#E1E1E1;
				border: 2px grey outset;
				font-size: 20px;
		}
		.fuente{position: relative;
				left: 150px;
				top: -32px;
				font-family: Chewy;
				padding: 5px;
				background-color:#80FF80;
				border: 2px #008000 outset;
				font-size: 20px;
				width: 320px;
				box-shadow: 3px -2px 6px rgba(0, 0, 0, 0.6);
				}
		.font{width: 300px;
				padding: 5px;
				background-color:#E1E1E1;
				border: 2px grey outset;
				font-size: 24px;
				font-family: Chewy;
				}
		.cajafondo{width:30px;
					   height:30px;
					   border:1px gray solid;
					   font-size:0px;
					   border-radius:5px;
					   text-align:center;
					   float:left;
					   margin:5px;
						}
		.colores{position: relative;
					top: 300px
					width: 1024px;
					}
		.fondo{position: float;
				float: left;
				width: 500px;
				}
		.color{position: float;
				float: left;
				width: 500px;
					}
			@font-face {
			font-family:"orange juice";
			src: url("fonts/orange juice 2.0.ttf");
			}
			.orange{font-family: "orange juice";
			}
			@font-face {
			font-family:"Coming Soon";
			src: url("fonts/ComingSoon.ttf");
			}
			.coming
			{font-family: "Coming Soon";
			}
			@font-face {
			font-family:"Chewy";
			src: url("fonts/Chewy.ttf");
			}
			.arial{font-family: Arial;
			}
			.comic{font-family: "Comic Sans MS";
			}
			.forte{font-family: Forte;
			}
			.cambria{font-family: Cambria;
			}
			.time{font-family: "Times News Roman";
			}
		</style>
		<script>
			function Cambiar_letra(size)
					{var elobjeto=document.getElementById("lacaja");
					var valor=document.formulario1.tam.value+"pt";
					if(elobjeto)
						{elobjeto.style.fontSize=valor;
						}
						else
						{alert("No se puede seleccionar el objeto.");
						}
					}

			function Cambiar_fuente(size)
					{var elobjeto=document.getElementById("lacaja");
					var valor=document.formulario2.tam.value;
					if(elobjeto)
						{elobjeto.style.fontFamily=valor;
						}
						else
						{alert("No se puede seleccionar el objeto.");
						}
					}

			function Cambiar_Color(r,g,b)
					{var elobjeto=document.getElementById("lacaja");
					if(elobjeto)
						{elobjeto.style.color="rgb("+r+","+g+","+b+")";
						}
						else
						{alert("No se pudo seleccionar el objeto.");
						}
					}

			function Cambiar_fondo(r,g,b)
					{var elobjeto=document.getElementById("lacaja");
					if(elobjeto)
						{elobjeto.style.backgroundColor="rgb("+r+","+g+","+b+")";
						}
						else
						{alert("No se pudo seleccionar el objeto.");
						}
					}
		</script>
	</head>
	<body>
		<br /><br />
		<div class="contenedor">
			<div class="conborde" id="lacaja">
				Este es el contenido de la caja
			</div>
			<div class="tam">
				Selecciona el tamaño de la letra:
					<form name="formulario1">
					<select name="tam" onchange="Cambiar_letra();" class="size">
						<script>
							for(i=10;i<=40;i=i+2)
							{document.write("<option>"+i+"</option>");
							}
						</script>
							</script>
						</select>
					</form>
			</div>
			<div class="fuente">
					Selecciona el tipo de fuente:
				<form name="formulario2">
					<select name="tam" onchange="Cambiar_fuente();" class="font">
						<option class="time">Times News Roman</option>
						<option class="arial">Arial</option>
						<option class="comic">Comic Sans MS</option>
						<option>Chewy</option>
						<option class="coming">Coming Soon</option>
						<option class="orange">orange juice</option>
						<option class="forte">Forte</option>
						<option class="cambria">Cambria</option>
					</select>
				</form>
			</div>
			<br />
			<div class="colores">
				<div class="color">
				<h1 class="comic">Color de texto</h1>
					<script>
						for(r=0;r<255;r=r+50)
						 for(g=0;g<255;g=g+50)
						  for(b=0;b<255;b=b+50)
						   {document.write("<div class='cajafondo' style='background-color:rgb("+r+","+g+","+b+");' onclick='Cambiar_Color("+r+","+g+","+b+");'>"+r+","+g+","+b+"</div>");
						   }
					</script>
				</div>
				<div class="fondo">
					<h1 class="comic">Color del fondo</h1>
						<script>
							for(r=0;r<255;r=r+50)
							 for(g=0;g<255;g=g+50)
							  for(b=0;b<255;b=b+50)
							   {document.write("<div class='cajafondo' style='background-color:rgb("+r+","+g+","+b+");' onclick='Cambiar_fondo("+r+","+g+","+b+");'>"+r+","+g+","+b+"</div>");
							   }
						</script>
				</div>
			</div>
			<div class="cajavolver">
				<a href="..\index.html"><img src="img\volver.png" title="Volver a la página principal"></a>
			</div>
		</div>
	</body>
</html>