Byta färg på en länk med css

5 svar · 745 visningar · startad av Mattias Nordin 16 juni 2007

Mattias NordinMedlem sedan dec. 20051 056 inlägg

Frågan16 juni 2007 16:22#1

Hej alla glada programmerare,

Är det möjligt att byta färg på länkarna inom en tabell med css?

Jag labbar nu med...

<td class="subMenyDesign">
Grå text...
</td>

Och sätter färgen på texten med följande css

.subMenyDesign{
/*background-color: yellow;*/ 
/*background: url("/web07/_design/sub_tab_0.gif");*/
width: 108px;
height: 18px;
font-family: tahoma, Arial, Helvetica, sans-serif;
font-size: 9px;
text-align : center;
color: gray;
text-transform: uppercase;
text-decoration:  none;  
cursor: pointer; 
}

Går det att komplettera css ovan så att även länkar inuti tabellen byter färg?

<td class="subMenyDesign">
Grå text...
<a href="">vill ha en grå länk</a>
</td>

Nu har jag en default blå länk :bla

ejickMedlem sedan mars 2001895 inlägg

16 juni 2007 17:22#2

a {
color: gray;
}
?

Eller vad menar du?

Mattias NordinMedlem sedan dec. 20051 056 inlägg

16 juni 2007 17:30#3

Nja, jag vill inte att alla länka ska bli grå utan enbart den som finns i just den <td> cellen.

Kan man baka in länkformateringen i klassen .subMenyDesign?

FreddeXMedlem sedan mars 2007117 inlägg

16 juni 2007 18:05#4

har du provat typ:
.subMenyDesign a { color: gray; }

aasahMedlem sedan mars 20034 471 inlägg

1 okt. 2007 19:09#5

a:link.subMenyDesign {     
  color: gray;
  text-decoration:none;
}

a:visited.subMenyDesign {  
  color: gray;
  text-decoration:none;
}

a:hover.subMenyDesign {    
  color: gray;
  text-decoration:none;
}

a:active.subMenyDesign {   
  color: gray;
  text-decoration:none;
}

bossseMedlem sedan juni 2003771 inlägg

1 okt. 2007 20:27#6

Är det möjligt att byta färg på länkarna inom en tabell med css?

Visst är det möjligt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
table {width:500px; height:300px; border:1px solid black}
td {border:1px solid black}
a.td {font-size:12pt;color:blue;text-decoration:none}
a.td:hover {color:red}
</style>
</head>
<body>
<table>
<tr>
<td><a href=http://www.google.se class=td>Google</a></td>
</tr>
<tr>
<td><a href=http://www.yahoo.se class=td>Yahoo</a></td>
</tr>
</table>
</body>
</html>