Vinculos y estilos

[Reynier]

Quiero poner los vinculos de mi sitio en colores segun las secciones a las que pertenezcan. Por ejemplo si el vinculo es de la seccion Foros ponerlo de una forma, si es de la seccion Noticias de otra forma. Yo lo he puesto asi"

Código HTML:

/* Vínculos */
A:link    { color: #000000; font-style: normal; font-weight: normal; text-decoration:none;}
A:hover   { color: #FFFFFF; font-style: normal; font-weight: normal; text-decoration: none; }
A:active	 { color: #FFEBCD; font-style: normal; font-weight: bold;   text-decoration: none; }
A:visited { color: #E4E4E4; font-style: normal; font-weight: normal; text-decoration:none; }

pero esto me lo hace de forma global, o sea, que me los pone todo iguales como puedo hacer para diferenciarlos y usar clases diferentes para cada tipo.

Salu2

[iconogt]

Eso que tu preguntas se hace de la siguiente manera.

Código:

A.estilo1:link { /*los valores y toda la cosa*/ }

/*y asi vas dandole visited, active, y hover*/ 
/**pero a todos tienes que colocarles la misma clase**/

Luego viene otro estilo:

Código:

A.estilo2:link { /*y al igual que el primer estilo, debes hacer lo mismo*/ }

/*** y así vas haciendo todos los que quieras***/

Y así de fácil, solo te quedaría aplicar la clase y listo.

Código:

<a href="vinculo.html" class="estilo1">primer estilo</a>

[Reynier]

No me funciona. Otra sugerencia

[bacoberto]

Hola, puedes probar creando una clase para cada sección de tu web:

Código:

 
.noticias{ /* tus reglas de estilo para las noticias */}

.foros{ /* tus reglas de estilo para los foros*/ }

y cuando vayas a utilizarlas:

Código:

<a href="miliga.html" class="noticias"> Enlace a las noticias</a>

<a href="otraliga.html" class="foros"> Enlace a el foro </a>

Espero que te sea útil

Saludos

[bacoberto]

Hola, otra vez.

Buscando otra cosa en www.w3schools.com
encontré este ejemplo, que creo que es lo que necesitas:
http://www.w3schools.com/css/tryit.a...e=trycss_link2

Saludos

[iconogt]

Si lo haces de la siguiente manera te tiene que funcionar bien, ya que esa es la manera correcta de hacer lo que tu quieres..

Código:

<style type="text/css">
<!--
A.estilo2:link { ??? }
A.estilo2:active { ??? }
A.estilo2:visited {??? }
A.estilo2:hover { ??? }
-->
</style>

Por último la clase:

<a href="vinculo.html" class="estilo2">Vinculo con estilo</a>

No sé porque no te funciona si a mi me funciona correctamente...

Ok slds... y buena suerte

[Reynier]

Te explico un poco como hago las cosas. Este es mi fichero CCS

Código HTML:

/* OCLAE CCS */
body {
	SCROLLBAR-FACE-COLOR: #2F5ECA;
	SCROLLBAR-HIGHLIGHT-COLOR: #8CBBEA;
	SCROLLBAR-SHADOW-COLOR: #CCCCCC;
	SCROLLBAR-3DLIGHT-COLOR: #5E9FE1;
	SCROLLBAR-ARROW-COLOR: #FFFFFF;
	SCROLLBAR-TRACK-COLOR: #FFFFFF;
	SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;
	SCROLLBAR-BASE-COLOR: #6699cc;
	font-family: Tahoma;
}

/* Vínculos */
A:link    { color: #000000; font-style: normal; font-weight: normal; text-decoration:none;}
A:hover   { color: #FFFFFF; font-style: normal; font-weight: normal; text-decoration: none; }
A:active	 { color: #FFEBCD; font-style: normal; font-weight: bold;   text-decoration: none; }
A:visited { color: #E4E4E4; font-style: normal; font-weight: normal; text-decoration:none; }

/* Vínculos */
A.foro:link    { color: #000000; font-style: normal; font-weight: normal; text-decoration:none;}
A.foro:hover   { color: #191970; font-style: normal; font-weight: normal; text-decoration: none; }
A.foro:active	{ color: #FFEBCD; font-style: normal; font-weight: bold;   text-decoration: none; }
A.foro:visited { color: #800000; font-style: normal; font-weight: normal; text-decoration:none; }

/* Puntero del Mouse */
.cursor   { cursor: hand; }

/* Fuentes y estilos de las mismas */
.fontbig  { font-size: 11px; }
.fontsmall{ font-size: 10px; }
.bold     { font-weight: bold; }
.stick    { color: #003399; }
.datetime { color: #3265C9; }
.necessary{ color: #C1660B; } 
.fieldset { color: #004080; }
.white    { color: #FFFFFF; } 

/* Errores de Sistema */
.error    { font-size: 10px; text-align: center; color: #C84F4F; font-weight: bold; }

/* Copyright */
.copyright{
	font-size: 11px;
	font-weight: bold;
	color: #F0F8FF;
}

/* Formularios y elementos */
.form 	 { margin-bottom: 1px; margin-left: 1px; margin-right: 1px; margin-top: 1px; padding: 1px; }
.btn      { border-right: 2px outset; padding-right: 1px; border-top: 1px outset; padding-left: 1px; background: transparent repeat-x left top; padding-bottom: 1px; border-left: 2px outset; color: #000000; padding-top: 1px; border-bottom: 2px outset }
.textarea { background: transparent; border: 1px solid #000066; font-size: 11px; font-family: Tahoma; }
.edit     { background: transparent; border: 1px solid #000066;}

/* Tablas y celdas */
.table    { border-style: solid; border-width: 2px; border-color: #2F5ECA; }
.tr       { background-color:#6699CC; }
.td       { background-color: #F0F8FE; }
.alterno  { background-color: #D9EEFF;}

/* Paneles */
.panel    { border-right: 3px outset; padding-right: 1px; border-top: 2px outset; padding-left: 1px; background: #FFFFFF repeat-x left top; padding-bottom: 1px; border-left: 2px outset; color: #000000; padding-top: 1px; border-bottom: 2px outset }

/* Relleno */
.normal   { padding-left:3px; padding-right:3px; padding-top:1px; padding-bottom:1px; }
.img      { padding-left:1px; padding-right:1px; padding-top:1px; padding-bottom:1px; }
.menupad  { padding-left:12px; padding-right:1px; padding-top:1px; padding-bottom:1px; }

/* Lines */
.topline  { border-top: 2px solid #2F5ECA; }
.botline  { border-bottom: 2px solid #2F5ECA; }
.rigline  { border-right: 2px solid #2F5ECA; }
.lefline  { border-left: 2px solid #2F5ECA; }

.toplineforo  { border-top: 1px solid #FFFFFF; }
.botlineforo  { border-bottom: 1px solid #FFFFFF; }
.riglineforo  { border-right: 1px solid #FFFFFF; }
.leflineforo  { border-left: 1px solid #FFFFFF; }

ahora cuando uso las clases como tu me explicas lo hago de esta forma:

Código HTML:

<td class='fontbig normal' align='right'><a href='cultura.php?pagina=".$previous."'><:: Anterior</a></td> 

es asi o me equivoco ??
Salu2