Diario IFCD0110 Castro Urdiales: PAGINAS DE CSS

Página cero con css incrustado

	<HTML>
	<HEAD>
	<meta charset="utf-8"/>
	<TITLE>CSS incrustada</TITLE>
	<STYLE type="text/css">
	H1 { color: blue }
	P { color: red }
	</STYLE>
	</HEAD>
	<BODY>
	<H1>Título color azul</H1>
	<P>Un párrafo cualquiera...</P>
	</BODY>
	</HTML>

Página uno con css en línea

	<HTML>
	<HEAD>
	<meta charset="utf-8"/>
	<TITLE>CSS en línea</TITLE>
	<STYLE type="text/css"></STYLE>
	</HEAD>
	<BODY>
	<p style="text-align: left; color: blue"> Texto alineado a la izquierda y
	de color azul </p>
	<p style="color:red">Párrafo de texto en color rojo</p>
	</BODY>
	</HTML>

Página dos con css en archivo externo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Título</title>

	<LINK REL="stylesheet" HREF="estilos1.css" TYPE="text/css">
	</head>

	<body>
	<h1> Bienvenidos al maravilloso mundo del CSS</h1>
	<p> Vamos a empezar con el CSS </p>
	</body>
	</html>

Css externo

H1 {

font-family: Arial, Sans-serif;

font-size: 19pt;

font-weight: 900;

color: #0000FF;

text-align: center;

}

p {

font-family: tekton pro;

font-weight: bold;

color: black;

}

Página tres

<HTML>

<HEAD>

<TITLE>CSS en línea</TITLE>

body { background-color: #CCFFFF;

background-repeat: repeat-y;

background-position: top left; }

h1 {font-family: "Plateia"; font-style: italic; font-weight: 600; text-align: center; }

p {font-family: "Segoe Script", sans-serif; font-size: x-large; }

h2 {

border: blue 8px inset;

font-family: "Segoe UI" ; text-align: center; font-size: 75%; font-size: x-large; color: #CC0066; }

h3{background-color: transparent;

height: 250px;

left: 0px;

position: relative;

top: -50px;

width: 150px; font-family: "FrankRuehl", sans-serif; font-size: xx-large; text-align: center;

border: purple 5px dotted; float: left; margin-right: 50px;

}

h4{background-color: pink;

height: 250px;

margin-left: 150px;

margin-top: 200px;

width: 150px; font-family: "FrankRuehl", sans-serif; font-size: xx-large; text-align: center;

border: purple 5px dotted; float:left; margin-right: 50%; }

.botoncillo {

-moz-box-shadow:inset -1px 2px 0px 0px #ffffff;

-webkit-box-shadow:inset -1px 2px 0px 0px #ffffff;

box-shadow:inset -1px 2px 0px 0px #ffffff;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d3b7eb), color-stop(1, #631d9c));

background:-moz-linear-gradient(top, #d3b7eb 5%, #631d9c 100%);

background:-webkit-linear-gradient(top, #d3b7eb 5%, #631d9c 100%);

background:-o-linear-gradient(top, #d3b7eb 5%, #631d9c 100%);

background:-ms-linear-gradient(top, #d3b7eb 5%, #631d9c 100%);

background:linear-gradient(to bottom, #d3b7eb 5%, #631d9c 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3b7eb', endColorstr='#631d9c',GradientType=0);

background-color:#d3b7eb;

-moz-border-radius:12px;

-webkit-border-radius:12px;

border-radius:12px;

border:1px solid #fffcff;

display:inline-block;

cursor:pointer;

color:#ffffff;

font-family:arial;

font-size:18px;

font-weight:bold;

padding:9px 22px;

text-decoration:none;

text-shadow:0px 1px 10px #2e2733;

}

.botoncillo:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #631d9c), color-stop(1, #d3b7eb));

background:-moz-linear-gradient(top, #631d9c 5%, #d3b7eb 100%);

background:-webkit-linear-gradient(top, #631d9c 5%, #d3b7eb 100%);

background:-o-linear-gradient(top, #631d9c 5%, #d3b7eb 100%);

background:-ms-linear-gradient(top, #631d9c 5%, #d3b7eb 100%);

background:linear-gradient(to bottom, #631d9c 5%, #d3b7eb 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#631d9c', endColorstr='#d3b7eb',GradientType=0);

background-color:#631d9c;

}

.botoncillo:active {

position:relative;

top:1px;

}

#gato

{

}

.uno{border: purple 5px dotted;height: 57px; width: 250px; padding: 10px; font-family: Source Sans Pro Black; text-align: center; float:left; margin-right: 23%; }

.dos{border: blue 5px dotted;height: 57px; width: 250px; padding: 10px; font-family: Andalus; text-align: center; float:left; }

.tres{border: green 5px dotted;height: 57px; width: 250px; padding: 10px; font-family:Georgia; text-align: center; float:right; }

</style>

</head>

<body>

<h1>Bienvenidos</h1>

<h2>Coged asiento, giratorio a poder ser y girad como si no hubiese un mañana, así la página será más sicodélica y divertida. <br>

No tenemos presupuesto para efectos especiales, es lo que hay. Si quieres ver estrellas, te pegas un golpe en la cabeza.</h2>

<p style="text-align: left; color: purple">Este párrafo aparece con fuente arial </p>

<p style="text-align: right; color: brown">Mentira, eres comic sans <img src="Enfadado.gif" alt="enfadado"></p>

<p style="text-align: left; color: purple">Mientes, soy un gato <img src="xws3q.gif" alt="miau"></p>

<p style="text-align: right; color: brown">Lo que eres es un gato disfrazado de gallina <img src="emoticones-japonese-de-gatos15.gif" alt="galligato"></p>

<p style="text-align: left; color: purple">¿Si? pues tú eres un alien con gafas <img src="gato-agresivo.gif" alt="mew enfadado"></p>

<p style="text-align: right; color: brown">No es posible <img src="lg-geek-nerd-smiley-surprise-emoticon.png" width="50" height="50" alt="alien"></p>

<p style="text-align: left; color: purple">Lo es y lo sabes, además eres medio vampiro <img src="lg-Questioning-emoticon-smiley.png" width="50" height="50" alt="vamp"></p>

<p style="text-align: right; color: brown">Falacias, ahora me pico y no existo<img src="images.jpg" width="50" height="50" alt="enfado"></p>

<p style="text-align: left; color: purple">Qué poco original convertirse en un fantasma<br> yo me convierto en un murciélago y me voy volando <img src="emoticones-halloween.gif" width="50" height="50" alt="vamp"></p><br><br><br>

<h3> Este es un cuadro de prueba. De repente lo pongo, así, a lo loco</h3>

<h4> Hola, yo soy el cuadradito rosa y me quedo por aquí, saludando</h4>

<div align="center"><a href="#" class="botoncillo">Aqui pongo un botón</a>

<a href="#" class="botoncillo">Ahora pongo un 5</a></div>

<p class="uno">cuadradito uno</p>

<p class="dos">cuadradito dos</p>

<p class="tres">cuadradito tres</p>

<h5>

</body>

</HTML>

Página cuatro

<!Doctype html>
	<html lang="es"><html>
	<head>
	<!meta charset="utf-8"/>
	<title>Ejercicio css</title>
	<style type="text/css">
	img {

	float: top;
	float: left;
	float: bottom;
	border-radius: 15px ;
	}

	h1{
	text-align: center;
	font: oblique bold 120% cursive;
	font-size: 380%;
	color: white;
	margin: 10px;
	height: 150px;
	text-align: center;
	padding: 8px;
	width: 80%;
	border: transparent;
	background: #58D3F7;
	border-radius: 15px ;
	}
	#cssmenu{
	height: 200px;
	width: 250px;
	padding-top: 20px;
	padding-right:20px;
	font-family: Comic Sans MS;
	text-align: left;
	float:left;
	margin-left: -270px ;
	background: #FAAC58;
	border-radius: 15px ;
	margin-top: 60px;
	}

	li a{ color:#000000; }

	#contenedor {
	width:1300px;
	border:1px solid #333333;
	height: 1500px;
	background-color:#FFF8F0;
	margin:40px auto;

	border-radius: 15px ;
	text-align:left;

	}

	h2{ font-family: MV Boli; }

	#contenido{
	float:left;
	margin-right: 20px ;
	background: #58FAAC;

	width: 900px;
	border-radius: 15px ;
	padding-top: 20px;
	padding-right:20px;
	padding-left:20px;
	padding-bottom:20px;
	margin-top: -220px;
	margin-left: 300px;

	}
	#contenido img{ margin-top: -35px;
	margin-left: 700px;

	}
	.centrado{
	margin-left: 500px;
	margin-top: 80px;}
	</style>
	</head>
	<body>
	<div id='contenedor'>
	<img src="libro-abierto.jpg" width="270" height="200" alt="libro">
	<h1>CUENTAME UN CUENTO</h1>
	<p></p>
	<div id='cssmenu'>
	<ul>
	<li><a href='https://es-la.facebook.com/notes/juan-carlos-g%C3%B3mez/autovaloraci%C3%B3n-cuento-el-verdadero-valor-del-anillo/10151460096772219'><span>El verdadero valor del anillo</span></a></li>
	<li><a href='http://irenia.blogia.com/2004/042801-elefante-encadenado-jorge-bucay.php'><span>El elefante encadenado</span></a></li>
	<li><a href='http://www.psicoweb.unlugar.com/alas.html'><span>Las alas son para volar</span></a></li>
	<li><a href='http://www.psicoweb.unlugar.com/ranitas.htm'><span>Las ranitas en la crema</span></a></li>
	<li><a href='http://www.psicoweb.unlugar.com/prostibulo.htm'><span>El portero del prostíbulo</span></a></li>
	<li><a href='http://las1001noches.bligoo.es/cuento-el-tesoro-enterrado-jorge-bucay#.U-B0vvl_smk'><span>El tesoro enterrado</span></a></li>
	</ul>
	</div>
	<div id='contenido'>
	<h2>Lluvia nocturna</h2>
	<p>Era una noche tranquila y oscura, la humedad se podía respirar, incluso palpar. Cerró los ojos para sentir el viento, agudizó sus sentidos para recibir toda la información que le pudiesen transmitir<br>
	Cada parte de su cuerpo estaba preparada para percibir la densidad del ambiente, para escuchar el murmullo del viento entre las hojas, aquellos susurros naturales que parecía que en cualquier momento se tornarían en palabras entendibles. Supo a ciencia cierta que iba a llover, todo lo indicaba a pesar de que no podía ver las nubes. <br>
	La luna no brillaba aquella noche nubosa, no había ni un recóndito espacio en el cielo que diese esa posibilidad, por lo que el bosque era más sombrío que de costumbre.
	De seguro no habría tormenta, el ambiente no tenía para nada esa sensación cálida y esa presión electrificada, en cambio, el agua que se aproximaba podía hasta olerse.
	Se apresuró a atravesar el bosque a pesar de que la visibilidad era mínima, esquivando con agilidad felina cada rama, cada arbusto y cada raíz que sobresalía de la tierra. Su habilidad era realmente admirable, pero todo era cuestión de práctica, aquel bosque había formado parte de su infancia y esos recorridos nocturnos siempre fueron habituales
	desde el momento en el que perdió su miedo a los lugares oscuros.
	A medida que avanzaba, empezó a sentir el disimulado impacto de diminutas y silenciosas gotas en su rostro, la lluvia por fín comenzaba, mas aún no había llegado a su ansiado destino.
	Paulatinamente la frecuencia con que descendían las gotas de lluvia fue aumentando a la par que la sensación húmeda de las hojas con las que en ocasiones se rozaba al pasar.
	No tardó demasiado en llegar a su claro favorito. Una vez allí, paró un momento para tomar algo de aliento, tras esto y ya colocada en el centro del lugar, cerró los ojos, inspiró profundamente y se dispuso a extender sus brazos, como si fuese a darle un abrazo al viento.
	Así dispuesta, comenzó a dar vueltas sobre si misma, girando y girando en una danza silenciosa en mitad de la oscuridad y sintiendo en su piel cada pequeña gota de lluvia y sintiéndose viva como nunca antes.
	<br><br>
	<h2 style="font-family: MV Boli; font-size: 12pt">Melani</h2>
	</p>
	<img src="bosque.gif" alt="bosque">
	</div>

	<img class="centrado" src="hada-libro-gif.gif" alt="hada">


	</div>


	</body>
	</html>

Diario IFCD0110 Castro Urdiales

menu desplegable

martes, 5 de agosto de 2014

PAGINAS DE CSS

Página cero con css incrustado

Página uno con css en línea

Página dos con css en archivo externo

Css externo

Página tres

Página cuatro

No hay comentarios:

Publicar un comentario

analytics