Aprende Web
Crea y diseña tus sitios en la Web.
Mi primera web
Aprender a hacer una sencilla web paso a paso partiendo de cero.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 4
Visitas el mes pasado: 10
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
5. Menú lateral (II)
5.2 Estilo de la caja
Diseño del "div"
En el paso anterior creamos un menú mediante una etiqueta div, que pretendía diferenciarse del resto de la página, como un elemento aparte, pero de momento parece no diferenciarse mucho. Ahora, mediante la aplicación del estilo, vamos a darle un nuevo aspecto.
Vamos a dar unas cuantas instrucciones en CSS, seguro que algunas de ellas te suenan de haberlas empleado. Abre el archivo estilo.css con el bloc de notas y después de la última linea escribe:(texto en verde)
....
a:hover { color: rgb(175,54,93); }
a:active { color: rgb(175,54,93); }
div { float: left; width: 160px; border: 1px black solid;
background-color: rgb(224,240,255); }
Vamos a ver qué significan las diferentes propiedades que hemos aplicado a la caja o "div"
- float: left; : La propiedad float ya la hemos visto cuando insertamos la imagen de la derecha. Se trata de hacer "flotar" la caja o "div" sobre la página, de modo que el espacio que no ocupe puede ser ocupado por el resto de elementos.
- width: 160px; : indica el ancho de la caja. en este caso le hemos dado 160 píxeles.
- border: 1px black solid; : define el borde de la caja. en este caso le hemos dado el grosor de un pixel, el color negro (black) y el estilo sólido (solid). estos valores deben aparecer en este orden (medida, color, estilo) para que tenga efecto.
- background-color: rgb(224,240,255); : Esta propiedad, ya vista anteriormente, da el color de fondo a la caja o "div".
Una vez escrito el código CSS en la página, guardamos y cerramos el bloc de notas, y abrimos el archivo index.html con el navegador para ver el resultado:
Tu página Web quedará así: Ver mi Web.
Como puedes ver ahora aparece el texto dentro de un recuadro, pero el aspecto tanto del texto, como de los márgenes, queda un tanto raro, vamos ahora a mejorarlo.
Margenes de la caja
Vamos ahora a ocuparnos de los márgenes de la caja o div. Más tarde nos ocuparemos del aspecto del texto. Si recuerdas, cuando insertamos la imagen, le dimos unos márgenes para que el texto de la página no quedara pegado a ella; y para que la imagen no quedara pegada al borde derecho de la pantalla. Aquí se trata de hacer exactamente lo mismo. Mediante la propiedad margin aplicaremos un margen a la derecha y a la izquierda de la caja.
Por otra parte, la propiedad padding nos crea un margen interno, es decir entre la línea del borde y el texto. Aplicando esta propiedad conseguiremos que el texto no se quede pegado a la línea del margen.
Vamos a aplicar estas propiedades. Abre el archivo estilo.css con el bloc de notas, y en la ultima línea, añadimos las siguientes propiedades:(escribir el texto en verde)
Una vez que hemos escrito el texto, guardamos y cerramos el bloc de notas, y abrimos el archivo index.html con el navegador para ver los resultados.
Tu página Web quedará así: Ver mi Web.
Como ves, ya hemos conseguido poner unos márgenes, para que el recuadro quede separado del texto exterior y del borde de la página.
En el próximo paso le daremos estilo al texto y a los enlaces del menú, para que sean diferentes de los que hay en la página.
ir al siguiente paso: Estilo del texto del menú
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com