La Hoja de Estilo II
La Hoja de Estilo no es una página web, por lo que no empiezan ni acaban en <html>. Además no tiene ni cabecera (Head) ni cuerpo (Body) por lo que son mucho más sencillas. Lo que os indico ahora es el código que va a tener nuestra Hoja de Estilo. No os preocupéis si no entendéis algo, pues lo iré explicando conforme lo vayamos utilizando. Además, está bien explicado en la sección "Los Estilos" a la que podéis acceder desde el menú principal de CreaTuWeb si queréis más información.
Abrid el archivo "estilo.css" pulsando dos veces sobré él y copiad en él todo el siguiente código:
/* Esto es mi hoja de estilo */
BODY { background-color:orange ; }
A:link { font-weight: bold ; color: blue ; text-decoration: none; }
A:visited { font-weight: bold ; color: blue ; text-decoration: none; }
A:hover { font-weight: bold ; color: red ; }
A:active { font-weight: bold ; color: green ; }
P { font-family: Arial, Helvetica, sans-serif ; font-size: 17px ;
text-align:justify ; text-indent: 20px ; margin: 7px 8px 7px 8px ; }
/* Fin de mi hoja de estilo */
(Más adelante veremos como simplificar este trozo de código para que ocupe menos diciendo lo mismo)
A la hora de copiarlo quizas os vendría bien saber que:
- No se deben separar 17 de px. Es decir, vale "17px"(junto) pero no vale "17 px"(con un espacio en medio).
- Los signos "{" y "}" se escriben pulsando, a la vez, "Alt Gr" más una de las dos teclas que hay junto al Enter o Intro ,que llevan su símbolo correspondiente a esos corchetes o paréntesis.
Una vez copiado guardarla y cerrarla. Si ahora abrís la página "index.htm" con el DreamWeaver y hacéis "Vista Previa" para ver como se vería en Internet, (pulsad en "Archivo" + "Vista Previa en Explorador" + "Navegador" + "escoged uno"), veréis como sale el fondo de color naranja.
Además hemos definido otras características que más adelante os comentaré. Lo que quiero que sepáis es que a partir de ahora en lugar de tener que definir esas propiedades o características, solo tendremos que añadir la línea que añadimos antes entre <head> y <head> en cada una de las páginas que creemos más adelante. Esto, sin duda, es un gran ahorro de esfuerzo y espacio, entre muchas otras cosas.
Pasamos a comentar por encima el código de la Hoja de Estilos. Las líneas primera y última, que como véis, empiezan y acaban con /* y */, no son más que comentarios nuestros. Se usan para aclarar lo que estamos haciendo y no influyen en nada más. Si queréis poner algún comentario escribid esos símbolos al principio y al final del comentario.
La línea que comienza con BODY.... indica que el color de fondo de la página (del Body de la página) será naranja (orange). Si deseáis otro color (que es lo más seguro) podéis cambiar la palabra "orange" por otra que corresponda a algún color válido. Estos colores válidos se muestran en la sección "Los Estilos" de CreaTuWeb, en el menú principal, en la sección "Las Propiedades" si no recuerdo mal.
Las líneas que comienzan con A:... indican que los enlaces (o vínculos) se mostraran en negrita (bold) sin subrayado (text-decoration: none) y de colores distintos según el estado del enlace, es decir, azul (blue) en estado normal (link) y en enlaces previamente visitados (visited); rojo (red) cuando se pase el ratón por encima (hover) y verde (green) cuando el enlace esté pulsado (active). Si queréis otros colores ya sabéis lo que hacer.
La linea que empieza con P.... indica las características del texto de la web. El tipo de letra, el tamaño (17px) (deben ir seguidos el número y las letras "px"), que se represente justificado (text-align:justify), que la primera línea de cada párrafo este metida hacia la derecha un cierto espacio, también llamado "sangria" (text-indent:20px), y que cada párrafo se separe del resto una distancia de 7px (pixeles) por arriba y abajo y de 8px por los lados.
Más adelente iremos añadiendo más estilos, conforme nos vayan haciendo falta.
Por ahora vamos a escribir en "index.htm" un párrafo más largo que el que tenemos para comprobar lo de la primera línea (hemos dicho que tenía una sangria de 20px) y añadiremos un enlace para verificar que se muestra con los colores indicados, pero todo esto, en la página siguiente, que esta ya esta muy llena, je je je.
|
Introdución