Introduccion a hojas de estilo CSS Leccion 3
Acontinuacion vamos a definir las etiquetas <h1> <h2> y <h3> y pondremos en nuestro archivo lo siguiente:
/*---etiquetas H---*/
h1 {
color: #9A1212;
font-size:18px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
h2 {
color: #9A1212;
font-size:12px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
h3 {
color: #9A1212;
font-size:10px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
De esta forma ya tendriamos editadas nuestras etiquetas principales.Los valores que hos he puesto son orientativos modificar y hacer pruebas con los valores
para ponerlos a vuestro gusto y acorde a vuesra web.
Acontinuacion vamos a definir la visualizacion de los enlaces que hagamos añadiendo el siguiente codigo a la etiqueta body.
body {
background: #E7E7E7 url('images/body.jpg') top left;
font-size: 14px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
a {color: #c43300;}
a:hover {color: #9a1212;
font-weight:bold;}
a:visited {color: #ff0000;}
La etiqueta a hace referencia a los enlaces <a href y tal y tal>.
Vamos a pasar a describir cada una de ellas:
a {color: #c43300;} Es el enlace que agamos. En este caso solo le hemos definido el color pero podeis definirle tamaño, tipo de letra en fin lo que queramos.
a:hover {color: #9a1212; font-weight:bold;} Aqui le decimos lo que queremos que haga cuando pasemos el raton por encima del enlace. En este caso le hemos dicho que cuando pase el raton por encima nos muestre un color diferente y negrita.Tambien podriamos añadir text-decoration: underline; para que nos muestre subrayado.
a:hover {color: #9a1212; font-weight:bold; text-decoration: underline;}
Tambien podemos poner una imagen que allamos hecho para los enlaces como en el menu de esta web sustituyendo underline por la ruta a una imagen.
a:visited {color: #ff0000;} Este nos indica cuando el enlace haya sido visitado que en este caso le hemos dicho que nos muestre otro color diferente al normal.
Tambien podriamos añadirle A:ACTIVE { propiedades que queramos} cuando se pulse sobre el enlace.
Recordar que para cualquier aclaracion, duda o consulta que tengais podeis hacerla en el foro que sera respondida con mucho gusto.