css para todos los vinculos

kiewic · #1 (**permalink**) 26/09/2004, 15:13

Hola, como puedo hacerle para que no tenga que estarle poniendo la class a cada vinculo así:

<a href="cien.htm" class="Texto">Fotos</a>

pues todos los vinculos de mi pagina quiero que lleven el misma clase y con los efectos de link, hover, visited, etc...

gracias

kurroman · #2 (**permalink**) 26/09/2004, 16:18

En css se pueden crear clase y "redefinir etiquetas". Si quiero una celda de color rojo puedo crear la clase

.celda_roja {background-color:red}

y en mi html poner en todas las celdas:

<td class='celda_roja'>

o bien:

td {background-color:red}

con lo que no tendria que poner ninguna clase en el codigo html.

Con los enlaces pasa lo mismo, solo que hay que definir los estados de estos. Te pongo un ejemplo:

a:link {
text-decoration: none;
font-size: 11px;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
color: white;
font-weight: 700;
}
a:visited {
text-decoration: none;
font-size: 11px;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
color: white;
font-weight: 700;
}
a:active {
text-decoration: none;
font-size: 11px;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
color: white;
font-weight: 700;
}
a:hover {
text-decoration:none;
font-size: 11px;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
color:#FFFF00;
font-weight:700;
}

navessd · #3 (**permalink**) 26/09/2004, 16:34

te recomiendo hacer un archivo de estilo (tu_archivo.css) y definir en él los estilos que serán usados en tu página. tu_archivo podría ser algo como esto:

Código:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

a:link {	
	color: #000000;	
	text-decoration: none;
	}

a:hover {
		text-decoration: underline;
		color: #000000;
		background-color: #FF9900;
		}

a:visited {
	color: #666666;
	text-decoration: none;
}
.peque {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
}
.tit {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
	letter-spacing: 5px;
}
.subtit {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 5px;
}
.medium {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	font-style: normal;
}

luego en tu página te enlazas con tu_archivo.css

Código HTML:

<link href="tu_archivo.css" rel="stylesheet" type="text/css">

esto iría entre las etiquetas <head> y </head>

si te fijas en los estilos, los que reciben un nombre sin un punto adelante estilos que definen elementos básicos de las páginas.

por ejemplo en body puedes definir cómo va a ser la apariencia del cuerpo de la página, color, si va uar un "background", tipo de letra "por defecto", etc...
en tanto que en a:link vas a definir la apariencia de TODOS los links de tu página.
en cambios los estilos que llevan un punto de prefijo en el nombre, son estilos normales, aplicables a cualquier etiqueta, ya sean tablas, párrafos, etc....
ten cuidado con darle muchos atributos a los estilos básicos, pues a veces entran en conflicto con los estilos que le aplicaste a una etiqueta cualquiera.

un salu2

kiewic · #4 (**permalink**) 26/09/2004, 16:38

wow, mil gracias, me has dejado impactado, no se si esto sea algo básico del CSS pero no lo conocia, ahora tengo muchas cosas por experimentar.

edudw · #5 (**permalink**) 26/09/2004, 21:44

buen aporte

kurroman · #6 (**permalink**) 28/09/2004, 01:37

Si, es fundamental hacer los estilos en un fichero aparte (idem para javascript), sino tendrias k ir pagina por pagina si kisieras kambiar el aspecto de todo tu sitio. Con el tiempo intenta no utilizar ningun tipo de atributo en las etiquetas html y veras que comodo es el CSS.