web css botones



Comenzando.


Como todos sabemos el código HTML de un vínculo sería algo así:

Ir a Taringa!

Sencillo ¿no?, pero el resultado visual sería este:



Aburrido... ¿verdad? . Entonces vamos a darle vida con CSS sin necesidad de tener el Dreamweaver para ello, simplemente abrimos el Bloc de notas y comencemos .
Nos fijamos primero en la etiqueta del código HTML que queremosestilizar :
Ir a Taringa!


Como vamos a trabajar sobre un vínculo entonces sería la etiqueta a.
En el Bloc de notas escribimos lo siguiente:

a {

}

¿Hasta aquí todo bien?, perfecto : Se escribe el nombre de la etiqueta y luego se abre una llave, dentro de esta irán todas las propiedades.


Color (color).


Comencemos por algo fácil y le daremos un color a la fuente:

a {color: #FF0000;
}

Se escribe primero la propiedad seguido por dos puntos, luego los parámetros separados por espacios y finalmente cerramos con un punto y coma.
En el caso de los colores se utiliza el código hexadecimal que consiste en 6 dígitos desde 0 (más oscuro) a F (más claro). En donde los dos primeros dígitos definen el color rojo los dos del medio al verde, los dos últimos al azuly siempre se comienza escribiendo el símbolo de numeral obteniendo así una mezcla de los tres colores primarios:
#FF0000



¿Dónde lo pongo?


Primero guardamos el archivo con el nombre de estilos.css en donde se encuentra nuestra página WEB y luego lo incrustamos en el código HTML entre las etiquetas y de esta manera:



Podemos ver que creamos un link hacia el fichero tipo(*.css) que hemos guardado en la raíz de nuestro sitio WEB con el nombre de estilos. Ahora en nuestra página aparecerán los vínculos así:




Border (borde).


Mmm... no cambió mucho . Pues vamos a agregarle más onda en nuestra hoja de estilo . Veamos... ¿qué tal un borde?

a {
color: #FF0000;
border: 2px #0000FF solid;
}

La propiedad border sirve para esto, dentro de losparámetros se coloca el ancho del borde en este caso 2px (dos píxeles), dejando un espacio el color #0000FF y el estilo del borde solid (sólido).
En el caso de los estilos de borde pueden ser:

none (ninguno)
dotted (punteado)
dashed (discontinuo)
solid (sólido)
double (doble)
groove (sombreado)
ridge (sombreado inverso)
inset (relieve)
outset (relieve inverso)



Abrimos nuestrapágina y...




Padding (relleno).


No se ustedes, pero a mí no me convence . Sería mejor si el borde estuviese más separado de las letras.
¡Ya sé!, vamos a usar la propiedad padding (relleno):

a {
color: #FF0000;
border: 2px #0000FF solid;
padding: 5px;
}

La propiedad padding se usa para, claro, dar más relleno al contenido. En este caso le dimos un relleno de 5px (5píxeles) arriba, derecha, izquierda y abajo. Veamos como queda:



Mucho mejor, pero vendría bien darle un poco más de relleno a los costados modificando la propiedad padding:

a {
color: #FF0000;
border: 2px #0000FF solid;
padding: 5px 20px 5px 20px;
}

Un momento ¿¡pero qué hicimos acá!?. Muy sencillo simplemente agregamos al padding cuatro valores en vez de uno separados porespacios para los rellenos de:

Primer valor (relleno superior)
Segundo valor (relleno derecho)
Tercer valor (relleno inferior)
Cuarto valor (relleno izquierdo)

Dando como resultado:




Background-color (color de fondo).


Ahora me apetece un color de fondo . Esto lo haremos con la propiedad background-color:

a {
color: #FF0000;
border: 2px #0000FF solid;padding: 5px 20px 5px 20px;
background-color: #FFFF99;
}




Font-family (familia de fuente).


No lo se... creo que deberíamos cambiarle el tipo de fuente ya que Arial es muy común en estos días ¿no?

a {
color: #FF0000;
border: 2px #0000FF solid;
padding: 5px 20px 5px 20px;
background-color: #FFFF99;
font-family: Comic Sans MS, Calibri, Arial;
}

La propiedad font-family...