Hur gör jag en a och a:hover override?

4 svar · 556 visningar · startad av Matsakii 22 aug. 2009

MatsakiiMedlem sedan mars 2005265 inlägg

22 aug. 2009 01:42#1

Har en sida med ett CSS style sheet (stylesheet.css) som såklart har a, a:hover etc. Men på samma sida vill jag ha en del länkar med andra färger. Hur gör jag det enklast?

Är inge pro på CSS så gärna en förklaring med ett exempel :)

Thanks!

EsenMedlem sedan mars 20024 456 inlägg

22 aug. 2009 03:57#2

Ska se ifall jag lyckas förklara...

I din (stylesheet.css) lägger du till denna text:


.text1 { Här skriver du i te.x färg, storlek osv }
.text2 { Här skriver du i te.x färg, storlek osv }
.text3 { Här skriver du i te.x färg, storlek osv }
.text4 { Här skriver du i te.x färg, storlek osv }

För varje ny du vill skapa så börja med en . (punkt) och sen döper du den till vad du vill...
I mitt exempel så skapade jag olika rader.

När du e klar med det och vill hämta dom olika classerna så skriver du så här:


<span class="text1">Din text, eller vad du nu ska ha här.</span>

Hoppas du förstår hur jag menar?

MatsakiiMedlem sedan mars 2005265 inlägg

22 aug. 2009 08:41#3

Men gäller inte det här bara text? Jag menade mina textlänkar. Därav a:hover etc.

GunnarDMedlem sedan juni 20014 290 inlägg

22 aug. 2009 09:17#4

Så här kan du göra:

<html>
<head>
<title>Testsida</title>
<link rel="stylesheet" href="main.css" type="text/css" title="main.css" />
</head>
<body>
<ul>
<li><a href="http://www.google.se" title="www.google.se">www.google.se</a></li>
<li><a class="modifierad" href="http://www.google.se" title="www.google.se">www.google.se</a></li>
</ul>
</body>
</html>

och tillhörande .css fil

a:link {
        color: #0f0;
        text-decoration: none;
}
a:visited {
        color: #0f0;
        text-decoration: none;
}
a:hover, a:active {
        text-decoration: none;
}
a.modifierad:link {
        color: #f00;
        text-decoration: none;
}
a.modifierad:visited {
        color: #f00;
        text-decoration: none;
}
a.modifierad:hover, a:active {
        text-decoration: none;
}

Då kommer alla länkar vara gröna (som den första) förutom dom som har class="modifierad" som kommer att vara röda (som den andra).

jawbreakerMedlem sedan jan. 2003296 inlägg

22 aug. 2009 09:21#5

Alternativt kan du ändra alla länkar som ligger inom ett annat element med ett visst id eller en viss klass:

/* Ändra länkfärger etc för alla länkar som ligger i ett element med id="links" */
#links a {  }
#links a:href {  }

/* Ändra för alla länkar som ligger i ett element med class="links" */
.links a {  }
.links a:hover {  }

<div id="links">
	<a href="#">Länk</a>
</div>

<div class="links">
	<a href="#">Länk</a>
</div>