Como poner dos estilos de font en un CSS?

Calizman · #1 (**permalink**) 18/10/2008, 11:12

Estoy creando una pagina con una hoja adjunta de css y necesito ponerle dos estilos diferentes a los links, por ejemplo que los links del encabezado sean blancos y grandes y que los links que estan hasta abajo salgan negros y con un size de 2px

Es esto posible? y... si es posible... como puedo hacer para que el mismo 2px salga en FireFox y en Internet Explorer?!

Muchas gracias por sus Respuestas!!!

Null_ · #2 (**permalink**) 18/10/2008, 11:36

Aqui te hise un codigo, cambiale las propiedades a tu gusto ^^

Cita:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css"></style>
</head>

<body>

<div id="contenido1">
<a href="pagina.html">Link1</a>
<a href="pagina.html">Link2</a>
<a href="pagina.html">Link3</a>
</div>

<div id="contenido2">
<a href="pagina.html">Link1</a>
<a href="pagina.html">Link2</a>
<a href="pagina.html">Link3</a>
</div>

</body>
</html>

Calizman · #3 (**permalink**) 18/10/2008, 12:12

O.O tengo otro problema... no jala el estilo! no entiendo porque... mira te envio mi codigo para que me ayudes y me digas ke hice mal! xD

esta es mi hoja de estilo...

#link1 {
font-family: Verdana,Geneva,sans-serif;
font-style: normal;
text-align: center;
text-decoration: none;
font-weight: bolder;
text-transform: none;
font-size: medium;
color: white;
display: inline;
}
#link2 {
font-family: Verdana,Geneva,sans-serif;
font-style: normal;
text-align: center;
text-decoration: none;
display: block;
font-weight: bolder;
text-transform: none;
color: #ffffff;
font-size: xx-small;
}

y asi lo enlace

<div id="link1"> <a href="VCN.html"
target="_blank">Inicio</a></div>

Cita:

(de hecho lo unico que quiero es que cambie el tamaño de la letra... que en vez de que aparezca grande la letra aparezca en letras muy pequeñas xD gracias por la ayuda!

Null_ · #4 (**permalink**) 18/10/2008, 12:43

Te falta ponerle el nombre de la etiqueta del link: "A"

Cita:

#link1 a { font-family: Verdana,Geneva,sans-serif;
font-style: normal;
text-align: center;
text-decoration: none;
font-weight: bolder;
text-transform: none;
font-size: medium;
color: white;
display: inline; }

tambien ocupa el siguiente codigo para describir como se vera el enlace cuando pongas el mouse encima

Cita:

#link1 a:hover { propiedadesssss }

suerte :D

PD: si no ves el link, es porke tu fondo es blanco y el color de letra tambien :B

Calizman · #5 (**permalink**) 18/10/2008, 13:43

wii!! perfecto!! eso era lo ke me hacia falta! muchas gracias! ahora no logro hacer que a:hover funcione! pero ya voy dentro y eso me alegra! muchas gracias por tu ayuda!

Null_ · #6 (**permalink**) 18/10/2008, 13:54

jajajaja de nada pues
con respecto a lo de a:hover te digo que es facil usarlo
has como si fuese el mismo codigo que utilizas para #link1 pero con distintas propiedades.

Aqui hay una explicacion de a:hover, a:visited y a:active :P!
http://codigodemaquina.110mb.com/CSS/pseudo-clases.php

Calizman · #7 (**permalink**) 18/10/2008, 13:59

si entiendo ke es... pero no funcionaaa!!!! mira lo puse asi:

Cita:

#link1 a:hover {
text-align: center;
font-size: medium;
font-style: normal;
text-decoration: none;
font-weight: bolder;
color: #cae74f;
display: inline;
}
#link2 a:hover {
text-decoration: none;
font-style: normal;
text-align: center;
font-weight: bold;
color: #cae74f;
display: inline;
font-size: x-small;
}

haber ke es lo ke tengo mal... deveria funcionar... pero no funciona! y lo enlace solo con el <div id="link2"> y <div id="link1"> pero no se si tenga ke aplicarle algo mas para que agarre el a:hover
xD

Null_ · #8 (**permalink**) 18/10/2008, 14:25

esta bien po... pero mejor postea todo el codigo html css... todo
y yo te lo arreglo ^^

Calizman · #9 (**permalink**) 18/10/2008, 14:28

... creo que sigo en problemas... ahora mira... no funciona el a:hover porque no se mete el a:visited! jaja no entiendo como pasa esto... pero mi codigo es este! haber si pueden ayudarme

Cita:

#link1 a {
text-align: center;
font-style: normal;
font-weight: bolder;
font-family: Verdana;
font-size: medium;
color: #ffffff;
display: inline;
text-decoration: none;
}
#link2 a {
color: #ffffff;
text-decoration: none;
font-style: normal;
text-align: center;
font-weight: bold;
font-family: Verdana;
font-size: x-small;
display: inline;
}
#link1 a:hover {
color: #cae74f;
}
#link2 a:hover {
color: #cae74f;
}
#link1 a:visited {
color: #fff;
}
#link2 a:visited {
color: #fff;
}
#link1 a:active {
color: #3cf;
}
#link2 a:active {
color: #3cf;
}

y esta insertado siempre con el <div id="link1"> y <div id="link2">

mi problema es que los links que ya estan visitados, no cambian de color cuando se posiciona el cursor, pero las paginas que aun no visito si cambian de color.

algo esta mal?

Mikmoro · #10 (**permalink**) 18/10/2008, 15:03

Debes respetar el orden:

- Link
- Visited
- Hover
- Active

Pruébalo así:

Cita:

#link1 a:visited {
color: #fff;
}
#link2 a:visited {
color: #fff;
}
#link1 a:hover {
color: #cae74f;
}
#link2 a:hover {
color: #cae74f;
}
#link1 a:active {
color: #3cf;
}
#link2 a:active {
color: #3cf;
}

Null_ · #11 (**permalink**) 18/10/2008, 15:11

esta perfecto el codigo! pero tienes que definir el estilo en un orden correcto

1. a:link
2. a:visited
3. a:hover
4. a:active

Cita:

#link1 a {
text-align: center;
font-style: normal;
font-weight: bolder;
font-family: Verdana;
font-size: medium;
color: #ffffff;
display: inline;
text-decoration: none;
}

#link1 a:visited {
color: #fff;
}

#link1 a:hover {
color: #cae74f;
}

#link1 a:active {
color: #3cf;
}

#link2 a {
color: #ffffff;
text-decoration: none;
font-style: normal;
text-align: center;
font-weight: bold;
font-family: Verdana;
font-size: x-small;
display: inline;
}

#link2 a:visited {
color: #fff;
}

#link2 a:hover {
color: #cae74f;
}

#link2 a:active {
color: #3cf;
}

Calizman · #12 (**permalink**) 18/10/2008, 22:22

=D gracias!! perfecto asi fue como me funciono!! xD muchas gracias por sus respuestas!! seguire preguntando si tengo dudas... xD

Gracias!