Foros del Web » Creando para Internet » CSS »

Vinculos y estilos

Estas en el tema de Vinculos y estilos en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/12/2004, 14:48
Avatar de Reynier  
Fecha de Ingreso: noviembre-2002
Ubicación: Por ahí en algún sitio
Mensajes: 1.844
Antigüedad: 15 años
Puntos: 1
Vinculos y estilos

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
__________________
Ing. Reynier Pérez Mira
  #2 (permalink)  
Antiguo 05/12/2004, 15:29
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola Reynier,

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>
__________________
_______
Jorge Rojas.
  #3 (permalink)  
Antiguo 06/12/2004, 11:03
Avatar de Reynier  
Fecha de Ingreso: noviembre-2002
Ubicación: Por ahí en algún sitio
Mensajes: 1.844
Antigüedad: 15 años
Puntos: 1
Pues nada

No me funciona. Otra sugerencia
__________________
Ing. Reynier Pérez Mira
  #4 (permalink)  
Antiguo 07/12/2004, 15:16
 
Fecha de Ingreso: octubre-2004
Mensajes: 12
Antigüedad: 13 años, 2 meses
Puntos: 0
Sonrisa

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

Última edición por bacoberto; 07/12/2004 a las 15:23
  #5 (permalink)  
Antiguo 07/12/2004, 15:49
 
Fecha de Ingreso: octubre-2004
Mensajes: 12
Antigüedad: 13 años, 2 meses
Puntos: 0
Sonrisa

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
  #6 (permalink)  
Antiguo 07/12/2004, 19:32
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Mensaje Hola de nuevo.

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
__________________
_______
Jorge Rojas.
  #7 (permalink)  
Antiguo 07/12/2004, 22:55
Avatar de Reynier  
Fecha de Ingreso: noviembre-2002
Ubicación: Por ahí en algún sitio
Mensajes: 1.844
Antigüedad: 15 años
Puntos: 1
A ver te explico un poco

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
__________________
Ing. Reynier Pérez Mira
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:01.