Tutorial de CSS - nivel basico

[Zane_]

Hoy se me ocurrio hacer algo bueno para los principantes. Decidi hacer un tutorial de CSS con las cosas más importantes del diseño de paginas.

Notas para los lectores:

- Debes saber al menos un poco de HTML.
- En mi caso he utilizado Dreamweaver pero tu puedes hacer todo esto con otro editor
- Te recomiendo que te descargues el ColorCup desde softtonic.es para tener más control sobre los colores.


--->Tutorial Basico de CSS


Tema 0: Utilizando ColorCup y un poco de Dreamweaver

---------ColorCup---------------

ColorCup es un programa muy util que te permite ver el color exacto de lo que tu quieras. El codigo esta listo para copiar y pegarlo en mi web (por ejemplo:"#FAD19D")No ocupa casi nada de espacio y es muy comodo. Verás que tiene dos opciones: una que parece un boligrafo y otro en forma de lupa. Haz clic sobre el boligrafo y muevelo par la pantalla, ya sea por el escritorio o por otra cosa. Veras que la imagen del centro se ha cambiado y el color superios tambien. Entre los dos esta el codigo del color. Con la lupa ocurre lo mismo, solo que no te muestra instantaneamente el color , lo tienes que buscar en la imagen del centro que esta ampliada varias veces y es facil esncontrar lo que buscas.Esto es basicamente el ColorCup, un programa muy sencillo para los colores. Puedes utilizar otro, pero en este tutorial bamos a usar el ColorCup.

----------Dreamweaver MX 2004 ---------------
Son pocos los que no conocen el Dreamweaver. Su ultima version es la MX 2004, usemosla. Cuando abras Dreamweaver, y si no tienes otros documentos sin cerrar, te aparecera una pantalla verde casi en el centro del menu Nuevo encontraras CSS. Pulsa ahi y ya tendras abierto un documento en limpio de CSS. Si te fijas pone /* CSS Document */ Esto es un comentario y lo puedes borrar. Hablando de comentarios Se empieza con /* y se termina con */. Muy facil no? Es bueno poner como comentario ahi el nombre de tu web o algo asi, es mucho más personalizado.

Tema 1: BODY { xxx }

En CSS para determinar las propiedades de una directiva primero tienes que escribir su nombre. Normalmente se empieza por BODY.
Despues ya sea en nueva linea o no (en realidad eso no importa) escribe : { y aqui empezamos a describir el BODY . la estructura basica es:

Directiva {
elemento: descripcion;
elemento: descripcion;
}

Ves que antes de empezar un nuevo elemento pongo ";" es para indicar que el anterior ya ha terminado y no necesito escribir nada más acerca de el.
Veamos un ejemplo real:

Código PHP:

  /* CSS de misitio.com */
 
BODY {
font-family:Arial, Helvetica, sans-serif;
color:#AADFAA;
background-color:#551F55;
} 
   

En Dreamweaver en realidad es mucho más facil, porque solo al escribir una letra obtienes la lista de todos los atributos. Los que lo han usado me comprenden.

Tema 2:Personalizando los enlaces

Es una cosa muy importante. El codigo se escribe dentro de BODY { }.
Se empieza por a: y a continuacion visioted, para los enlaces ya visitados, active - los activos . link - los enlaces y hover.. Es posible hacer que dos o más sean uguales. Ees mejor ver un ejemplo:

Código PHP:

  a:link, a:active {
    text-decoration: none;
    color: #466F8F;
}
a:visited {
    text-decoration: underline;
    color: #648AA7;
}
a:hover {
    text-decoration: none;
    color: #9FBDD4;
} 
   

Como habeis visto
el a:link y el a:active tienen unas propiedades iguales.
text-decorarion significa decoracion del texto.
color es el color del enlace
los enlaces ya visitados (a:visited) son subrayados (underline)

Text-decoration cuenta con más atributos pero ahora no los vamos a ver todos.

TRUCO: Muchas veces se consigue un efecto sorprendente usando
a:active {text-decoration: underline overline; }

sin utilizar comas entre underline y overline. Asi tu enlace activo tendra una linea abajo y otra arriba. Os recomiendo utlizar este efecto.

Tambien podeis utilizar
background-color:#00BFFF;
y asi tu enlace aaparecera en un fondo del color que ayas elegido para el.




(Más tarde publicaré la segunda parte)