Visita la Nueva Versión de ComoCrearTuWeb!!
Dreamweaver I CómoCrearTuWeb > DreamWeaver I > Un Poco de Estilo > Hoja de Estilo II
Introdución Donde Conseguirlo Como Descargarlo Como Instalarlo

 

El Comienzo :

Ideas Claras Organización Definir Sitios Alta en iEspana Definir Sitios II Página Principal Un poco de HTML Vista Previa Subir index.htm

 

Un poco de Estilo :

Con Estilo NotePad para Estilos Link a estilo.css La Hoja de Estilo Estilizando Carácteres Especiales Enlaces Fondo de Página Centrar Textos HTML de Centrado

 

Más cosillas :

Preferencias Buzón E-Mail Las Imágenes Hasta Ahora...

 Siguiente Menú 


Foro Dreamweaver

Volver al Menú


Página Anticuada. Visita la nueva versión.


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.

 

¿Sabias que..?

Dinos Algo..

Entra en el nuevo Foro CCTW


Esta versión es antigua. Visita la nueva web de: ComoCrearTuWeb


Entra en el nuevo Foro CCTW


Mas Cosillas..

Acerca de CCTW

Foro de Posicionamiento en Buscadores
ChatCCTW  Actualizaciones  Recomendar  Colabora  Errores?  Agradécemelo  Escríbeme
Actualizada el Jueves, 11-Ago-2005 21:56 "El que sabe leer sabe ya la más dificil de las artes" (Duclós)
Creada y diseñada por Jorgens