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: 14
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
8. La segunda página (III)
8.3. La hoja de estilo
Enlazar archivos.
Para que las instrucciones en CSS funcionen tendremos que enlazar el archivo plantilla.html con su archivo CSS correspondiente, que es el que hemos llamado general.css.
Abre el archivo plantilla.html con el HTML-Kit y en la cabecera. (head) después de la línea <,title> Plantilla </title> escribiremos lo siguiente:(texto en azul)
...
<head>
<title>Plantilla</title>
<link rel="stylesheet" type="text/css" href="general.css" />
</head>
....
Con esta instrucción hemos enlazado los dos archivos, de forma que las instrucciones del archivo CSS se aplicarán en el archivo HTML. Es por tanto muy importante que esté bien escrita y sin errores, ya que de lo contrario podrían quedar sin enlazar. Una vez escrita la instrucción guardamos el archivo.
Instrucciones generales de estilo
El archivo general.css de estilo, está vacío. Vamos a darle unas instrucciones generales que en principio se aplican a toda la página, aunque luego podamos cambiarlas en sus diferentes apartados. Abrimos pues el archivo general.css con el HTML-Kit. y escribimos lo siguiente:
* { margin: 0px auto; text-align: center }
body { background-color: white; ;font-family: arial; font-size: 1em; }
Lo que hemos hecho aquí es aplicar unas normas generales de estilo que afectan a toda la página:
- margin: 0px auto; :
Con el selector universal ("
*" asterisco) hemos dado unos márgenes para que se vean en todos los navegadores, hemos eliminado los márgenes superior e inferior ( 0px ); el valor auto que hemos dado en los márgenes laterales, centra la página horizontalmente - text-align: center : Con esta instrucción dejamos en principio todos los textos centrados, luego, si queremos ponerlos de otra manera, ya daremos más instrucciones.
- background-color: white; : establecemos el color de fondo para la página, aunque en la mayoría de los navegadores suele ser el blanco, no está de más remarcarlo.
- font-family : arial ; font-size : 1em ; : definimos el tipo y el tamaño de letra que en principio usaremos, aunque también puede cambiarse en los distintos apartados.
Después de escribir estas instrucciones guardamos el archivo, y abrimos el archivo plantilla.html con el navegador para ver los cambios.
Tu página Web quedará así: Ver mi Web.
Parece que no hemos hecho gran cosa, ahora el texto en lugar de estar a la derecha aparece centrado, y con otro tipo de letra, pero de momento, esas son las instrucciones que hemos dado.
En el próximo paso daremos forma a las cajas o divs mediante la hoja de estilo,
Ir al siguiente paso: estilo de las cajas.
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