Foros del Web » Creando para Internet » CSS »

Tutorial de CSS - nivel basico

Estas en el tema de Tutorial de CSS - nivel basico en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 03/10/2004, 06:43
 
Fecha de Ingreso: junio-2004
Mensajes: 76
Antigüedad: 13 años, 5 meses
Puntos: 2
Mensaje Tutorial de CSS - nivel basico

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:ArialHelveticasans-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:linka:active {
    
text-decorationnone;
    
color#466F8F;
}
a:visited {
    
text-decorationunderline;
    
color#648AA7;
}
a:hover {
    
text-decorationnone;
    
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)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:29.