estilos

ElNegao
09 de Enero del 2003
si quiero hacer un estilo para unos links y otro para otros en la misma página como los diferencio. Mediante ID?

Y si quisiera hacerlos en archivos diferentes, es decir que unos links llamaran a un archivo con el estilo y otros links llamaran a otro?

Etxe
09 de Enero del 2003
La forma que yo conozco para hacer lo que quieres, crear un estilo diferente para cada tipo de enlace que quieras crear, es utilizar el atributo "class" en cada uno de dichos enlaces, por ejemplo:

<a href="loquesea" class="clase1">Este es un primer tipo de enlace</a>

<a href="loquesea" class="clase2">Este es un segundo tipo de enlace</a>

Y así sucesivamente. Luego, en una hoja de estilo definida en la cabecera del documento (entre </head> y <body>), diferencias las características de cada tipo de enlace. Te pongo un ejemplo completo a continuación:

<html>
<head>
<title>enlaces</title>
<style type="text/css">
a.clase1:link
{
text-decoration: none;
font-family: Arial;
font-size: 12pt;
color: #990000;
}
a.clase1:visited
{
text-decoration: none;
font-family: Arial;
font-size: 12pt;
color: #CC0000;
}
a.clase1:hover
{
text-decoration: none;
font-family: Arial;
font-size: 12pt;
color: #FFFFFF;
background-color: #000000;
}
a.clase2:link
{
text-decoration: underline;
font-family: Courier New;
font-size: 10pt;
color: #006600;
}
a.clase2:visited
{
text-decoration: none;
font-family: Courier New;
font-size: 10pt;
color: #00CC00;
}
a.clase2:hover
{
text-decoration: none;
font-family: Courier New;
font-size: 10pt;
color: #CC0000;
background-color: #CCCCCC;
}
a.clase3:link
{
text-decoration: none;
font-family: Times New Roman;
font-size: 11pt;
color: #FF6600;
}
a.clase3:visited
{
text-decoration: none;
font-family: Times New Roman;
font-size: 11pt;
color: #FFCC99;
}
a.clase3:hover
{
text-decoration: underline;
font-family: Verdana;
font-size: 11pt;
color: #3366FF;
}
</style>
</head>
<body>
<a href="http://www.programacion.com" class="clase1">Enlace tipo 1</a>
<p><a href="http://www.programacion.com" class="clase2">Enlace tipo 2</a>
<p><a href="http://www.programacion.com" class="clase3">Enlace tipo 3</a>
</body>
</html>

Si quieres poner las definiciones de estilo de cada tipo de enlace en archivos externos, incluyes cada una en archivos diferentes con la extensión ".css" (creados por ejemplo en el bloc de notas) y "llamas" a esos archivos desde la cabecera del documento como sigue:

<html>
<head>
<title>enlaces</title>
<link rel="stylesheet" href="enlaces1.css" type="text/css">
<link rel="stylesheet" href="enlaces2.css" type="text/css">
<link rel="stylesheet" href="enlaces3.css" type="text/css">
</head>
<body>
<a href="http://www.programacion.com" class="clase1">Enlace tipo 1</a>
<p><a href="http://www.programacion.com" class="clase2">Enlace tipo 2</a>
<p><a href="http://www.programacion.com" class="clase3">Enlace tipo 3</a>
</body>
</html>

El contenido de cada archivo conteniendo la hoja de estilo correspondiente sería como se ve en el siguiente ejemplo:

a.clase1:link
{
text-decoration: none;
font-family: Arial;
font-size: 12pt;
color: #990000;
}
a.clase1:visited
{
text-decoration: none;
font-family: Arial;
font-size: 12pt;
color: #CC0000;
}
a.clase1:hover
{
text-decoration: none;
font-family: Arial;
font-size: 12pt;
color: #FFFFFF;
background-color: #000000;
}

Espero que te halla quedado claro. Un saludo.

Etxe
09 de Enero del 2003
Una aclaración: sobra el ";" en:

href="http://www.programacion.com";

Perdón por el fallo. Saludos.