3. CSS
Lee el siguiente tutorial:
http://www.w3.org/Style/Examples/011/firstcss.es.html
Y prueba los diferentes códigos de ejemplo para ver el efecto. No copies sólo el ejemplo de la página. Haz diferentes variaciones: cambia colores, tipos de letra, justificaciones, etc.Haz una página que se llame css.html con el primer ejemplo que se describe, y otra llamada css2.html y estilos.css con el segundo ejemplo. No hace falta que teclees todo. Puedes ir copiando y pegando.
Asegúrate de entender todo bien para poder hacer los ejercicios que vendrán después
4. Ejercicio de CSS
Haz una página con las siguientes condiciones
1. Debe tener una hoja de estilo independiente de la página de contenidos
2. Debe tener un estilo definido para el título de la página, otro para los títulos de los párrafos y otro para el texto de contenido
3. Debe tener una imagen
4. Debe tener un menú de navegación con enlaces a dos páginas de internet y a una realizada por ti.
5. Debe tener una firma o pie de página con tu nombre y apellidos, separada del cuerpo de la página por una línea
6. El fondo de la página debe ser verde claro. Recuerda que el código RGB consiste en decir la cantidad de rojo, la cantidad de verde y la cantidad de azul en colores luz. FFFFFF será blanco porque todos los colores luz están al máximo. Debes poner al máximo el verde y añadir luz de los otros dos colores para que el color quede claro.
5. Modelo de cajas
Normalmente una página web está formada por varios bloques rectangulares. Por ejemplo un rectángulo arriba con el título y alguna imagen, otro a la izquierda con un menú, uno central con el cuerpo de la página, otro con otro menú a la derecha, un pie de página. Cada uno de esos rectángulos se llama caja.
Vamos a ver un ejemplo en el que introducimos una caja en una página web. Fíjate que la caja se llama caja1. Puedo añadir más cajas con otros nombres.En la hoja de estilo del siguiente ejemplo aparecen las propiedades border, margin y padding. Modifica sus valores para ver el significado. Copia y pega la página y la hoja de estilo.:
Esta es la página
<html>
<head>
<title>cajas</title>
<link rel="stylesheet" href="estilocaja.css">
</head>
<body>
<h1>AQUÍ ABAJO VA UNA CAJA</h1><br>
<div id="column1">
<p>Texto de la caja
</p>
</div>
</body>
</html>
Y esta es la hoja de estilos:
#column1 {
width: 80px;
border: 10px solid orange;
margin: 40px 40px ;
padding: 10px 10px;
}
}
Este es otro ejemplo con varias cajas
Esta es la página
<html>
<head>
<title>cajas</title>
<link rel="stylesheet" href="estilocaja.css">
</head>
<body>
<h1>AQUÍ ABAJO VA UNA CAJA</h1><br>
<div id="caja1">
<p>Texto de la caja
</p>
</div>
</body>
</html>
Y esta la hoja de estilo:
#caja1 {
width: 80px;
border: 10px solid orange;
margin: 40px 40px ;
padding: 10px 10px;
}
}
En el siguiente ejemplo vamos a hacer una página con varias cajas
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<link rel="stylesheet" href="estilocajas.css">
</head>
<body>
<div id="caja1">
Soy una caja verde y estoy pegada a mi padre el elemento body Nuestras dos cajas empiezan en el mismo sitio pero yo soy más pequeña y ocupo menos espacio. Pero tapo un trocito de mi padre, que es una caja negra.
</div>
<div id="caja2">
Soy una caja amarilla y estoy a 75 píxeles del techo y al 125píxeles de la izquierda. También tapo un trocito de mi padre. Mis códenadas 0,0 están
</div>
<div id="caja3">
Soy una caja azul y estoy pegada a mi padre, pero esta vez a la derecha.
</div>
</body>
</html>
Y éste sería estilocajas.css:
body { background-color: black;
}
div#caja1 {
position:absolute;
left: 0px;
top: 0px;
background-color: green;
width: 200px;}
div#caja2 {
position:absolute;
left: 350px;
top: 150px;
background-color: #FFCC33;
width: 200px;}
div#caja3 {
position:absolute;
right: 0px;
top: 0px;
background-color: blue;
width: 200px;}
Haz una página con diferentes cajas: una cabecera, un menú lateral, un cuerpo de página y un pie de página. Debe cumplir las siguientes condiciones:
La cabecera debe tener una imagen de fondo.
El menú lateral debe tener un color de fondo de color diferente al cuerpo de página
El pie de página debe tener el mismo color que el menú lateral, pero más claro
Haz una página a tu gusto, pero no pierdas tiempo añadiendo contenido, copia los textos de otra página sin importarte de qué tratan. Aquí hay algunos tutoriales por si te hacen falta.
Bordes de cajas:
http://www.sidar.org/recur/desdi/traduc/es/css/box.html
Letras
http://html.conclase.net/w3c/html401-es/present/styles.html
Descarga una página de estilo de la siguiente página:
http://www.freecsstemplates.org/
Analízala y modifícala a tu gusto